WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 角色属性是一种为 HTML 元素添加语义信息的标准。它可以帮助实现网页的无障碍性,让视力、听力或身体上有障碍的用户能够更好地访问网页内容和交互操作,提高网站的可访问性和易用性。本文将介绍 WAI-ARIA 角色属性的基本概念、应用方式以及实现无障碍的指导意义。
WAI-ARIA 角色属性的基本概念
WAI-ARIA 角色属性是为了补充 HTML 语义化标签而设计的,它有三个核心概念:
- 角色(role):表示 HTML 元素的作用和功能,如按钮、菜单、表格、提示框等;
- 状态(state):表示 HTML 元素当前的状态,如已选中、已展开、已禁用等;
- 属性(property):表示 HTML 元素的其他属性,如标题、描述、值等。
通常情况下,WAI-ARIA 角色属性是与 HTML 元素的 class 属性结合使用,例如:
------- ----------- ------------- -------------------- ---------------------------
- class="btn":为按钮元素添加基础样式
- role="button":明确该元素的角色为按钮类型
- aria-disabled="true":设置按钮不可用状态
- aria-label="提交":给按钮添加描述标签,方便屏幕阅读器用户理解它的作用
WAI-ARIA 角色属性的应用方式
一般来说,WAI-ARIA 角色属性要在 HTML 元素的最外层标签中进行设置。根据需要,还可以设置其他的状态和属性,如下所示:
---- -------------- ------------- ------------------------------ ----------------- -------------- --- ------------------------------ ----------------- ------- ----------- ------------- ----------------------------- ------
- role="dialog":将 div 元素标记为对话框
- aria-labelledby="dialog-title":设置对话框的标题,id 为 "dialog-title" 的元素
- aria-modal="true":设置对话框为模态框,即阻止后面的内容交互
- tabindex="-1":设置 div 元素为可聚焦元素,使其能够响应键盘焦点
WAI-ARIA 角色属性的指导意义
通过使用 WAI-ARIA 角色属性,我们可以为用户提供更好的访问体验:
- 提高可访问性:使用无障碍功能,符合 WCAG 2.0 标准;
- 提高可用性:为用户提供更多的交互方式,增加了灵活性;
- 提高可维护性和可扩展性:在不改变 HTML 结构和样式的情况下,增添无障碍特征。
示例代码
以下是一个 WAI-ARIA 角色属性应用的示例,实现了一个有序列表,其中每个列表项可以折叠展开。当列表项聚焦时,会出现键盘焦点线标记。
--------- ----- ----- ---------- ------ ----- ---------------- --------------- --------------- ------- ----- - ----------- ----- ------- -- -------- -- - ----------- - --------- --------- -------------- ----- ------------- ------- - ------------------- - -------- --- -------- ------ --------- --------- ---- ------- ----- -- ------ ----- ------- ------- -------------- --- ----- ----- ----------------- ------ ------- ---------- ------------- ----------- --------- ---- --------- - ----------------------------------------- - ---------- -------------- - ------------------------- - -------- --- ----- ----- - ------------------ - ------- -------- - -------------------- - ------- -- -------- -- - -------- ------- ------ --- ------------- --- ------------------ --------------- ------------ ---------------------- --- ------------------------- ------------- --------------------------------------- --- --------------------------- ------------------ ------- -------------- -------------- ----- ----- --- ------------------ --------------- ------------ ---------------------- --- ------------------------- ------------- --------------------------------------- --- --------------------------- ------------------ ------- -------------- -------------- ----- ----- --- ------------------ --------------- ------------ ---------------------- --- ------------------------- ------------- --------------------------------------- --- --------------------------- ------------------ ------- -------------- -------------- ----- ----- ----- -------- ----- --------- - ----------------------------------------- ------------------------ -- - ----- ----- - ----------------------------------------- ----- --------- - ------------------------------------ ----- ------- - ---------------------------------------- ------------------------------- -- -- - ----- -------- - ----------------------------------- --- ------ -- ------ ----------------------------------- ----------- -------------- - ---------------- --- --- --------- ------- -------
结论
WAI-ARIA 角色属性是一种非常有用而且易于实现的无障碍技术。它可以提高网页的可访问性和易用性,同时也能够增强网页的可维护性和可扩展性。在开发前端应用程序时,不妨考虑加入 WAI-ARIA 角色属性标准,让您的应用程序更加友好和易用。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67287de12e7021665e206d86