如何告诉屏幕阅读器一个 span 元素？

Question

如何告诉屏幕阅读器一个 span 元素？

5

上下文：教育电子书（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 label内部的文本。（我没有其他屏幕阅读器可供测试。）

所以我的问题是：如何最好地将这些内联元素的语义含义传达给屏幕阅读器用户？

无法使用的选项

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

- thern

如果这些是要突出显示的内容，那么你为什么不使用语义化的HTML标签，比如<em>？ - Andy

你不能为每个人提供那个含义吗？而不仅仅是屏幕阅读器用户？比如“屏幕阅读器”（一个名词）和“语义化”（一个形容词）元素。这将符合G112的要求。 - Andy

我并不完全掌控内容，但最终使用括号解决方案会是理想的。 - thern

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slugolicious · Accepted Answer

我不会将高亮标记作为区域。这使它们成为地标，用于导航到页面上的不同区域。您拥有的地标越多，它们就越不实用（因为您必须浏览一堆地标才能到达目的地）。

有一篇关于使高亮和其他编辑符号易于访问的好文章在 "Short note on making your mark (more accessible)"

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

这并不完全准确。aria-label 是一个全局属性，可以设置在任何元素上。但是，如果在<div>或<span>上设置，则可能会忽略该标签。请参见“ 2.10实用支持：aria-label、aria-labelledby和aria-describedby”，尤其是倒数第三个项目：

除非为其指定了一个角色，否则不要在span或div上使用aria-label或aria-labelledby。

因此，如果您的<div>或<span>具有合适的角色, 那么aria-label将被读取。但是，不要分配角色只是为了阅读aria-label。该角色必须有意义。