图标字体可访问性：具有aria标签的父级跨度或仅具有sr的同级跨度

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

  

我有一个图标...不是直接位于交互式元素中

这不是您的代码示例所显示的。

<button>
   <i>
</button>

您的图标肯定包含在一个交互式元素中。当屏幕阅读器用户使用Tab键点击按钮时，全部将包含在元素之间的文本作为按钮的名称。这样您会听到“其他信息，其他信息图标，按钮” 。

您可以在按钮上放一个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更改为匹配项。

您建议在aria-label上放置<span>似乎是正确的选择，但是您不能仅在任何元素上粘贴aria-label（尽管{{1} } 是全局属性），因为元素也需要一个“角色”。请参阅“ Practical Support: aria-label, aria-labelledby and aria-describedby”。

因此，如果您还使用aria-label从屏幕阅读器中“隐藏”图标，那么最后一个解决方案通常是如何处理图标字体。

aria-hidden="true"