没有 ARIA，自动补全字段（例如来自 Amazon 的这个示例）对视障用户使用的屏幕阅读器来说极其难以操作。
如果你研究网页无障碍性，很可能会遇到 ARIA——Accessible Rich Internet Applications（富互联网应用无障碍规范）。有些人称它是解决所有网页无障碍问题的方案；另一些人则谴责它引发了问题。这两种说法都有一定道理，因为像所有网页技术一样，它的效果取决于你如何使用它。
ARIA 是万维网联盟（W3C）Web 无障碍倡议（WAI）发布的一项规范。它提供了一组 HTML 属性，帮助辅助技术理解现代网站中常见的复杂交互。
对于视力正常的用户，网页元素之间的关系通过布局和视觉设计来体现。ARIA 提供了一种将这些关系共享给辅助技术（如屏幕阅读器）的方式。
ARIA 传达几个关键特征：角色、状态和属性，以及关系。
- 角色向用户说明页面的结构，标题、横幅、搜索框、侧边栏和主要内容等都可以通过角色来传达。
- 状态和属性向用户说明元素当前的状态，例如对于打开面板的按钮，该面板当前是打开还是关闭（aria-expanded）？某个区域是否是动态的，即该字段的内容是否可能在无需刷新页面的情况下更新（aria-live）？
- 关系向用户说明各项之间是否存在关联，这包括描述信息，如填写输入框的说明（aria-describedby），或关于阅读顺序中下一个元素是什么的信息（aria-flowto）。
自动建议字段
考虑一个自动建议输入字段，例如 Google 或 Amazon 上的那种。当你开始输入时，后台脚本会查找与你正在输入的内容相似的结果，并将它们作为选项建议出来。这些建议会显示在一个附近的 HTML 元素中，视力正常的用户可以看见并从中选择。
自动建议字段不是默认的 HTML 元素。如果是默认元素，建议结果就会直接与查询字段关联。自动建议字段本质上是一个更丰富的下拉选择框版本，在普通下拉框中，你只能通过选项的前几个字母来缩小范围。而在自动建议搜索字段中，查询规则通常要复杂得多。
select 元素是 HTML 的默认组成部分。其选项以编程方式与输入字段关联，并且这些信息会直接共享给辅助技术（如屏幕阅读器）。
然而，自动建议字段有所不同：它总是自定义创建的。如果没有 ARIA，结果与输入之间就没有明确的关系，这使得屏幕阅读器用户很难知道是否有任何变化发生。使用 ARIA，我们可以建立输入字段与建议之间的关联，并告知辅助技术更新区域将包含需要向访客报告的新信息。
换句话说，通过这些简单的属性，你将一个让屏幕阅读器用户完全不知情的字段，转变为一个让任何用户都能受益于自动建议的字段。
对于动态区域而言，ARIA 不仅具有价值，而且对网站的无障碍访问至关重要；当使用 JavaScript 仅刷新屏幕的一部分时，辅助技术通常无法得知任何内容已发生变化，将区域声明为 aria-live 可通知辅助技术需要监控页面中的哪些区域以检测变化。
正确使用时，ARIA 可以极大地提升网站的无障碍性。但如果使用不当，它可能会引发全新的问题。
ARIA 不能替代 HTML
普通的输入元素通常这样标注。
<label for='your-name'>Your Name</label>
<input name='your-name' id='your-name'/>
你可以这样做，但不应该这样做。
<span id="your-name">Your Name</span>
<input name='your-name' aria-labelledby='your-name' />
为什么这是不可接受的？因为 ARIA 仅由辅助技术提供支持。但并非所有辅助技术都支持它，而且浏览器本身也不识别它。因此，如果您仅使用浏览器而没有任何辅助技术，或者使用的是不支持 ARIA 的旧技术，那么这个输入字段将完全没有标签。
ARIA 的良好用法是什么？承接上述基本表单输入的示例，良好的用法是当您需要对您的字段传达更详细的说明时，如下所示。
<label for="your-birthday">Your Birthday</label>
<input id="your-birthday" name="your-birthday" aria-describedby='date-format' type="text" />
<span id="date-format">Enter date in YY/MM/DD format</span>
这是有效的，因为标签本身并未传达填写该字段所需的所有信息。但它通过描述得到了增强，该描述现在明确与输入字段关联，并将在标签之后由用户的屏幕阅读器朗读给用户。
ARIA 增强 HTML
HTML 具有许多内置含义。表单字段有标签，标题提供结构，图像有替代文本。在构建无障碍网站时，您的第一步是将 HTML 内的每个元素连接起来。当 HTML 元素中已存在语义含义时，您无需使用 ARIA 对其进行扩展。在完善 HTML 后，当无法用 HTML 传达信息时，再添加 ARIA 属性。
切勿过度使用
人们往往倾向于探索 ARIA 属性并将其添加到各处，但切勿如此；ARIA 增强了 HTML 元素的意义，但这并不意味着 HTML 本身没有意义，如果查看标准的 HTML 元素如 <h1>，该元素本身等同于编写 <h1 role='heading' aria-level='1'/>，你无需包含该 role 或 aria-level 属性——它们是冗余的。
同样也没有理由使用 <h1 role='heading' aria-level='2′>，该代码表示 H1 标题具有 H2 的含义，既然它表示的是 H2，那就直接使用 H2，这样要简单得多。