[英]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. 我有一个非装饰性的图标,虽然在层次结构中有一个交互元素,但它不是直接在交互元素中。
Something like this: 像这样的东西:
<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>
OR this: 或这个:
<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>
I have a icon which is...not directly within an interactive element
我有一个图标......不是直接在交互元素中
That's not what your code example shows. 这不是您的代码示例所显示的内容。
<button>
<i>
</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.
当屏幕阅读器用户选中该按钮时,<button>元素之间包含的所有文本都将被读作按钮的名称。 So you'll hear "some info other info icon, button" .
所以你会听到“一些信息其他信息图标,按钮” 。
You could put an aria-label
on the button but I don't like to do that because it duplicates text. 您可以在按钮上放置一个
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>
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. 如果您碰巧将
<div>other info</div>
更改为<div>other info</div>
<div>some other info</div>
,则必须记住更改aria-label
以匹配。
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. 你在
<span>
上添加aria-label
建议可能会让你觉得正确,但是你不能在任何元素上aria-label
(尽管aria-label
是一个全局属性)因为元素需要一个“角色”也是如此。 See " Practical Support: aria-label, aria-labelledby and aria-describedby ". 参见“ 实用支持:aria-label,aria-labelledby和aria-describedby ”。
So your last solution is typically how icon fonts are handled, provided you also "hide" the icon from the screen reader with aria-hidden="true"
. 所以你的最后一个解决方案通常是如何处理图标字体,前提是你还用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.