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