Aria-label 使嵌套内容在屏幕上不可见 reader

Question

我正在向用户显示一些数字信息，使用图形图标标签对其进行描述。我想使用 aria-label 标签使其在屏幕 reader 上可读。但是，当我添加此属性时，它会使嵌套内容对屏幕 readers 不可见。下面是 html 的结构。

<ul>
    <li tabindex="0" aria-label="Counter 1">
        <div>
            <i aria-hidden="true"></i>
            <span class="counter">{{properties.counter1}}</span>
        </div>
    </li>
    <li tabindex="0" aria-label="Counter 2">
        <div>
            <i aria-hidden="true"></i>
            <span>{{properties.counter2}}</span>
        </div>
    </li>
</ul>

我试图使用 aria-describedby 属性，但它不适用于动态创建的 ID。

下面是 chrome 开发工具辅助功能选项卡的屏幕截图。我想知道为什么标签会忽略内容价值。 Screenshot

Answer 1

正确，指定 aria-label or aria-labelledby generates the accessible name for the element rather than having to nest through all the child elements and concatenating text from each child. All child elements will be ignored. You can see more details regarding child elements at https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label。特别是：

When applied to an element with one of the roles that supports naming from child content, aria-label hides descendant content from assistive technology users and replaces it with the value of aria-label.

aria-describedby指定元素的accessible description，与可访问的名称不同

当屏幕 reader 宣布一个元素的名称时，它将首先宣布可访问的名称，可能是任何状态信息（例如选中的复选框或展开的手风琴），然后是可访问的描述。

可访问的名称和描述计算有一个优先列表，可以在 https://www.w3.org/TR/accname-1.1/#step2 中看到。基本上它看起来是按这个顺序的。先找到哪个就用哪个：

aria-labelledby
咏叹调标签
<label>
内部文本（例如<button>和</button>之间或<a>和</a>之间的文本）

请注意，aria-label 和 aria-labelledby 有一些限制。参见 https://www.w3.org/TR/using-aria/#label-support

Aria-label 使嵌套内容在屏幕上不可见 reader

Aria-label makes nested content not visible for screen reader

html

accessibility

wai-aria