使用 WAI-ARIA 技术增强 Web 网站的无障碍性-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 技术的发展，Web 站点的访问人群越来越广，包括视力障碍、听力障碍、智力障碍和身体障碍等。这种多样的访问人群使得我们需要更好地为他们提供服务。因为现在的 Web 应用程序常常需要支持这样的访问者，我们就需要考虑如何让 Web 应用程序更加无障碍友好。WAI-ARIA 是一项支持无障碍 Web 技术的标准。本文将介绍 WAI-ARIA 的基础知识，并展示如何使用 WAI-ARIA 技术来增强 Web 网站的无障碍性。

WAI-ARIA 简介

WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications)，是一个以 W3C 规范为基础开发的标准，它为可访问的 Web 应用程序提供了一种解决方案，这种解决方案涉及到协助技术、键盘操作和表单交互等一些列的无障碍方面。通过使用 WAI-ARIA 技术，我们可以为那些使用辅助技术访问 Web 应用程序的人们提供更好的访问条件。

WAI-ARIA 角色和状态

WAI-ARIA 规范有两个重要的概念：角色和状态。角色指的是元素的类型，例如菜单、按钮、对话框，其中一个元素可以扮演多个角色，状态指元素的当前状态，例如元素是否禁用、是否展开等等。

WAI-ARIA 角色

article，代表一篇文章，和文档、博客和其他允许用户交互和更新的页面相关。
button，代表一个可以被点击的按钮。
checkbox，代表一个可以被选中或者取消选中的复选框。
dialog，代表一个将允许用户交互的对话框。
grid，代表一个带有行和列的表格。
listbox，代表一个包含固定数量的条目选择列表。
menu，代表一组让用户从多个选项中选择的菜单列表。
progressbar，代表一个用于表示进度百分比的进度条。

WAI-ARIA 状态

aria-checked，代表元素的选择状态，可以是 true、false 或者 mixed。
aria-disabled，表示元素是否启用（或者禁用）。
aria-expanded，表示元素的展开或者折叠状态。
aria-hidden，表示元素是否应该被屏蔽，不可访问，例如在模态事件中，设置为 true 可以屏蔽背景元素。
aria-selected，表示元素是否选中。

WAI-ARIA 技术实现

下面我将通过实例来展示如何使用 WAI-ARIA 技术来增强 Web 网站的无障碍性。

为表格增加 WAI-ARIA 角色

<table role="grid">
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>班级</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">1</td>
      <td role="gridcell">小明</td>
      <td role="gridcell">1年3班</td>
      <td role="gridcell">90</td>
    </tr>
    <tr>
      <td role="gridcell">2</td>
      <td role="gridcell">小红</td>
      <td role="gridcell">1年1班</td>
      <td role="gridcell">80</td>
    </tr>
  </tbody>
</table>

对于表格，我们可以将其角色设为 grid，列和行格子的角色分别设为 gridcell。

为分页条增加 WAI-ARIA 角色和状态

<nav role="navigation">
  <ul role="list" aria-label="页码">
    <li role="listitem">
      <a href="/page/1" role="button" aria-label="第一页">1</a>
    </li>
    <li role="listitem">
      <a href="/page/2" role="button" aria-label="第二页">2</a>
    </li>
    <li role="listitem">
      <a href="/page/3" role="button" aria-label="第三页">3</a>
    </li>
  </ul>
</nav>

分页条的角色可以设置为 navigation，每个按钮则需要设为 button。而其状态则可以通过 aria-label 属性传递页面信息。

为单选框组增加 WAI-ARIA 角色和状态

<div role="radiogroup" aria-label="性别">
  <label role="radio" aria-checked="true">
    <input type="radio" name="gender" value="male">男
  </label>
  <label role="radio" aria-checked="false">
    <input type="radio" name="gender" value="female">女
  </label>
</div>

对于单选框组，我们可以将其角色设为 radiogroup，每个单选框的角色是 radio。对于 aria-checked 属性，在题目中我们可以将其设为 true 或 false。

总结

WAI-ARIA 技术可以使得 Web 网站变的更加无障碍友好，通过使用相关的角色和状态属性，可以为一些辅助技术（如屏幕阅读器等）提供更好的访问体验。因此，为 Web 网站增强 WAI-ARIA 技术的应用是非常重要的。希望本篇文章对大家的学习和开发有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ace741add4f0e0ff67939c