ARIA 是腻子，不是钢筋

Avatar of Eric Bailey
Eric Bailey 于

DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 的免费积分！

就像他们的物理对应物一样，我们用来构建网站的材料有其目的。 在不了解其优势和局限性的情况下使用它们是不负责任的。 没有人想住在建得很差的房子里。 那么为什么建得很差的网站是可以接受的？

在这篇文章中，我将讨论 WAI-ARIA 以及如何误用它会弊大于利。

材料作为技术

在建筑中，腻子用于修复内饰的细微缺陷。 它是一种浓稠的糊状物，干燥后会变成坚固的表面，可以打磨光滑并涂漆。 大多数房客在试图拿回他们的损坏押金时都会熟悉它。

钢筋是用于加固混凝土的钢筋格子。 每个现代建筑都使用它——您很有可能在经过任何规模相当大的建筑工地时看到它。

技术作为材料

HTML 是 web 的钢筋混凝土。 要扩展这个比喻，CSS 是内部和外部装饰，而 JavaScript 是布线和管道。

HTML 中的每个标签都有所谓的 原生语义。 以编程方式编写 HTML 元素的行为会向浏览器传达该标签的含义。 编写一个 button 标签明确地告诉浏览器，“这是一个按钮。 它 执行按钮式操作。”

之所以如此重要，是因为辅助技术会挂钩到原生语义并使用它来创建导航界面。 一个没有语义描述的页面就像一栋没有房间或窗户的建筑：通过屏幕阅读器导航的人 必须在黑暗中漫无目的地游荡，希望他们偶然发现他们需要的东西。

ARIA 代表 无障碍富互联网应用程序，是一个相对较新的规范，旨在 帮助辅助技术更好地与动态的、JavaScript 控制的内容进行通信。 它旨在通过为屏幕阅读器和其他辅助技术提供增强的交互性和上下文来补充 现有的语义属性。

用腻子建墙

我最近看到的一种令人担忧的趋势是盲目、大规模地应用 ARIA。 这感觉像是开发人员试图通过散弹枪来进行无障碍合规性测试——向目标扔足够多的东西，相信你最终会击中它。

不幸的是，这种方法存在非常真实的危险。 误用的 ARIA 有可能 弊大于利。

ARIA 中固有的语义意味着，当应用不当时，它可以通过屏幕阅读器创建不和谐、矛盾的混乱。 与其听到“这是一个按钮。 它执行按钮式操作。”，人们开始听到诸如“这不是什么，但它也是一个按钮。 但它也是一个禁用的复选框，它被禁用了，它需要不断地喊出来。”

如果您可以使用具有您需要的语义和行为的原生 HTML 元素或属性，而不是重新利用元素并添加 ARIA 角色、状态或属性来使其无障碍，那么请这样做。
– ARIA 使用的第一规则

此外，ARIA 是一项新技术。 这意味着 浏览器支持和行为各不相同。 虽然我对未来主要浏览器将具有 完整且统一的支持 持乐观态度，但 当前环境存在差距和错误。

另一个重要的考虑因素是谁实际使用这项技术。 合规性不是我们追求的一种纯粹的学术虚荣指标。 我们正在为真实的人构建强大的系统，使他们能够 尽可能少地复杂化 就能获得想要的东西或需要的东西。 许多使用辅助技术的人不愿升级，因为他们担心会破坏功能。 您是否曾经因为自己喜欢的程序重新设计而感到恼火，并且不得不重新学习如何使用它？ 是的。

Web 的力量在于其普遍性。 无论残疾与否，每个人都能访问是至关重要的方面。
– Tim Berners-Lee

看到大量 JavaScript 框架的 DRY 原则的优势也在其标记中涂抹了冗余和误用的属性，这感觉很虚伪。 web 默认情况下是无障碍的。 无论好坏，之后我们都可以自由地对其进行我们想做的事情。

解决方案

这并不是说我们应该完全避免使用 ARIA。 当以技巧和精确度应用时，它可以将混乱或令人沮丧的用户体验转变为直观且轻松的体验，并且有更少的脆弱的黑客和解决方法。

少量就能产生很大效果。 在考虑其他选择之前，请从语义上描述其所包含内容的标记开始。 广泛测试，只有在 HTML 的原生语义与 JavaScript 的交互之间出现差异时才应用 ARIA。

开发团队将欣赏简洁的代码带来的优势，这种代码更易于维护。 精明的开发人员将使用 CSS-Trick™ 并利用 CSS 属性选择器 来创建视觉呈现与语义意义相结合的系统。

input:invalid,
[aria-invalid] {
  border: 4px dotted #f64100;
}

例子

以下是一些我最近看到的更常见的模式，以及它们为什么有问题。 这并不意味着这些是唯一存在的错误，但它是一个很好的入门教程，可以识别出哪些不应该做。

<li role="listitem">Hold the Bluetooth button on the speaker for three seconds to make the speaker discoverable</li>

该角色是冗余的。 li 元素的原生语义已经将其描述为列表项。

<p role="command">Type CTRL+P to print</p>

command 是一个 抽象角色。 它们 仅 在 ARIA 中使用，以帮助描述其 分类法。 仅仅因为 ARIA 属性看起来像是适用的并不意味着它一定适用。 此外，kbd 标签可以在“CTRL”和“P”上使用，以更准确地描述键盘命令。

<div role="button" class="button">Link to device specifications</div>

未能使用 button 标签会导致无法适应用户与按钮交互的不同方式以及浏览器如何响应的风险。 此外，a 标签应该 用于链接。

<body aria-live="assertive" aria-atomic="true">

通常，执行此类操作的目的是 向屏幕阅读器用户公开更新。 不幸的是，当作用域限定为 body 标签时，任何页面更改——包括所有 JS 相关更新——都会立即宣布。 aria-live 上的 assertive 设置也意味着每次更新都会中断用户当前正在执行的操作。 这是一种灾难性的体验，尤其是在单页应用程序中。

<div aria-checked="true"></div>

您可以 将原生复选框元素的样式 设置为任何您想要的外观。 更好的支持！ 更少的工作！

<div role="link" tabindex="40">
  Link text
</div>

是的，它是 实际的生产代码。 从哪里开始？ 首先，永远不要使用大于 0 的 tabindex 值。 其次，title 属性可能无法执行您认为它应该执行的操作。 第三，锚标签应该有一个目标——毕竟，链接会带您去往某些地方。 第四，分配给包含 a 元素的 div 的 link 角色完全是多余的。

<h2 class="h3" role="heading" aria-level="1">How to make a perfect soufflé every time</h2>

功劳归功于功劳：Nicolas Steenhout 概述了此问题。

做得更好

就像 内容 一样，标记在构建网站时不应该是事后才考虑的。 我相信大多数人通常都在真诚地努力做到最好，但在不了解其影响的情况下使用技术是危险且不负责任的。

当我想让人们实践无障碍时，我通常更喜欢用蜜糖而不是醋，但这里不是。 这不是关于以无障碍、包容的心态进行开发和设计的优势的软性宣传。 这是一篇关于做好你工作的内容。

团队做出的每一个决定都会影响网站的无障碍性。
– Laura Kalbag

提高写作水平

了解可用的 HTML 标签，它们描述的内容以及最佳使用方式。同样适用于ARIA。在代码审查中，将页面模板语义与 JavaScript 代码给予相同的关注和重视。

提高测试水平

几乎没有理由不将屏幕阅读器纳入您的测试和质量保证流程中。 NVDA 是免费的。 macOS、Windows、iOS 和 Android 都内置了屏幕阅读器。一些好心人甚至编写了指南来帮助您学习如何使用它们。

自动辅助功能测试 非常有用，但它也不是万能的。它无法报告它不知道的东西，这意味着需要人工手动判断浏览网站是否合理。这与其他可用性测试工作没有区别。

建造更好的建筑物

通用设计 教会我们，网站就像建筑一样，可以兼具美观和无障碍。如果您正在寻找一个起点，这里有一些资源

悄悄话！ 创建一个 DigitalOcean 帐户，并获得 $200 免费额度，用于基于云的托管和服务。

评论

  1. Draz
    评论永久链接#

    role=”link” 示例不完整。您提到了 a 标签和标题，但直到您点击 Twitter 链接时才会在示例中出现。

    • Eric Bailey
      评论永久链接#

      感谢您的提醒。看起来 CMS 不会在代码示例中输出某些标签，我会看看是否可以修复它。

  2. basher
    评论永久链接#

    很棒的文章……正如上面所说

    “网络默认情况下是无障碍的。”
    “团队做出的每一个决定都会影响网站的无障碍性。”

此评论主题已关闭。如果您需要分享重要信息，请联系我们。

© 2024 . All rights reserved.