让屏幕阅读器说出按钮 alt-attribute 而不是 innerText
Make screenreader say button alt-attribute instead of innerText
是否可以强制屏幕-reader 读取 alt 属性而不是按钮内的文本？
示例 html：<button alt="user menu">DrKawashima</button>
在 MacOS 中使用内置辅助功能屏幕-reader 进行测试时，我发现它只说 "DrKawashima"，而从未使用过 alt 属性。
有没有一种方法可以提示 screen-reader 我宁愿让它说 "user menu"？
最好的办法是在 <button> 和 aria-hidden
中使用带样式的 <span> 标签
<button aria-label="screen reader text">
<span aria-hidden="true">Visual Text</span>
</button>
编辑：如评论中所述，这不是最佳方法。
作为语音控制用户不能激活此按钮。
andrewmacpherson 的回答为此提供了更具包容性的解决方案。
'alt' 不是按钮元素中允许的属性。 alt 属性适用于 area、img 和 input type="image"。查看有关主题 https://www.w3.org/TR/html5/dom.html#translatable-attributes and https://www.w3.org/TR/html5/dom.html#global-attributes-2
的更多信息
是的，这是可能的 - 但要注意不要完全覆盖按钮的可见文本。
tl;dr - 我在这里推荐方法 4。
您的问题涉及屏幕 readers，但还需要考虑其他类型的辅助技术。特别是有视力的人使用语音控制（例如 Dragon Naturally Speaking）。注意地址 WCAG Success Criterion 2.5.3: Label in Name.
辅助技术处理元素的computed accessible name：
- Screen readers 将读取计算出的可访问名称。请记住，屏幕 reader 的基本目的是 阅读屏幕上的内容 - 谨防试图向屏幕 reader 用户呈现不同的界面。
- 当盲人屏幕 reader 用户和视力正常的人都在谈论同一个屏幕时，可能会产生混淆。例如，电话技术支持人员可能会说 "Click on the button which says DrKawashima"。但如果这被覆盖，屏幕 reader 会显示该按钮名为 "User menu"，并且用户无法找到他们被告知要按下的按钮。
- 有视力的人也使用屏幕 readers。例如，有阅读障碍的人可能喜欢朗读一些东西以使生活更轻松。当计算出的可访问名称与可见文本不同时，屏幕 reader 实际上是在向用户撒谎。
- 语音控制将尝试将用户所说的内容与计算出的可访问名称相匹配。如果一个按钮有可见的文本，那么这个文本出现在元素的计算可访问名称中是很重要的。期望语音控制用户可以通过说出可见文本来激活按钮。在您的示例中，说 "Click DrKawashima" 应该激活按钮。如果计算出的可访问名称是 "User menu"，这将不起作用。
- 有一个解决方法。 Dragon Naturally Speaking 有一个工具可以使用数字突出显示所有按钮：说 "Click button"，查找数字，然后说 "Choose 2".然而，这是一个多步骤过程，需要用户付出额外的努力。
请注意，计算出的可访问名称和可见文本不必完全匹配。相反，可见文本必须构成可访问名称的 部分 。
让我们看一些例子：
您在按钮上使用 alt 属性的示例根本行不通，因为按钮没有 alt 属性。这无效 HTML：
<button alt="user menu">DrKawashima</button>.
- 可见文字为"DrKawashima"
- 计算出的可访问名称是"DrKawashima"。
alt 属性无效。
- 这通过了 WCAG "Label in name"，因为可见文本和计算出的可访问名称完全相同。
- 但是它无法通知屏幕 reader 用户按钮的用途；有视力的用户可能可以从随附的图标或头像图像中推断出这一点。
aria-label 属性可用于完全覆盖按钮内容：<button aria-label="user menu">DrKawashima</button>.
- 可见文本为"DrKawashima"。
- 计算出的可访问名称是"User menu"。
aria-label 属性完全覆盖按钮内容。
- 此方法未通过 WCAG "Label in name"，因为可见文本不构成可访问名称的一部分。语音控制用户无法通过说 "Click DrKawashima".
来激活按钮
aria-label 属性可用于完全覆盖按钮内容，同时复制可见文本：<button aria-label="DrKawashima, User menu">DrKawashima</button>.
- 可见文本为"DrKawashima"。
- 计算出的可访问名称是"DrKawashima, User menu"。
aria-label 属性完全覆盖了按钮内容，但它复制了可见文本。
- 这通过了 WCAG "Label in name"。可以激活按钮说 "Click DrKawashima" 因为可见文本在计算的可访问名称中。
- 这种方法很简单，但可能很脆弱，因为您必须管理两个字符串。
包括一些视觉上隐藏的文本，为屏幕 reader 用户提供一些额外的上下文。例如，使用 HTML5Boilerplate 的 .visuallyhidden class 或 Bootstrap 的 .sr-only class：
<button>DrKawashima<span class="visuallyhidden">, User menu</span></button>
- 可见文字为"DrKawashima"
- 计算出的可访问名称是"DrKawashima, User menu"。这是按钮内容的结果。
- 这通过了 WCAG "Label in name"。可以激活按钮说 "Click 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"。这是连接
aria-labelledby. 引用的两个元素的结果
- 这通过了 WCAG "Label in name"。可以激活按钮说 "Click DrKawashima" 因为可见文本在计算的可访问名称中。
- 这很可靠，但实施起来要多一些工作，因为您需要管理 ID 引用。
是否可以强制屏幕-reader 读取 alt 属性而不是按钮内的文本？
示例 html：<button alt="user menu">DrKawashima</button>
在 MacOS 中使用内置辅助功能屏幕-reader 进行测试时，我发现它只说 "DrKawashima"，而从未使用过 alt 属性。
有没有一种方法可以提示 screen-reader 我宁愿让它说 "user menu"？
最好的办法是在 <button> 和 aria-hidden
<span> 标签
<button aria-label="screen reader text">
<span aria-hidden="true">Visual Text</span>
</button>
编辑：如评论中所述，这不是最佳方法。 作为语音控制用户不能激活此按钮。
andrewmacpherson 的回答为此提供了更具包容性的解决方案。
'alt' 不是按钮元素中允许的属性。 alt 属性适用于 area、img 和 input type="image"。查看有关主题 https://www.w3.org/TR/html5/dom.html#translatable-attributes and https://www.w3.org/TR/html5/dom.html#global-attributes-2
的更多信息是的，这是可能的 - 但要注意不要完全覆盖按钮的可见文本。
tl;dr - 我在这里推荐方法 4。
您的问题涉及屏幕 readers，但还需要考虑其他类型的辅助技术。特别是有视力的人使用语音控制（例如 Dragon Naturally Speaking）。注意地址 WCAG Success Criterion 2.5.3: Label in Name.
辅助技术处理元素的computed accessible name：
- Screen readers 将读取计算出的可访问名称。请记住，屏幕 reader 的基本目的是 阅读屏幕上的内容 - 谨防试图向屏幕 reader 用户呈现不同的界面。
- 当盲人屏幕 reader 用户和视力正常的人都在谈论同一个屏幕时，可能会产生混淆。例如，电话技术支持人员可能会说 "Click on the button which says DrKawashima"。但如果这被覆盖，屏幕 reader 会显示该按钮名为 "User menu"，并且用户无法找到他们被告知要按下的按钮。
- 有视力的人也使用屏幕 readers。例如，有阅读障碍的人可能喜欢朗读一些东西以使生活更轻松。当计算出的可访问名称与可见文本不同时，屏幕 reader 实际上是在向用户撒谎。
- 语音控制将尝试将用户所说的内容与计算出的可访问名称相匹配。如果一个按钮有可见的文本，那么这个文本出现在元素的计算可访问名称中是很重要的。期望语音控制用户可以通过说出可见文本来激活按钮。在您的示例中，说 "Click DrKawashima" 应该激活按钮。如果计算出的可访问名称是 "User menu"，这将不起作用。
- 有一个解决方法。 Dragon Naturally Speaking 有一个工具可以使用数字突出显示所有按钮：说 "Click button"，查找数字，然后说 "Choose 2".然而，这是一个多步骤过程，需要用户付出额外的努力。
请注意，计算出的可访问名称和可见文本不必完全匹配。相反，可见文本必须构成可访问名称的 部分 。
让我们看一些例子：
您在按钮上使用 alt 属性的示例根本行不通，因为按钮没有 alt 属性。这无效 HTML：
<button alt="user menu">DrKawashima</button>.- 可见文字为"DrKawashima"
- 计算出的可访问名称是"DrKawashima"。
alt属性无效。 - 这通过了 WCAG "Label in name"，因为可见文本和计算出的可访问名称完全相同。
- 但是它无法通知屏幕 reader 用户按钮的用途；有视力的用户可能可以从随附的图标或头像图像中推断出这一点。
aria-label属性可用于完全覆盖按钮内容：<button aria-label="user menu">DrKawashima</button>.- 可见文本为"DrKawashima"。
- 计算出的可访问名称是"User menu"。
aria-label属性完全覆盖按钮内容。 - 此方法未通过 WCAG "Label in name"，因为可见文本不构成可访问名称的一部分。语音控制用户无法通过说 "Click DrKawashima". 来激活按钮
aria-label属性可用于完全覆盖按钮内容，同时复制可见文本：<button aria-label="DrKawashima, User menu">DrKawashima</button>.- 可见文本为"DrKawashima"。
- 计算出的可访问名称是"DrKawashima, User menu"。
aria-label属性完全覆盖了按钮内容，但它复制了可见文本。 - 这通过了 WCAG "Label in name"。可以激活按钮说 "Click DrKawashima" 因为可见文本在计算的可访问名称中。
- 这种方法很简单，但可能很脆弱，因为您必须管理两个字符串。
包括一些视觉上隐藏的文本，为屏幕 reader 用户提供一些额外的上下文。例如，使用 HTML5Boilerplate 的
.visuallyhiddenclass 或 Bootstrap 的.sr-onlyclass：<button>DrKawashima<span class="visuallyhidden">, User menu</span></button>- 可见文字为"DrKawashima"
- 计算出的可访问名称是"DrKawashima, User menu"。这是按钮内容的结果。
- 这通过了 WCAG "Label in name"。可以激活按钮说 "Click 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"。这是连接
aria-labelledby. 引用的两个元素的结果
- 这通过了 WCAG "Label in name"。可以激活按钮说 "Click DrKawashima" 因为可见文本在计算的可访问名称中。
- 这很可靠，但实施起来要多一些工作，因为您需要管理 ID 引用。