是否可以强制屏幕阅读器读取alt属性而不是按钮内的文本？
示例html:<button alt="user menu">DrKawashima</button>
在MacOS中使用内置的可访问性屏幕阅读器进行测试时，我发现它只显示"DrKawashima"，并且从未使用alt属性。
有没有办法向屏幕读者暗示，我宁愿让它说"用户菜单"？
是的，这是可能的，但要注意完全覆盖按钮的可见文本。
tl；dr-我在这里推荐第四种方法。
您的问题针对的是屏幕阅读器，但还有其他类型的辅助技术需要考虑。特别是有视力的人使用语音控制(例如Dragon Naturally Speaking)。注意解决WCAG成功标准2.5.3：名义上的标签。
辅助技术处理元素的计算可访问名称：
- 屏幕阅读器将读取计算出的可访问名称。请记住，屏幕阅读器的基本目的是阅读屏幕上的内容-小心试图向屏幕阅读器用户呈现不同的界面。
- 当盲人屏幕阅读器用户和有视力的人都在谈论同一个屏幕时，可能会出现困惑。例如，电话技术支持人员可能会说"点击上面写着川岛博士的按钮"。但如果这被覆盖，屏幕阅读器会说这个按钮被称为"用户菜单"，用户找不到他们被告知要按下的按钮
- 有视力的人也使用屏幕阅读器。例如，有阅读障碍的人可能喜欢读一些东西，让生活更轻松。当计算出的可访问名称与可见文本不同时，屏幕阅读器实际上是在向用户谎报屏幕上的内容
- 语音控制将尝试将用户所说的内容与计算出的可访问名称相匹配。如果按钮有可见的文本，那么该文本显示在元素的计算可访问名称内是很重要的。期望语音控制用户可以通过说出可见文本来激活按钮。在你的例子中，说"点击DrKawashima"应该会激活按钮。如果计算出的可访问名称为"用户菜单"，这将不起作用。
- 有一个解决办法。Dragon Naturally Speaking有一个工具可以使用数字突出显示所有按钮：说"点击按钮">，查找数字，然后说"选择2">。然而，这是一个多步骤的过程，需要用户付出额外的努力
请注意，计算出的可访问名称和可见文本不必完全匹配。相反，可见文本必须形成可访问名称的部分。
让我们看一些例子：
-
按钮上有alt属性的示例根本不起作用，因为按钮没有alt属性。这不是有效的HTML:CCD_ 2。
- 可见文本为"DrKawashima">
- 计算出的可访问名称为"DrKawashima"。
alt属性没有影响 - 这会传递WCAG"名称中的标签"，因为可见文本和计算出的可访问名称完全相同
- 然而，它无法通知屏幕阅读器用户按钮的用途；有视力的用户可能可以从伴随的图标或化身图像推断出这一点
-
aria-label属性可用于完全覆盖按钮内容：<button aria-label="user menu">DrKawashima</button>。- 可见文本为"DrKawashima">
- 计算出的可访问名称为"用户菜单"。
aria-label属性完全覆盖按钮内容 - 这种方法无法通过WCAG"名称中的标签"，因为可见文本不构成可访问名称的一部分。语音控制用户无法通过说"点击川岛博士"来激活按钮
-
aria-label属性可用于完全覆盖按钮内容，同时复制可见文本：<button aria-label="DrKawashima, User menu">DrKawashima</button>。- 可见文本为"DrKawashima">
- 计算出的可访问名称为"DrKawashima，User menu"。
aria-label属性完全覆盖按钮内容，但它复制可见文本 - 这将通过WCAG"名义上的标签"。按钮可以被激活，表示"点击DrKawashima">，因为可见文本位于计算的可访问名称内
- 这种方法很简单，但可能很脆弱，因为您必须管理两个字符串
-
包括一些视觉上隐藏的文本，为屏幕阅读器用户提供一些额外的上下文。例如，使用HTML5Boileplate的
.visuallyhidden类或Bootstrap的.sr-only类：<button>DrKawashima<span class="visuallyhidden">, User menu</span></button>- 可见文本为"DrKawashima">
- 计算出的可访问名称为"DrKawashima，User menu"。这是按钮内容的结果
- 这将通过WCAG"名义上的标签"。按钮可以被激活，表示"点击DrKawashima">，因为可见文本位于计算的可访问名称内
- 这是最简单的解决方案，非常健壮
-
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，User menu"。这是由CCD_ 15引用的两个元素串联而成的
- 这将通过WCAG"名义上的标签"。按钮可以被激活，表示"点击DrKawashima">，因为可见文本位于计算的可访问名称内
- 这是健壮的，但由于您需要管理ID引用，因此需要执行更多的工作
'alt'不是按钮元素中允许的属性。alt属性适用于area、img和inputtype="image"。查看有关该主题的更多信息https://www.w3.org/TR/html5/dom.html#translatable-属性和https://www.w3.org/TR/html5/dom.html#global-属性-2
您的最佳选择是在带有aria-hidden的<button>中使用样式化的<span>标记
<button aria-label="screen reader text">
<span aria-hidden="true">Visual Text</span>
</button>编辑：正如评论中所讨论的，这不是最好的方法。作为语音控制，用户无法激活此按钮。
andrewmacpherson的回答提供了一个更具包容性的解决方案。