font
标签,还记得吗?我希望你不记得,那些是“古时代”的产物了。
尽管我们有着共同的信念,但语义并不是与生俱来的。自从第一个HTML页面诞生以来,他们一直与我们在一起,自那时候已经有了很大的进步。有了HTML5标准之后,新的语义标签就被引入到我们的日常使用当中。
那么,语义不是仅仅为了SEO吗?
不一定。当您有意识地在<p>
或<span>
选择中使用了<h1>
标签时,这也意味着你也故意更改元素的含义,提供了层次结构,同时也构建页面信息的树形结构。
屏幕阅读器并没有忘记这一点。事实上,语义化是它最有用的武器之一
请记住,拥有强大的能力会带来很大的责任,所以一定要为每个元素使用合适的语义标签,从h1
到全新main的标签。
作为一个后续的观点,我想讨论一些不友好和有争议的地方。
time
元素显示了日期格式、时区的很多类型和使用ISO 8601标准来表示日期和时间的时间。
datetime
是一个可选属性,可以帮助表示time的内容。让我们看看一些例子:
del
和 ins
Web不断变化,但没有必要让这些变化被忽视。我们可以将ins
和del
这样的HTML标签与datetime
属性结合在一起使用。
ins
元素表示添加了一个文档:
button
vs. <a>
对于button
和<a>标签,我们什么时候使用更合适呢?
我们一起来看看。
<a>
元素的意思是链接一个文件或打开一个新标签或当前的链接。然而,每当我们希望触发一个Hamburger菜单或图片画廊之类的动作时,这个标签就有点不理想。button
元素对于这些情况就更为比较适合,而且通常可以用JavaScript实现。
此外,button
标签很容易与input type="button"
混淆,但他们的区别在于前者能够获取更多的内容(文、图像加文或仅图像)。
当使用button
标签时,有两件事情需要考虑:
首先,如果button
的内容不够明确(例如,在关闭按钮中使用X
),我们必须添加一个aria-label
属性来帮助解释其功能。
其次,如果添加href
属性是意义的(比如搜索组件或lightbox gallery),那么我们不仿使用一个a
标签和使用JavaScript来覆盖链接行为。如果没有启用JavaScript,使用带有href
标记的图像库将优雅地降级。
role
为了告诉屏幕阅读器用户,我们的链接触发了一个动作,实际上它不是一个普通的<a>标签,使用
标签时,我们必须给他添加一个
role
属性。
但是要小心。
当你编写你的JavaScript时,你不仅需要在点击时调用你的函数,还需要在用户按下空格键时调用你的函数。这是必要的,因为用于按钮的行为不同于用于链接的行为,用户应该能够触发这些命令中的任何一个操作。
有关于这方面更多的信息可以在MDN上了解。
记住,除非你打破规则,否则通常不需要aria role规则,比如上面的示例。HTML语义元素已经应用了默认的role
,比如nav
标记表示的是导航,标签表示的是链接等等。这意味着当我们希望更改这些默认值时,
role
属性只是必需的。
使用HTML和CSS有一些方法可以隐藏东西。下面的列表将帮助你找到每一种情况的最佳选择:
如果你想隐藏元素,但仍然让屏幕阅读器可以知道它们,那么最后一个选项是最好的选择。
这在表单的label
或Skip-to-content链接中非常有用。visuallyHidden
类是一个CSS代码,它什么你收藏,因为每个项目都容易用到它。是的,如果你愿意,你可以改名字(我的建议是.pottersCloak
)。
Web可访问性标准和指南在这里可以给我们提供很强的帮助。
本文前面的所有要点都是button
是如何工作的?我们应该什么时候使用它?display:none
和hidden
属性的区别是什么?
首先,它可能是非常枯燥的,但W3C标准和WCAG指南非常有用,它们还有非常强的意义。去吧,在他们当中提供了很多可用的信息。我向你保证,你将发现你从未接触的代码和实践!
一旦你应用到了所有这方面的知识,那就到了测试它的时候了。以下提供了一些工具测试你的网站可访问性:
ChromeVox
Accessibility Developer Tools for Chrome
Color Filter
W3C Validator
A11Y Compliance Platform
WAVE
我们试着养成经常测试的工作习惯。我们的下一个产品应该总是比上一个更好。虽然我们有时候会犯错,但我们会不断地去改进,更不用说从每个挑战中学习一些东西了。
我们希望我们的产品能为用户提供最好的体验,这就是为什么我们逐渐开始将可访问性标准添加到我们的工作流程中。
我们还有很长的路要走,还有些要改进的空间,但我们很高兴选择了这条路。
我们为Xapo所做的登录页面就是我们如何给网站添加可访问性标准的一个例子,你可以从这个例子中查到这方面的使用代码: