ARIA: aria-current 属性

描述

当您有一组相关的元素，例如面包屑中的多个链接或多步流程中的多个步骤，其中一组中的一个元素与其他元素样式不同，以向视力正常的用户指示这是其组内的当前元素时，应使用 aria-current 来告知辅助技术用户通过样式所指示的内容。

在面包屑列表中，当一组分页链接中的一个链接样式设置为指示用户当前所在的页面时，该链接上应设置 aria-current="page"。在具有步骤指示器的多步流程中，例如多页调查或多步结账或注册过程，当当前步骤图标在视觉上有所不同以表示它是当前步骤时，该图标的容器应为辅助技术用户（可能无法“看到”视觉差异）设置 aria-current="step"。

aria-current 属性指示设置该属性的元素，其值不为 false，代表容器或相关元素集合中的当前项。在元素集合中，只能使用 aria-current 标记一个元素为当前项。

aria-current 属性接受一个有限的值列表，包括 page、step、location、date、time、true 和 false。此枚举值列表中未包含的任何非空字符串值将被视为设置了 aria-current="true"，而不是默认的 false 值。如果属性不存在、为空字符串、存在但没有值，或设置为 aria-current="false"，则不会向用户公开。

当某个项目被选中而不是当前项时，例如在 tablist 中的 tab，请使用 aria-selected 来指示当前显示的 tabpanel。

注意：不要将 aria-current 用作 aria-selected 在 gridcell、option、row 或 tab 中的替代品。

示例

“当前页”的面包屑应该设置 aria-current="page"。

html

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../../../../">Web technology for developers</a>
    </li>
    <li>
      <a href="../../../../">Accessibility</a>
    </li>
    <li>
      <a href="../../../">ARIA</a>
    </li>
    <li>
      <a href="../../">ARIA States and Properties</a>
    </li>
    <li>
      <a href="./" aria-current="page">ARIA: `aria-current` attribute</a>
    </li>
  </ol>
</nav>

如果面包屑中代表当前页的元素不是链接，则 aria-current 是可选的。