何时在 HTML 中使用 aria-labels

TL;DR

在网页上显示多个包含相同文本的链接是很常见的，例如博客文章列表中的“阅读更多”。为了提升使用屏幕阅读器和辅助工具的用户的网页体验，请为锚点元素添加一个 aria-label，并在其中添加文本以区分后续链接的内容。

在 Chromium Dev Tools > Accessibility 中检查结果。瞧！

检查可访问性

在之前的文章《如何让你的代码块在你的网站上可访问》中，我列出了我用来检查网站可访问性的许多工具，作为我工作流程的一部分，其中包括axe Dev Tools。

这是我网站主页的一部分，其中显示了最近的博客文章列表。请注意下方带有“阅读更多”文字的六个链接。

每个“阅读更多”链接（没有 aria 标签）的代码可能如下所示：

<a href="https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website">Read more</a>

如果我们使用axe扫描上面的代码，我们会收到以下警告：

确保具有相同可访问名称的链接具有类似的用途

您可以使用 Chromium 开发者工具中的辅助功能树来检查屏幕阅读器和辅助技术如何理解您的网页。“辅助功能”选项卡位于“样式”选项卡最右侧。

如果你用屏幕阅读器点击某篇博文的链接，结果只看到“阅读更多”这几个字——而且读了六遍——你肯定会很郁闷！那么，我们该如何解决这个问题呢？

添加 aria-labels 以提供描述信息

我始终建议使用各种工具来检查网站的可访问性，并结合自身判断。以下是 Axe 在上述示例中建议的检查内容：

检查链接是否具有相同的目的，或者是否故意含糊其辞

我检查了一下，确认了。这些链接的目的各不相同——它们指向不同的博客文章或后续旅程。这就是 aria-labels 的强大之处。

这是添加了 aria-label 属性的相同锚链接：

<a href="https://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website" aria-label="Read How to make your code blocks accessible on your website">Read more</a>

当我们使用axe重新扫描页面并设置好 aria-labels 后，一切看起来都很棒！我们还看到，这些链接在辅助功能树中有不同的标题，这使得屏幕阅读器和辅助技术能够在元素获得焦点时读出更具描述性的链接。

边缘情况

依赖 aria-label 的缺点是，使用自动翻译工具时，该属性的内容可能无法自动翻译。Adrian Roselli 在这篇博文中详细介绍了aria-label 无法翻译。

7 个 Web 开发辅助功能工具助您打造更优质的网站

要了解我每天使用的不同辅助功能工具的更多信息，请查看我的第一个 YouTube 视频 - 7 种 Web 开发辅助功能工具，可帮助您构建更好的网站。

从编写第一行代码的那一刻起，就将可访问性作为 Web 开发工作流程的一部分，当您构建内容、学习知识并热爱所做的事情时，您将自动为每个人创造更好、更具包容性的体验。