Voice Over 在 iOS Safari 上无法读取 Aria 标签，但屏幕阅读器可以在 Chrome 上读取

Question

我有一个播放图标，我想在它聚焦时宣布该图标。但有趣的是，屏幕阅读器会读取

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>

是最明显的例外。

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

如果您的播放图标是一个 operable 元素（即当您“单击”它或“触摸”它时它会执行某些操作），那么您应该使用显式可操作元素或 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

类指定规则中的任何图标背景。

Answer 2

我尝试过这个，但仍然在 ios 上它没有宣布 aria-label。

你能告诉我我该怎么办吗？