让屏幕阅读器说出按钮 alt 属性而不是 insideText

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

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

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

有没有办法向屏幕阅读器暗示我宁愿让它说“用户菜单”？

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

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

您的问题涉及屏幕阅读器，但还有其他类型的辅助技术需要考虑。特别是使用语音控制的视力正常的人（例如“龙自然说话”）。注意地址WCAG 成功标准 2.5.3：名称中的标签 https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html.

辅助技术涉及计算出的可访问名称 https://www.w3.org/TR/accname-1.1/一个元素的：

• Screen readers will read the computed accessible name. Remember that the basic purpose of of a screen reader is to read what's on the screen - beware of trying to present a different interface to screen reader users.
  • 当盲人屏幕阅读器用户和视力正常的人都在谈论同一个屏幕时，可能会出现混乱。例如，电话技术支持人员可能会说“单击显示 DrKawashima 的按钮”。但如果这被覆盖，屏幕阅读器会说该按钮称为“用户菜单”，并且用户无法找到他们被告知要按下的按钮。
  • 有视力的人也使用屏幕阅读器。例如，患有阅读障碍的人可能喜欢朗读内容以使生活更轻松。当计算出的可访问名称与可见文本不同时，屏幕阅读器实际上就屏幕上显示的内容向用户撒谎。
• Speech control will try to match what a user says, to the computed accessible name. If a button has visible text, it's important that this text appears inside the computed accessible name of the element. The expectation is that a speech control user can activate a button by saying the visible text. In your example, saying "Click DrKawashima" should activate the button. This won't work if the computed accessible name is "User menu".
  • 有一个解决方法。 Dragon Naturally Talking 有一个工具可以使用数字突出显示所有按钮：比如说“点击按钮”，查找号码，然后说“选择2”。然而，这是一个多步骤的过程，需要用户付出额外的努力。

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

让我们看一些例子：

1. 您的按钮上带有 alt 属性的示例根本不起作用，因为按钮没有 alt 属性。这不是有效的 HTML：<button alt="user menu">DrKawashima</button>.

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

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

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

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

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

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

   • 可见文字是“DrKawashima”
   • 计算出的可访问名称是“DrKawashima，用户菜单”。这是由按钮内容产生的。
   • 这通过了 WCAG“名称标签”。该按钮可以被激活说“点击川岛博士”因为可见文本位于计算的可访问名称内。
   • 这是最简单的解决方案，非常稳健。

5. The 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“名称标签”。该按钮可以被激活说“点击川岛博士”因为可见文本位于计算的可访问名称内。
   • 这很强大，但实施起来需要更多工作，因为您需要管理 ID 引用。