背景：教育电子书 (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 会遇到问题，在屏幕外的内容后面丢弃大块文本，因此这不是一个可行的选择。