作为一名 7 年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。
是的,我们确实提供了带 alt 标签的图片,并使用 header、footer、main、aside、nav 和 section 标签......就是这些,大多数人止步于此。我们中的一些人仍然使用带 class 的 div 作为这些特定的布局元素。为什么?因为我们不知道。
我们这样做不是任何人的错,除了少数,这个领域的大部分人都是被推到这个坑里谋生的,多数又在坑里一遍又一遍地做着同样的事情,到最后还在想我到底在做什么。
直到有必要改变。
也许这种需要会以启蒙的形式出现,顺便说一句,启蒙很少发生,更有可能是将正确的行业可访问性规范从开发团队的指导方针变为强制性的要求。
后者可能是你我所处的境况。好了,闲聊结束,我们直奔主题。
注意:不适用于高级前端技术人员,我没有详细介绍可访问性,只想制定一个简单的指引,可以在所有项目中遵循,类似于需要注意的事项清单。
如果你发现任何错误,请随时指出,我会尽快纠正。
以下是我们在开发任何前端时需要注意的事项:
HTML 语义 —— 正确使用 HTML 分区元素
标题 —— 用于显示文档的结构,而非用于大字体的设计
键盘导航使用“tabindex”和 ARIA —— 确保 tab 可用以及删除多余的 tab 链接
可访问的图标按钮 —— 至少使用带有适当标签的
焦点指示器 —— 除非有替代方案,否则不要禁用默认的焦点样式
尽可能提供视觉标签
描述性信息图——为屏幕阅读器提供回退文本描述
HTML 语义
有一种叫做 ARIA 地标的东西,它能简单地将网页划分为不同的地标,使屏幕阅读器更容易在网页内部导航。
当前这是不需要主动思考就能实现的,因为我们可能在不知不觉中就这么做了,即“默认情况下,HTML 分区元素定义了 ARIA 地标”。
这意味着正确地使用 HTML 分区元素,像





