如何让屏幕阅读器不间断地通过 <span>答案

【问题标题】：How to make a screen-reader go through a <span> without any stopping如何让屏幕阅读器不间断地通过 <span>
【发布时间】：2017-10-27 20:33:48
【问题描述】：

我有这个 span 元素：

<span>Select the <strong>START</strong> <span class="icon-start></span> button.</span>

这只是一行写着“选择开始按钮”的行，在“开始”一词之后带有一个小图标。

目前，Microsoft 讲述人（处于扫描模式）会读取“选择开始”，然后在图标处暂停并等待用户告诉它继续。我正在尝试让讲述人以零中断或需要用户告诉它继续的情况下阅读整行。

到目前为止，这是我尝试过的：

将aria-hidden="true"、tabindex="-1"和role="presentation添加到图标的<span>
将 span 包裹在 <div> 中，并给它 aria-hidden="true"、tabindex="-1" 和 role="presentation
在外部跨度中添加了role="heading" - 这可以使讲述人不间断地阅读所有内容，但他首先宣布“标题级别 1”。如果有办法阻止他说“标题”，那也可以。

是否有角色或 aria 属性告诉屏幕阅读器不停地继续阅读？

【问题讨论】：

你有我可以测试的示例 URL 吗？这与 Edge 和 Windows 10 创意者更新有关吗？它会在您使用图标的其他地方停止吗？您是否在<span> 上仅使用aria-hidden="true" 尝试过（注意tabindex="-1" 应该没有效果，role="presentation" 大部分是多余的）？它在其他屏幕阅读器中的行为是否如此（您的问题标题对 SR 的具体程度较低）？
这里是 URL：https://support.microsoft.com/en-us/help/14238/windows-10-troubleshoot-blue-screen-errors 如果您向下滚动到“您何时收到错误？”然后单击“升级到 Windows 10 时”>“删除软件”。您应该会看到面板中的所有文本都与图标混合在一起。我正在使用 Edge 和典型的 Microsoft 讲述人作为我的屏幕阅读器进行测试。
当我展开“删除软件”时，它宣布控件已经扩展了一些东西，这是我所期望的。在这种模式下，扩展区域应该立即跟随控件，这是确实的。它不应该是一个活动区域，因为这是一个披露小部件。使用 Caps-Lock + Space，您可以进入浏览模式并使用箭头键进入内容。 IOW，我认为这个例子很好用。
对不起，我应该指定的。打开 Caps-Lock + Space，在第二个<p> 的“删除软件”下方有一个带有图标的句子。虽然仍处于扫描模式，但我正在努力让这样的句子一直被阅读。目前，叙述者停在每个图标处。然后在用户按下箭头按钮继续后说“组”。
啊。明白了。不，我不知道有什么方法可以改变它。我觉得这是讲述人中的一个怪癖（不是一个错误）。因此，在不影响其他屏幕阅读器（也有更大的市场份额）的情况下，可能没有程序化的方式来做你想做的事。 ping MS Accessibility 团队？

标签： html accessibility wai-aria narrator

【解决方案1】：

听起来讲述人的行为与 iOS 设备上的旁白类似。如果您有一个包含嵌套元素的元素，即使您想将其视为一个元素，VoiceOver 也经常在每个元素处停止。对于 iOS，您通常可以使用 undocumented role="text" 解决此问题。我不知道它是否也适用于讲述人。

你会有这样的东西：

<span role="text">Select the <strong>START</strong> <span aria-hidden="true" class="icon-start></span> button.</span>

请注意，我还在图标上添加了aria-hidden，这是@garret 明智地推荐的，这样它就不会被阅读。使用 role="text" 时，您可能不需要 aria-hidden，但由于该角色未记录并且技术上不支持，因此您必须对其进行测试。

【讨论】：

【解决方案2】：

听起来屏幕阅读器无法解析您的图标跨度——该跨度应该有aria-hidden=“true”。

请注意，请避免将文本项设为标题，除非它们确实是标题。作为最佳实践，一个可访问的网页应该只有一个 <h1> 元素，该元素基本上用作页面标题。单个<h1> 下方的其他标题应该是<h2>，而这些下方的任何标题都应该是<h3> 等等。所以，如果你要走那条路线，我建议你考虑一下你选择的标题级别.

【讨论】：

不错的建议，@garret，但当你声明事情在 WCAG 中时要小心。 WCAG 1.3.1 通常是用于错误标题的成功标准，但 1.3.1 并没有说你必须只有一个 h1 或一个 h2 必须跟随一个 h1。这当然是个好建议，但如果你不这样做，它不一定会失败 WCAG。对于<span> 上的aria-label，标签通常会被忽略，因为<span> 是一个非语义元素。请参阅w3.org/TR/using-aria/#label-support 上的倒数第三个要点。
注意！我会相应地更新我的评论。谢谢你，@slugolicious！