如何通过 WAI-ARIA 角色属性来实现无障碍

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 角色属性是一种为 HTML 元素添加语义信息的标准。它可以帮助实现网页的无障碍性,让视力、听力或身体上有障碍的用户能够更好地访问网页内容和交互操作,提高网站的可访问性和易用性。本文将介绍 WAI-ARIA 角色属性的基本概念、应用方式以及实现无障碍的指导意义。

WAI-ARIA 角色属性的基本概念

WAI-ARIA 角色属性是为了补充 HTML 语义化标签而设计的,它有三个核心概念:

  1. 角色(role):表示 HTML 元素的作用和功能,如按钮、菜单、表格、提示框等;
  2. 状态(state):表示 HTML 元素当前的状态,如已选中、已展开、已禁用等;
  3. 属性(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 角色属性,我们可以为用户提供更好的访问体验:

  1. 提高可访问性:使用无障碍功能,符合 WCAG 2.0 标准;
  2. 提高可用性:为用户提供更多的交互方式,增加了灵活性;
  3. 提高可维护性和可扩展性:在不改变 HTML 结构和样式的情况下,增添无障碍特征。

示例代码

以下是一个 WAI-ARIA 角色属性应用的示例,实现了一个有序列表,其中每个列表项可以折叠展开。当列表项聚焦时,会出现键盘焦点线标记。

--------- -----
----- ----------
------
  ----- ----------------
  --------------- ---------------
  -------
    ----- -
      ----------- -----
      ------- --
      -------- --
    -

    ----------- -
      --------- ---------
      -------------- -----
      ------------- -------
    -

    ------------------- -
      -------- ---
      -------- ------
      --------- ---------
      ---- -------
      ----- --
      ------ -----
      ------- -------
      -------------- --- ----- -----
      ----------------- ------ -------
      ---------- -------------
      ----------- --------- ---- ---------
    -

    ----------------------------------------- -
      ---------- --------------
    -

    ------------------------- -
      -------- --- ----- -----
    -

    ------------------ -
      ------- --------
    -

    -------------------- -
      ------- --
      -------- --
    -
  --------
-------
------
  --- -------------
    --- ------------------ --------------- ------------ ----------------------
      --- ------------------------- ------------- ---------------------------------------
      --- --------------------------- ------------------ -------
        --------------
        --------------
      -----
    -----
    --- ------------------ --------------- ------------ ----------------------
      --- ------------------------- ------------- ---------------------------------------
      --- --------------------------- ------------------ -------
        --------------
        --------------
      -----
    -----
    --- ------------------ --------------- ------------ ----------------------
      --- ------------------------- ------------- ---------------------------------------
      --- --------------------------- ------------------ -------
        --------------
        --------------
      -----
    -----
  -----
  --------
    ----- --------- - -----------------------------------------
    ------------------------ -- -
      ----- ----- - -----------------------------------------
      ----- --------- - ------------------------------------
      ----- ------- - ----------------------------------------
      ------------------------------- -- -- -
        ----- -------- - ----------------------------------- --- ------ -- ------
        ----------------------------------- -----------
        -------------- - ----------------
      ---
    ---
  ---------
-------
-------

结论

WAI-ARIA 角色属性是一种非常有用而且易于实现的无障碍技术。它可以提高网页的可访问性和易用性,同时也能够增强网页的可维护性和可扩展性。在开发前端应用程序时,不妨考虑加入 WAI-ARIA 角色属性标准,让您的应用程序更加友好和易用。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67287de12e7021665e206d86