Aria-label 使嵌套内容对屏幕阅读器不可见

Question

我通过使用图形图标 label 向描述它的用户显示一些数字信息。 我想让屏幕阅读器使用aria-label标签使其可读。 但是，当我添加此属性时，它会使嵌套内容对屏幕阅读器不可见。 下面是 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 开发工具辅助功能选项卡的屏幕截图。 我想知道为什么标签会省略内容值。 截屏

Answer 1

没错，指定aria-label或aria-labelledby会为元素生成可访问的名称，而不必嵌套所有子元素并连接每个子元素的文本。 所有子元素都将被忽略。 您可以在https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label查看有关子元素的更多详细信息。 尤其是：

当应用于具有支持从子内容命名的角色之一的元素时，aria-label 会对辅助技术用户隐藏后代内容，并将其替换为 aria-label 的值。

aria-describedby指定元素的可访问描述，与可访问名称不同。

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

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

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

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