画外音在 iOS Safari 上不读取 Aria-label 但屏幕 Reader 在 Chrome 上读取

Question

我有一个播放图标，我希望它在获得焦点时被宣布。但有趣的是，屏幕 reader 读取 aria-label。但是，对于 iOS safari，使用滑动手势播放图标根本不会宣布 aria-label，它只会宣布“link”

这是简化的 HTML 代码：

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

有人知道为什么吗？

Answer 1

首先，我真的不认为 <i> 是正确的选择。该元素适用于 idiomatic text，例如技术术语或特殊术语。这里不是这种情况，而且你的 <i> 不包含任何文本节点。据我所知，它在屏幕上显示为 CSS 图标。 <span> 也可以解决这个问题，但它不会让您更接近预期的（屏幕 reader）结果。

其次，根据this useful reference关于aria-label，<i>不支持aria-label，因为它映射到role="generic"，也就是说不允许命名。几乎所有内联元素都是如此，包括 <span>，但 <a> 是最明显的例外。

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

如果您的播放图标是一个 可操作的 元素（即当您 'click' 它或 'touch' 它时它会执行某些操作）那么您应该使用明确的可操作元素或 ARIA 角色。

这里使用的绝对正确的是 <button>，但是 <a>（或 role="link"）might also be appropriate。如果您决定使用 ARIA 角色，请务必添加 tabindex="0"，因为您不会通过 ARIA 获得选项卡焦点 'for free'。

标记可能如下所示：

<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 class 的规则中指定任何图标背景。

画外音在 iOS Safari 上不读取 Aria-label 但屏幕 Reader 在 Chrome 上读取

Voice Over Does Not Read Aria-label on iOS Safari but Screen Reader Reads on Chrome

html

accessibility

wai-aria

voiceover

screen-readers