使屏幕阅读器说出按钮alt属性而不是innerText

Question

是否可以强制屏幕阅读器读取alt属性而不是按钮内的文本？

示例html：<button alt="user menu">DrKawashima</button>

在MacOS中使用内置的辅助功能屏幕阅读器进行测试时，我发现它只说“ DrKawashima”，而从未使用过alt属性。

有没有一种方法可以向屏幕阅读器提示我宁愿说“用户菜单”？

Answer 1

您最好的选择是在<span>中使用带有<button>的样式aria-hidden标记

<button aria-label="screen reader text">
  <span aria-hidden="true">Visual Text</span>
</button>

编辑：如评论所讨论，这不是最佳方法。 作为语音控制用户无法激活此按钮。

andrewmacpherson的答案为此提供了更全面的解决方案。

Answer 2

'alt'在button元素内不是允许的属性。 alt属性适用于area，img和input type =“ image”。进一步了解主题https://www.w3.org/TR/html5/dom.html#translatable-attributes和https://www.w3.org/TR/html5/dom.html#global-attributes-2

Answer 3

是的，有可能-但要注意完全覆盖按钮的可见文本。

tl; dr-我在这里推荐方法4。

您的问题针对的是屏幕阅读器，但是还需要考虑其他类型的辅助技术。特别是有视力的人使用语音控制（例如，Dragon Naturally Speaking）。请注意地址WCAG Success Criterion 2.5.3: Label in Name。

辅助技术处理元素的computed accessible name：

• 屏幕阅读器将读取计算出的可访问名称。请记住，屏幕阅读器的基本目的是阅读屏幕上的内容-注意不要尝试为屏幕阅读器用户提供不同的界面。
  • 当盲人阅读器用户和有视力的人都在谈论同一屏幕时，可能会引起混乱。例如，电话技术支持人员可能会说“单击显示DrKawashima的按钮”。但是，如果此设置被覆盖，则屏幕阅读器会显示该按钮称为“用户菜单”，并且用户无法找到被告知要按下的按钮。
  • 视障人士还使用屏幕阅读器。例如，患有阅读障碍的人可能希望读出一些东西，以使生活更轻松。当计算出的可访问名称与可见文本不同时，屏幕阅读器实际上向用户撒谎了它在屏幕上所说的内容。
• 语音控件将尝试将用户所说的内容与计算出的可访问名称进行匹配。如果按钮具有可见文本，则此文本必须显示在计算得出的元素可访问名称内，这一点很重要。期望语音控制用户可以通过说出可见文本来激活按钮。在您的示例中，说“单击DrKawashima”应激活该按钮。如果计算出的可访问名称是“用户菜单”，则此方法将无效。
  • 有一个解决方法。 Dragon Naturally Speaking提供了一个使用数字突出显示所有按钮的工具：说出“单击按钮” ，查找数字，然后说出“选择2” 。但是，这是一个多步骤的过程，需要用户付出额外的努力。

请注意，计算出的可访问名称和可见文本不必完全匹配。而是，可见文本必须形成可访问名称的 part 。

让我们看一些示例：

1. 您的示例在按钮上具有alt属性根本无法工作，因为按钮没有alt属性。这是无效的HTML： <button alt="user menu">DrKawashima</button>。

   • 可见的文字是“ DrKawashima”
   • 计算出的可访问名称为“ DrKawashima”。 alt属性无效。
   • 这将通过WCAG“名称标签”，因为可见文本和计算出的可访问名称完全相同。
   • 但是，它无法向屏幕阅读器用户通知该按钮的用途；有视力的用户可能可以从随附的图标或头像图像中推断出这一点。

2. aria-label属性可用于完全覆盖按钮内容：<button aria-label="user menu">DrKawashima</button>。

   • 可见的文字是“ DrKawashima”。
   • 计算出的可访问名称为“用户菜单”。 aria-label属性会完全覆盖按钮内容。
   • 此方法使WCAG“名称标签”失败，因为可见文本不属于可访问名称的一部分。语音控制用户无法通过说“单击DrKawashima”来激活按钮。

3. aria-label属性可用于完全覆盖按钮内容，同时复制可见文本：<button aria-label="DrKawashima, User menu">DrKawashima</button>。

   • 可见的文字是“ DrKawashima”。
   • 计算出的可访问名称为“ DrKawashima，用户菜单”。 aria-label属性会完全覆盖按钮内容，但会复制可见的文本。
   • 这将通过WCAG“名称标签”。可以激活该按钮，说出“ Click DrKawashima” ，因为可见文本在计算出的可访问名称内。
   • 这种方法很简单，但是可能很脆弱，因为您必须管理两个字符串。

4. 包括一些视觉上隐藏的文本，以便为屏幕阅读器用户提供其他上下文。例如，使用HTML5Boilerplate的.visuallyhidden类或Bootstrap的.sr-only类： <button>DrKawashima<span class="visuallyhidden">, User menu</span></button>

   • 可见的文字是“ DrKawashima”
   • 计算出的可访问名称为“ DrKawashima，用户菜单”。这是由按钮内容引起的。
   • 这将通过WCAG“名称标签”。可以激活该按钮，说出“ Click DrKawashima” ，因为可见文本在计算出的可访问名称内。
   • 这是最简单的解决方案，非常强大。

5. aria-labelledby属性可以通过引用2个元素ID来构建可访问的名称： <button aria-labelledby="user-menu-visible-label user-menu-suffix"><span id="user-menu-visible-label">DrKawashima</span><span id="user-menu-suffix" class="visuallyhidden">, User menu</span></button>

   • 可见的文字是“ DrKawashima”
   • 计算出的可访问名称为“ DrKawashima，用户菜单”。这是由于将aria-labelledby引用的两个元素进行串联而造成的。
   • 这将通过WCAG“名称标签”。可以激活该按钮，说出“ Click DrKawashima” ，因为可见文本在计算出的可访问名称内。
   • 这很可靠，但是要实现的工作量还多一些，因为您需要管理ID引用。