如何向屏幕阅读器指示 span 元素？

Question

背景：教育电子书 (HTML + CSS) 出版

我有一个作文标题，其中有这样的句子：

<p>This is <del>correct</del> <ins>incorrect</ins></p>

重要的是，用户知道某些文本正在被删除以及某些文本正在被插入。我还有一个相关的场景，其中文本应用了具有语义意义的突出显示。例如：

<p>This is an <span class="highlight-blue">adjective</span> and this is a <span class="highlight-red">noun</span>. </p>

无障碍顾问建议我在这些情况下使用 role="region" + aria-label 。

例如：

<p>This is an <span role="region" aria-label="adjective" class="highlight-blue">adjective</span> and this is a <span role="region" aria-label="noun" class="highlight-red">noun</span>. </p>

这里的灵活性是必要的，因为我们为所有标题使用标准 CSS，有时突出显示的红色可能表示被动语态，或者可能表示名词等。

我在本网站的其他问题中看到不允许在 span （或 div ）元素上使用 aria-label 。同样使用 Chromevox，我发现读者会读取 aria 标签，但不会读取 aria 标签内的文本。（我无法访问其他屏幕阅读器进行测试。）

所以我的问题是：让屏幕阅读器用户读取这些内联元素的语义的最佳方法是什么？

不可行的选择

CSS 隐藏的伪元素。我见过一些解决方案，您可以创建一个伪元素，然后使用 CSS 将其隐藏在屏幕外。当您隐藏屏幕外的内容时，Kindle 会遇到问题，在屏幕外的内容后面丢弃大块文本，因此这不是一个可行的选择。

Answer 1

我不会将突出标记作为一个区域。这使它们成为地标，用于导航到页面上的不同区域。你拥有的地标越多，它们的用处就越小（因为你必须穿过一堆地标才能到达你想要的地方。）。

在“关于制作标记的简短说明（更易于访问） ”上有一篇关于使突出显示和其他编辑符号可访问的好文章

不允许在 span（或 div）元素上使用 aria-label

这不太准确。 是一个全局属性，可以在任何aria-label元素上设置。但是，如果设置在 a或上，则该标签可能会被忽略。请参阅“ 2.10 实际支持：aria-label、aria-labelledby 和 aria-scribedby ”。特别是倒数第三个要点：<div><span>

• 不要在 span 或 div 上使用 aria-label 或 aria-labelledby ，除非指定了角色。

因此，如果您的 <div>或<span>具有合适的角色，则将读取 aria-label 。但不要仅仅为了读取 aria-label 而分配角色。这个角色必须有意义。