前言
在传统的 Web 应用中，为了方便阅读和操作，我们通常使用大量的 JavaScript 和 CSS 来增强网站的可用性和可访问性。然而，在我们的网站中添加这些增强功能可能会对残障人士的使用造成限制。这时，无障碍开发就显得尤为必要。ARIA（Accessible Rich Internet Applications）属性就是无障碍开发的一个重要概念，在本文中我们将详细讨论如何使用ARIA属性来实现无障碍开发。
ARIA 属性是什么？
ARIA是一组用于增强 HTML 标记结构的属性。它可以让残疾人士通过辅助技术（如屏幕阅读器、语音识别软件等）更好地理解和使用网站功能。ARIA属性包括：role、aria-*、tabindex 等，其中大部分属性是用于描述元素的语义和行为的。
role 属性
role 属性是ARIA属性中最基本且最重要的属性之一。它描述了元素的角色，即此元素对于页面的意义和作用。在ARIA中，元素被划分为了许多角色，每个角色都表示不同的意义和行为。比如，使用role属性可以将一个div元素，即不具备默认的语义，通过指定role属性为button，将它描述为一个按钮元素，进而提供给屏幕阅读器等辅助设备更好的理解和处理。
role属性对应着可见元素的文本干扰较大。因此，我们通常会将role="presentation"应用于装饰性图像、分割线等不需要语义的元素中。
aria-* 属性
由于在某些情况下，元素的role属性无法描述特定的语义和行为，因此ARIA引入了更细粒度的语义属性 -- aria-*属性。这些属性可以用于提供更详细的描述，如title、description、state等。在使用aria-*属性时，需要注意以下几点：
aria-*属性应组合使用，用于描述元素更全面的信息。例如
aria-labelledby和aria-describedby组合使用，可以描述一个控件的标签和描述信息。我们应该谨慎使用aria-*属性，并优先考虑HTML元素和其默认语义。只有当这些属性无法描述页面内容的语义和行为时，才应该考虑使用aria-*属性。例如，当表单标签(input, select, textarea)可以满足我们对于表单元素的需求时，我们应该不使用
aria-*属性。
以下为常用的 aria-*属性：
aria-label
描述元素的可读文本。它提供了一个标识并清晰地概括了元素的名称、目的和使用。
<div class="toggle-password" aria-label="Toggle password visibility"></div>
aria-labelledby
将可读文本与元素相对应，以便在语义化较弱的元素上提供额外的描述。比如，描述一个表格的列标题时，可以使用aria-labelledby属性的值为列元素的ID。
-- -------------------- ---- -------
-------
-------
----
--- -------------------------
--- -----------------------
----------------
-----
--------
-------
----
--- ------------------------------
--- ---------------------------
-----------
-----
--------
--------aria-describedby
该属性用于描述某个元素的额外信息，也可以用于描述可视化地难以展现细节的如图标的含义等。如 错误消息的文本、说明性文本等。该属性的值应该是描述元素所能覆盖的单个或多个ID的集合。
-- -------------------- ---- ------- ---- ------------------ ----------------- --------------------------------- --------------- ----------------- -------- ------ -- -- ----- - ---------- ---- - --- -- ------- --- -------- ------ ------ --------------- ------------- -- --- ------------------------------- ------- --- ---------------------- ---------- --------- --- ----------------------------- ------------ --- ----------------------------- ------------ -----
aria-checked
该属性用于开关形式的控制器上。表示控制器的选中状态。值为：true、false、mixed；mixed是指一个控制器被选择了一部分，另一部分没有。比如：复选框、开关按钮。
<label class="switch"> <input type="checkbox" aria-role="switch" aria-checked="false" /> <span class="slider"></span> </label>
aria-disabled
该属性表示该元素的不可交互状态。若某个元素（如按钮）的该属性设为true，则该元素不能使用。若该属性设为false，则该元素可以使用。
<button type="button" aria-disabled="true">Submit</button>
aria-hidden
该属性用于描述一个不需要被屏幕阅读器阅读的元素，即元素在DOM结构中存在，但其不应该被屏幕阅读器和其他辅助技术捕获。原因可能是它包含冗余的内容，一些图标、装饰性的背景图片等。
<a href="#"title="Logo"> <img src="logo.png" aria-role="icon" aria-hidden="true" alt="" /> </a>
tabindex 属性
该属性规定元素是否需要在 tab 顺序中被激活。比如，当一个选项卡面板处于隐藏状态时，我们可以设置它的tabindex="-1"，这样就可以禁止用户通过连续按 tab 键来访问该面板中的交互元素。该属性的允许值为：1、0、-1，分别表示：元素可获得焦点，以默认顺序获得焦点，元素不能获得焦点。
<div class="tab" tabindex="0"> <h2>Tab 1</h2> <p>Content of tab 1</p> </div> <div class="tab" tabindex="-1"> <h2>Tab 2</h2> <p>Content of tab 2</p> </div>
总结
ARIA属性是无障碍开发中重要的概念。比较常见的之一是role属性和aria-*属性。我们可以使用它们来为残疾人士提供更好的网站体验，更好地理解和使用页面功能。最后，我们重点强调，虽然这些属性提供了许多好的方案，但我们应该优先考虑HTML元素及其默认语义，保证网站的可访问性和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7c13df6b2d6eab3ff4192