我有一个案例,我想使用aria-label
让屏幕阅读器访问(CSS伪)内容。类似这样的东西:
[data-pseudo-content]::before {
content: attr(data-pseudo-content);
}
<h1 aria-label="This is the title" data-pseudo-content="This is the title"></h1>
对内容使用aria-label
而不是对内容使用标签是否不好?另外,一些屏幕阅读器会读两遍This is the title
吗?
据我所知,咏叹调标签可以在某些情况下应用,以更改或丰富元素的可访问名称(=将通过语音或盲文输出给用户的文本表示)。aria标签或aria labeledBy对可访问名称的影响程度取决于节点包含的信息量及其类型或角色本身。
你的例子(在Chrome 42和Firefox 36的Windows 8.1上用NVDA确认)对屏幕阅读器来说没有太大区别,因为它将遵循一组规则来确定可访问的名称。根据我的经验,如果其他条件(角色)失败,屏幕阅读器将优先考虑包含的文本。如果节点恰好是空的,并且没有其他替代方案,屏幕读取器将呈现aria labeledBy或aria describedBy作为可访问的名称(如果提供)。否则它将被忽略。
幸运的是,在您的情况下,ARIA标准还涵盖了:before和:after,作为确定可访问名称的算法的一部分。您可以阅读更多关于如何在规范中计算可访问名称的信息:http://www.w3.org/TR/wai-aria/roles#textalternativecomputation
唱段标签或唱段标签什么时候能派上用场?我仍在研究这个问题,所以暂时无法提供100%肯定的答案。然而,我知道它对<input>
这样的元素有影响。当没有可用的可见标签时,您应该应用aria标签。还应该知道,无论何时渲染aria labeledBy,它都将始终放在可访问名称的第一位。这对于表单字段可能很有用,因为如果给定了许多属性,<label>
可能并不总是首先呈现。aria label/aria labelBy在元素上使用contenteditable属性时也很有用,以确保屏幕阅读器可以访问内容。
下面是一个wiki,其中包含了一些如何应用aria label/aria labeledBy的示例(在页面上搜索这些单词):http://www.w3.org/WAI/GL/wiki/Category:ARIA_Techniques
记住:找出什么有效,什么无效的最好方法是和屏幕阅读器一起玩。我有一段时间没能用其他屏幕阅读器(除了NVDA和iOs VoiceOver)进行测试,所以在其他屏幕阅读器上的实现可能会有所不同,比如JAWS。其他已知的屏幕阅读器是WindowsEyes和Supernova(尽管我听说SN不擅长用.focus()代替焦点,所以要小心)。在不同的浏览器中测试可能也是一个好主意,因为API的可访问性可能会有所不同,并给出略有不同的输出。