HTML aria 属性与 WAI-ARIA 无障碍详解

场景

在编写 HTML 页面时，相信大家都有遇到过以 aria- 开头的属性，如 aria-placeholder ，aria-hidden，aria-details 等等

WAI-ARIA

WAI-ARIA 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的无障碍，。

• role（角色）: 定义了元素是干什么的。其实重复了 HTML5 的结构元素的语义价值。例如 role="navigation" (<nav>) 或者 role="complementary" (<aside>)，这也有一些描述其他页面结构的（角色），例如 role="banner", role="search", role="tabgroup", role="tab" 等等
• aria-[attr]（属性）：通过定义一些属性给元素，让他们具备更多的语义。例如： aria-required="true" 意味着元素在表单上是必填的。然而 aria-labelledby="label" 允许你在元素上设置一个 ID，用于 labelledby 引用作为屏幕阅读器指定的 label 内容
• aria-[state]（状态）：用于表达元素当前的条件的特殊属性，例如 aria-disabled="true"，屏幕阅读器就会认为这个表单禁止输入。

关于 WAI-ARIA 属性重要的一点是它不会对 web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)，这也是屏幕阅读器这一类软件的信息源。 WAI-ARIA 不会影响网页的结构，以及 DOM 等等，尽管这些属性可用于作为 css 选择器。

示例

下面这个表单添加了 aria-label 属性，那么当页面聚焦到此表单上时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上呈现效果，只是方便设备读取备注。

<input
  type="text"
  class="form-control"
  id="name"
  placeholder="请输入名称"
  aria-label="名称"
/>