随着互联网的普及，我们使用的应用程序和网站越来越多。然而，我们并不总是能够获得与其他人一样的访问这些资源的能力。例如，存在一部分用户，他们需要使用助听器、屏幕阅读器或其他辅助设备来访问网站，使他们能够在互联网中实现生活中的常见任务。这个例子中的用户被称为 “残障人士”（人们偏好地称之为 “残疾人士”）。
在无障碍界面设计的过程中，ARIA 规范（可访问性渐进式增强技术）是一个必不可少的规范，可以确保残障人士能够像其他人一样访问网络资源，并使用功能更加强大和易用的界面。本文将介绍如何基于 ARIA 规范构建无障碍友好的 UI 控件。
ARIA 规范简介
ARIA 是一组 Web 技术规范，其目的是使 Web 内容和 Web 应用程序可访问性更好。ARIA 规范为当前不支持无障碍交互的 Web 应用程序添加标准属性和事件，使残障人士可以使用助听器、屏幕阅读器和其他辅助技术与界面进行交互。ARIA 定义了一组 semantic role（语义角色）、state（状态）和property（属性），以描述网页上控件的行为、结构和意义。
如何构建无障碍友好的 UI 控件
使用 role 属性
role 属性用于将语义信息（如按钮、列表或标签页等）添加到 HTML 标记中，以便屏幕阅读器和其他助听器可以识别它们。以下是 role 属性的几个示例：
<button role="button">Click Me!</button><nav role="navigation"> ... </nav><table role="table"> ... </table><h1 role="heading" aria-level="1">Page Title</h1>
这些语义信息可以帮助香盲用户正确地导航网站，并使他们能够更好地理解网站的结构和内容。
使用 aria-label 和 aria-labelledby 属性
使用 aria-label 属性可以为一个元素提供一个简短的描述，该描述提供了一个人类读者能够理解的标签。这通常用于没有相关文本的图像或按钮。例如：
<button aria-label="Add Item">+</button><img src="..." alt="" aria-label="Fun Image">
而使用 aria-labelledby 属性可以将一个元素关联到一个标准元素、一个指定 ID 的元素、一个 title 属性和 / 或一个 name 属性中的值。以下是用于指定 aria-labelledby 属性的示例：
<label id="label1">Item Name:</label><input type="text" aria-labelledby="label1"><h2 id="main-heading">Main Heading</h2><nav aria-labelledby="main-heading"> ... </nav>
以上示例中，输入元素使用了 aria-labelledby="label1" 属性，将输入元素与 id="label1" 的标签关联起来，这样屏幕阅读器就可以生成一个简短的标签。
使用 aria-expanded 属性
aria-expanded 属性表示元素是否展开或折叠。它可以用于例如折叠面板、标签页或下拉列表等组件。以下是使用 aria-expanded 属性的示例：
------- -------------------- ------------------------------- -------------- ---- ----------- -------------- --- ------
这个示例中，当按钮被点击时，折叠面板展开或折叠，屏幕阅读器也会相应地告知用户。
使用 aria-describedby 属性
aria-describedby 属性用于将辅助文本描述添加到一个元素，这个描述提供了一个简短的、可理解的解释，并为残障人士提供了额外的信息。以下是使用 aria-describedby 属性的示例：
------ ----------- ----------------------------- ---- --------------- ------ ----- ---- ---- ---- ------ --- ---- ------ ------
在这个示例中，当屏幕阅读器移动到输入元素时，它将给出
Please enter your full name (first and last name).的提示，帮助用户更好地理解界面语义。
使用 aria-live 属性
aria-live 属性指定了一个元素是否需要被立即报告到用户，在它的内容发生变化时，例如聊天室应用程序。以下是使用 aria-live 属性的示例：
---- ------------------- --- ---- ------- ---- ------- ------
这个示例中，当新消息到达聊天室时，屏幕阅读器将在内容发生变化时通知用户。
结论
ARIA 规范为 Web 应用程序开发者提供了一种构建无障碍友好的 UI 控件的标准方法，它涵盖了一系列用于增强 Web 内容可访问性的语义角色、状态和属性。在设计界面时，开发者应该使用这些方法，使残障人士能够同其他用户一样访问 Web 内容。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67073f42d91dce0dc8661ed7