在iOS Safari上不读取Aria-label，但在Chrome上屏幕阅读器读取

Question

我有一个play图标，我想在它聚焦时宣布。但有趣的是，屏幕阅读器读取的是aria-label。但是，在iOS safari中，对播放图标使用滑动手势根本不会显示aria-label，而只是显示"链接">

。下面是简化后的HTML代码:

<div class="search-result">
<i class="c-glyph" aria-label="there is video inside"></i>
</div>

有人知道为什么吗?

Answer 1

首先，我不认为<i>是正确的选择。该元素用于惯用文本如技术术语或特殊术语。这里不是这种情况，而且您的<i>不包含文本节点。我收集它出现在屏幕上作为一个CSS图标。<span>也可以处理，但它不会让你更接近你的预期(屏幕阅读器)的结果。

第二，根据这个关于aria-label的有用参考，<i>不支持aria-label，因为它映射到role="generic"，这意味着不允许命名． 几乎所有的内联元素都是如此，包括<span>,<a>是最明显的例外。

因此，如果您的简化代码片段具有代表性，那么这不是一个bug。根据规范，iOS的行为是正确的，而Chrome正在做"错误"的事情。

如果你的播放图标是可操作的元素(即当你"点击"或"触摸"它时它会做一些事情)，那么你应该使用一个显式可操作的元素或ARIA角色。

在这里使用<button>是绝对正确的，但<a>(或role="link")也可能是合适的。如果您决定使用ARIA角色，请确保添加tabindex="0"，因为您不能使用ARIA"免费"获得选项卡焦点。

标记可能看起来像这样:

<a href="#" class="c-glyph" aria-label="there is video inside"></a>

或

<button class="c-glyph" aria-label="there is video inside"></button>

或(使用ARIA角色)

<span role="link" tabindex="0" class="c-glyph" aria-label="there is video inside"></span>

或(其他ARIA角色)

<span role="button" tabindex="0" class="c-glyph" aria-label="there is video inside"></span>

如果你决定使用<button>元素，你可以随心所欲地设计它的样式，但你可能想要从删除用户代理(浏览器)提供的默认按钮样式开始，所以在CSS中你可能有。

button.c-glyph {
background: none; /* css icon will override or replace this */
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}

然后你可以在.c-glyph类的规则中指定任何图标背景。