做了七年前端开发，我最近才意识到可访问性的必要……

作者 | Deepak K Vijayan

译者 | Phoenix

策划 | 闫园园

作为一名 7 年多的前端开发者，我从未想过我的工作需要具有可访问性，直到最近才领悟。

是的，我们确实提供了带alt标签的图片，并使用header、footer、main、aside、nav和section标签...... 就是这些，大多数人止步于此。我们中的一些人仍然使用带 class 的 div 作为这些特定的布局元素。为什么？因为我们不知道。

我们这样做不是任何人的错，除了少数，这个领域的大部分人都是被推到这个坑里谋生的，多数又在坑里一遍又一遍地做着同样的事情，到最后还在想我到底在做什么。

直到有必要改变。

也许这种需要会以启蒙的形式出现，顺便说一句，启蒙很少发生，更有可能是将正确的行业可访问性规范从开发团队的指导方针变为强制性的要求。

后者可能是你我所处的境况。好了，闲聊结束，我们直奔主题。

注意：不适用于高级前端技术人员，我没有详细介绍可访问性，只想制定一个简单的指引，可以在所有项目中遵循，类似于需要注意的事项清单。

如果你发现任何错误，请随时指出，我会尽快纠正。

以下是我们在开发任何前端时需要注意的事项：

HTML 语义—— 正确使用 HTML 分区元素

标题—— 用于显示文档的结构，而非用于大字体的设计

键盘导航使用“tabindex”和 ARIA—— 确保 tab 可用以及删除多余的 tab 链接

可访问的图标按钮—— 至少使用带有适当标签的

焦点指示器—— 除非有替代方案，否则不要禁用默认的焦点样式

尽可能提供视觉标签

描述性信息图——为屏幕阅读器提供回退文本描述

1

HTML 语义

有一种叫做 ARIA 地标的东西，它能简单地将网页划分为不同的地标，使屏幕阅读器更容易在网页内部导航。

当前这是不需要主动思考就能实现的，因为我们可能在不知不觉中就这么做了，即“默认情况下，HTML 分区元素定义了 ARIA 地标”。

这意味着正确地使用 HTML 分区元素，像、、、、article>、 等，而不要使用。

请查看 ARIA 实践（https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html），可以更深入地学习。

2

标题

屏幕阅读器浏览网页的另一种方式是使用标题。

使用标题是展示文档结构的一种方式，如果只是设计上要显示大字体或粗体，则不要使用它。

考虑一个没有 h1 页面的场景，当屏幕阅读器读到这样的页面时，用户是无法获知标题的，而页面的标题通常是用表示。

在这种情况下，为了提高可访问性，你可以做两件事：

请设计师做出一些必要的改变，这可能行不通，因为设计已经被客户签署了。

将标签添加到页面结构，并隐藏它。

当我们需要在网页上隐藏某些内容时，有以下几个选项：

display: none;

visibility: hidden;

opacity: 0;

clip-path: inset(100%)

选项1和2不可行，因为它们使元素从 DOM 中完全删除了，屏幕阅读器也不可用，隐藏属性也不行，这等同于“display: none;”。

参考用下面的样式类来隐藏你的元素：

3

键盘导航使用“tabindex”和 ARIA

我们需要了解的是，不是所有的用户都使用鼠标来浏览网页，有些只使用键盘导航，还有一些使用屏幕阅读器。对这些用户来说，从网页的一个部分到另一个部分，可能不像使用鼠标操作的人那么简单。

我们考虑下面的场景：

假设我们有一个博客，在文章的列表页上，一篇文章如下所示：

它有一个缩略图、一个标题、一个描述和一个“阅读更多”的按钮，这是几乎所有博客文章的通用模板。那么，我们是如何链接到详情页呢？

我们将缩略图做成一个链接 (link 1)，接着是标题(link 2)，然后是“阅读更多”按钮 (link 3)，这 3 个链接都指向同一个页面。

因此，当我们使用屏幕阅读器或键盘浏览页面时，我们必须用 tab 键按 3 次才能跳转到下一篇文章。

这当然得避免，也很简单。对冗余的链接，可以添加以下属性：

tabindex="-1"（它可以防止链接被 tab 选中 —— 对于键盘用户）

aria-hidden="true"（你不需要将它暴露给屏幕阅读器，因为已经有了相同的链接 —— 对于屏幕阅读器）

4

可访问图标按钮

首先，在设计中有按钮时，应使用元素，不要使用等其他元素，再将样式设置为按钮的样子，我知道我们这样做已经很久了，但是时候改变了。

等其他元素，再将样式设置为按钮的样子，我知道我们这样做已经很久了，但是时候改变了。

原因正如 HTML 语义部分所述，原生元素有很多内置的 ARIA 特性。

尽管用和做出来的按钮对于大多数用户来说，看起来是一模一样的，但对于使用屏幕阅读器的盲人用户来说，它看起来非常不同，屏幕阅读器甚至可能会忽略这是一个按钮。

这里也有一些注意事项：

不设置按钮样式以及设置按钮样式的理想方法

针对于没有任何文本、只有图片的按钮，可遵循以下三个步骤中的任何一个：

使用隐藏的来指明按钮标签

在上使用 aria-label

在上使用 aria-labelledby