图标字体辅助功能：带有 aria-label 的父跨度或带有 sr-only 的同级跨度

Question

我有一个图标，它不是装饰性的，它不直接在交互元素中，尽管在层次结构中有一个交互元素。

像这样：

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
</button>

此图标显示有关此项目状态的信息。

为了更方便，把结构改成这样是不是更好：

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <span aria-label="the actual status">/
     <i class="material-icons"> icon </i>
    </span>
</button>

或者这样：

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
    <span class="sr-only"> the actual status </span>
</button>

Answer 1

I have a icon which is...not directly within an interactive element

这不是您的代码示例显示的内容。

<button>
   <i>
</button>

您的图标绝对包含在交互元素中。当屏幕 reader 用户点击按钮时，all 元素之间包含的文本将被读取为按钮的名称。所以你会听到 "some info other info icon, button".

您可以在按钮上放置一个aria-label，但我不喜欢这样做，因为它会重复文本。

<button type="button" aria-label="some info other info actual status">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
</button>

如果您碰巧将 <div>other info</div> 更改为 <div>some other info</div>，您必须记住更改 aria-label 以匹配。

您建议在 <span> 上放置 aria-label 可能感觉是正确的做法，但您不能在任何元素上放置 aria-label（尽管 aria-label 是 全局属性）因为该元素也需要 "role"。参见“Practical Support: aria-label, aria-labelledby and aria-describedby”。

所以你最后的解决方案通常是如何处理图标字体，前提是你还 "hide" 屏幕上的图标 reader 和 aria-hidden="true"。

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons" aria-hidden="true"> icon </i>
    <span class="sr-only"> the actual status </span>
</button>