如何向屏幕阅读器指示跨度元素?

时间:2019-03-06 18:34:04

标签: html accessibility wai-aria epub

上下文:教育性电子书(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,有时高亮红色可能表示被动语音,或者可能表示名词,等等。

在该网站的其他问题中,我看到不允许跨度(或div)元素使用aria-label。同样使用Chromevox,我发现读者将读取aria标签,而不是aria标签内的文本。 (我无权使用其他屏幕阅读器进行测试。)

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

不可行的选项

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

1 个答案:

答案 0 :(得分:1)

我不会将高亮标记标记为一个区域。这使它们成为地标,用于导航到页面上的不同区域。您拥有的地标越多,它们的用处就越少(因为您必须浏览一堆地标才能到达所需的位置。)

有一篇不错的文章,关于使突出显示和其他编辑符号可在“ Short note on making your mark (more accessible)”上访问

  

不允许在跨度(或div)元素上使用aria-label

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

  
      
  • 除非在其span或div上具有作用,否则请勿在其span或div上使用aria-label或aria-labeledby。
  •   

因此,如果您的<span>或{{1}}具有role that is appropriate,则将读取aria标签。但是不要仅仅为了读取aria标签而分配角色。该角色必须有意义。