图标字体可访问性：具有aria标签的父级跨度或仅具有sr的同级跨度 [英] Icon Font Accessibility: parent span with aria-label or sibling span with sr-only

问题描述

我有一个不是装饰性的图标，并且虽然它在层次结构中有一个交互元素，但它并不直接位于交互元素中。

I have a icon which is not decorative, and it is not directly within an interactive element, though there is an interactive element in the hierarchy.

类似这样的东西：

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

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

This icon displays information about the status of this item.

为了使其更易于访问，是否最好将结构更改为：

To make it more accessible, is it better to change the structure to this:

<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>

推荐答案

我有一个图标

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

That's not what your code example shows.

<button>
   <i>
</button>

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

Your icon is definitely contained within an interactive element. When a screen reader user tabs to the button, all the text contained between the <button> element will be read as the name of the button. So you'll hear "some info other info icon, button".

您可以放入<$按钮上的c $ c> aria-label ，但我不喜欢这样做，因为它会重复文本。

You could put an aria-label on the button but I don't like to do that because it duplicates text.

<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>其他信息< / div> 到< div>其他信息< / div> ，您必须记住要更改 aria-标签进行匹配。

If you happen to change <div>other info</div> to <div>some other info</div>, you'd have to remember to change the aria-label to match.

您的建议是将 aria-label 放在< span> 可能感觉很正确，但是您不能在任何标签上粘贴 aria标签元素（尽管 aria-label 是全局属性），因为该元素也需要一个角色。请参阅 实际支持：aria-label，aria-labelledby和aria- describeby 。

Your suggestion to put an aria-label on the <span> might feel like the right thing to do but you can't stick an aria-label on just any element (although aria-label is a global attribute) because the element needs a "role" as well. See "Practical Support: aria-label, aria-labelledby and aria-describedby".

因此，如果您还使用 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>

这篇关于图标字体可访问性：具有aria标签的父级跨度或仅具有sr的同级跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！