上下文:教育电子书(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会出现问题,并在屏幕外的内容后丢失大块文本,因此这不是一个可行的选项。