是否可以强制屏幕阅读器阅读 alt 属性而不是按钮内的文本？
示例html：<button alt="user menu">DrKawashima</button>
在 MacOS 中使用内置的辅助功能屏幕阅读器进行测试时，我发现它只显示“DrKawashima”，并且从未使用过 alt 属性。
有没有办法向屏幕阅读器提示我宁愿让它说“用户菜单”？
【问题讨论】：
标签： accessibility screen-readers
最好的办法是在<button> 和aria-hidden 中使用样式化的<span> 标签
<button aria-label="screen reader text">
<span aria-hidden="true">Visual Text</span>
</button>编辑：正如评论中所讨论的，这不是最好的方法。 作为语音控制用户无法激活此按钮。
andrewmacpherson 的回答为此提供了一个更具包容性的解决方案。
【讨论】：
aria-label 完全覆盖了按钮内容。
aria-hidden是一个红鲱鱼。无论嵌套跨度上是否存在aria-hidden 属性，计算出的按钮的可访问名称都是“屏幕阅读器文本”。
是的，这是可能的 - 但要小心完全覆盖按钮的可见文本。
tl;dr - 我在这里推荐方法 4。
您的问题涉及屏幕阅读器，但还有其他类型的辅助技术需要考虑。特别是使用语音控制的视力正常的人（例如 Dragon Naturally speak）。注意地址WCAG Success Criterion 2.5.3: Label in Name。
辅助技术处理元素的computed accessible name：
请注意，计算出的可访问名称和可见文本不必完全匹配。相反，可见文本必须构成可访问名称的部分。
让我们看一些例子：
按钮上带有 alt 属性的示例根本不起作用，因为按钮没有 alt 属性。这不是有效的 HTML：
<button alt="user menu">DrKawashima</button>.
alt 属性无效。aria-label 属性可用于完全覆盖按钮内容：<button aria-label="user menu">DrKawashima</button>。
aria-label 属性完全覆盖按钮内容。aria-label 属性可用于完全覆盖按钮内容，同时复制可见文本：<button aria-label="DrKawashima, User menu">DrKawashima</button>。
aria-label 属性完全覆盖按钮内容，但它复制了可见文本。包括一些视觉上隐藏的文本，为屏幕阅读器用户提供一些额外的上下文。例如，使用 HTML5Boilerplate 的 .visuallyhidden 类，或 Bootstrap 的 .sr-only 类：
<button>DrKawashima<span class="visuallyhidden">, User menu</span></button>
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>
aria-labelledby 引用的两个元素连接起来的结果。【讨论】：
'alt' 不是按钮元素中允许的属性。 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
【讨论】：