使用 ARIA 提高无障碍性
在前端开发中，无障碍性（accessibility）是非常重要的一个方面，特别是对于那些使用屏幕阅读器、手势输入等辅助技术的用户来说。Web 内容可访问性指南（WCAG）为 Web 开发者提供了许多指南来保证无障碍性。ARIA（Accessible Rich Internet Applications）规范通过定义一组标准的属性和角色，为 Web 应用程序增加了更多的无障碍性支持，本文将对 ARIA 进行详细介绍。
ARIA 是一个用于定义 Web 应用程序的无障碍性标准的规范。通过在 HTML 元素中添加 ARIA 属性和角色，开发者可以为辅助技术用户提供额外的语义信息来改进 Web 内容的可访问性。ARIA 规范的主要目的是为那些不适合使用 HTML 标签的交互和语义化组件提供语义信息，比如自定义的复选框、下拉列表等。
ARIA 规范主要定义了以下三种属性：
- Role 属性
Role 属性用于将角色信息分配给组件，使其更为易于被理解，这样辅助技术用户就可以更容易地与它们交互。例如，在一个表单中，可以使用 role="form" 属性来告诉屏幕阅读器该组件是一个表单，能够使用什么样的字段来填写表单。
- State 属性
State 属性表述某些组件的状态信息，例如，被选中还是未被选中、是否可编辑等。这类属性可以给辅助技术用户提供更详细的信息，以便更好地理解组件。例如，当 user 角色的属性设置为 aria-checked="true"，屏幕阅读器就可以告诉用户，在此时微调器处于选中状态。
- Property 属性
Property 属性用于提供有关组件的更加具体的信息，如一个图片的标题等。辅助技术用户可以利用这些属性来获得更多的信息，以便更好地理解组件。
在使用 ARIA 的时候，我们需要注意以下几点：
能够使用 HTML 标签时，尽可能使用 HTML 标签完成相同的任务，因为 HTML 标签已经内置了一些语义信息，这对于屏幕阅读器、搜索引擎、浏览器等都非常有用。
不要使用 ARIA 来替代 HTML 标签的语义，而应该使用 ARIA 补充 HTML 标签的语义。
在使用自定义组件时，应该始终使用已经存在的 role 和 state 属性，而不是创建自己的自定义 role 和 state。
接下来，我们将使用 ARIA 来提高一个简单的网站的相关无障碍性。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- --------------- ------- ------ ------ ---------- -------------- ------ ---- ----------------- ------ ------------ ------ ------------ -------------- ---------- -------------- ----- -------- ------ ---------- ------ ------------ -------------- -------- ------------ --- -------- ------ ------------ ------ ------------ -------------- ---------- -------------- ----- -------- ----------- ---- ------ ------------- --------------- ------- ------- -------展开代码
以上代码是一个简单的表单，其中包含了一个单选按钮组和一个提交按钮。现在我们将使用 ARIA 将该表单更具有可访问性。
首先，我们可以通过 role 属性将 fieldset 元素的角色设置为 group。因为 fieldset 表示表单的分组，用 group 来描述和组合多个元素将非常有帮助。
<fieldset role="group">
接下来，我们可以用 aria-labelledby 属性来将 fieldset 元素的标签和 legend 元素关联在一起。
<fieldset role="group" aria-labelledby="country-select"> <legend id="country-select">Please select your country:</legend>
然后，我们可以使用 role 属性将选项按钮的角色设置为 radio，并将其中一个按钮选中。我们还将使用 aria-checked 属性来提供按钮的状态信息。
<input type="radio" name="country" id="china" value="china" role="radio" aria-checked="true">
最后，我们可以使用 aria-label 属性来为提交按钮提供可理解的标签。
<input type="submit" value="Submit" aria-label="Submit the form">
完成以上操作之后，这个表单就提供了更好的无障碍性。完整的代码如下所示：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- --------------- ------- ------ ------ --------- ------------ --------------------------------- ------- -------------------------- ------ ---- ----------------- ------ ------------ ------ ------------ -------------- ---------- ------------- ------------ -------------------- ----- -------- ------ ---------- ------ ------------ -------------- -------- ----------- ------------- --- -------- ------ ------------ ------ ------------ -------------- ---------- ------------- ------------- ----- -------- ----------- ---- ------ ------------- -------------- ------------------ --- ------ ------- ------- -------展开代码
总结
通过在 HTML 元素中添加 ARIA 属性和角色，我们可以为辅助技术用户提供更多的语义信息，从而提高 Web 内容的可访问性。然而，使用 ARIA 应该遵循一些最佳实践，比如最大限度利用 HTML 标签的内置语义，不创造自定义属性等等。为了提供更加易于使用的和具福的 Web 应用程序，开发者应该注重提高 Web 应用程序的无障碍性。
参考文献
- Web Accessibility Initiative (WAI). (2009). Accessible Rich Internet Applications (ARIA). Retrieved from https://www.w3.org/TR/2018/REC-wai-aria-1.1-20180711/
- Mozilla Developer Network (MDN). (n.d.). Web Accessibility: ARIA semantics. Retrieved from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Semantics.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64579e8f968c7c53b0a41119
