在互联网发展的今天，许多人已经离不开网络，但是对于一些身体上或认知上有障碍的用户来说，访问网站可能是一项非常困难的任务。这时候，前端无障碍实践就显得尤为重要了。本文将介绍如何使用 ARIA（Accessible Rich Internet Applications）技术提高网站的可访问性。
什么是 ARIA？
ARIA 是一种 W3C 标准，它能够使 Web 内容和 Web 应用程序更易于使用和更具有可访问性。ARIA 提供了一组用于增强 HTML 元素的属性和角色，使得这些元素可以更好地适应残障用户的需求。ARIA 通过增强语义信息使得残障用户能够更好地了解页面的结构、交互方式以及内容。
ARIA 分为三个部分：
- 角色属性：指定 HTML 元素扮演的角色；
- 属性：用于自定义 HTML 元素的行为；
- 状态：用于描述元素的交互状态。
ARIA 的实践
下面将通过实例来演示如何在网站中使用 ARIA 技术。
1. 对话框（Dialog）
对于视力障碍用户，因为无法看到弹出框，因此无法得知网页弹出框的信息。为了让视障用户知道弹出框的内容，可以通过 ARIA 的 dialog 属性来实现。
<button id="open-dialog" aria-controls="dialog" aria-haspopup="dialog">Open Dialog</button> <div id="dialog" role="dialog" aria-labelledby="dialoglabel" aria-modal="true"> <h1 id="dialoglabel">Dialog Example</h1> <p>This is an example of a dialog using ARIA attributes.</p> <button id="close-dialog" aria-controls="dialog">Close Dialog</button> </div>
在上面的代码中，使用 aria-controls 属性指定了 button 元素打开的 dialog 元素 id。而 div 元素中则包含了 role 为 dialog，该属性定义了该元素是一个对话框。通过 aria-labelledby 属性和 h1 元素的 id 值，可以让屏幕阅读器读出对话框的标题。最后，将 aria-modal 属性设置为 true，以防止用户在弹出框之外的区域与页面交互。
2. 列表框（Listbox）
列表框是一种包含多个选项的下拉菜单，用户可以从中选择一个或多个选项。但是对于盲人用户来说，由于无法看到选项，因此无法知道当前选中哪一个选项。为了让盲人用户知道当前选中的选项，可以通过设置 ARIA 的属性来达到目的。
<label for="my-listbox">Listbox Example: Choose a fruit</label> <select id="my-listbox" aria-label="Listbox Example" aria-required="true" role="listbox"> <option aria-selected="true" role="option">Apple</option> <option role="option">Banana</option> <option role="option">Orange</option> <option role="option">Grape</option> </select>
在上面的代码中，使用 aria-label 属性来指定列表框的描述，使用 aria-required 属性来标记列表框为强制选项。而在 option 元素中，则使用 role 属性来指定该元素的角色，使用 aria-selected 属性来指定选中状态。通过这些设置，盲人用户可以通过屏幕阅读器知道当前选中的内容。
3. 幻灯片（Slider）
幻灯片是一种包含一个滑动块和一个文本框的交互式控件，用户可以拖动滑块来控制文本框中的值。但对于身体障碍或者精神残障用户来说，可能无法通过拖动滑块来完成相关操作，这时候就需要使用键盘来控制幻灯片。
<label for="slider-example">Slider Example: Set a value between 0 and 100</label> <div role="slider" id="slider-example" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"> <span class="slider-handle" tabindex="-1"></span> </div>
在上面的代码中，使用 role 属性来设置元素的角色，该元素的角色为 slider。使用 tabindex 属性来使元素可获得焦点并使用 keyboard 控制。通过 aria-valuemin，aria-valuemax 和 aria-valuenow 属性来设置元素的最小、最大和当前值。同时，将 slider-handle 元素设置为 tabindex="-1"，使其可以通过键盘操作来唤出此元素。
总结
ARIA 技术不仅对于身障用户，对于移动用户也非常友好。通过使用 ARIA 规范，可以帮助身障用户更好地访问网站内容，并且能够提高移动用户的用户体验。在实际开发中，ARIA 的应用需要有具体的场景和针对性，建议根据实际情况进行相应的 ARIA 设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a40c4cadd4f0e0ffc3fd4c