如何向屏幕阅读器指示 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-label 而不是 aria 标签内的文本。 （我无权使用其他屏幕阅读器进行测试。）

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

不可行的选择

带有 CSS 隐藏的伪元素。我已经看到了一些解决方案，您可以创建一个伪元素，然后使用 CSS 将其隐藏在屏幕外。当您在屏幕外隐藏内容时，Kindle 会遇到问题，在屏幕外内容之后放置大块文本，因此这不是一个可行的选择。

Answer 1

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

“Short note on making your mark (more accessible)”上有一篇关于制作高亮和其他编辑符号的好文章

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

这不太准确。 aria-label 是一个全局属性，可以在 any 元素上设置。但是，如果在 <div> 或 <span> 上设置标签，则可能会被忽略。请参阅“2.10 Practical Support: aria-label, aria-labelledby and aria-describedby”。特别是倒数第三个要点：

• 不要在 span 或 div 上使用 aria-label 或 aria-labelledby，除非它被赋予了角色。

因此，如果您的 <div> 或 <span> 具有 role that is appropriate，则将读取 aria-label。但不要分配角色只是为了读取 aria-label。这个角色必须有意义。