我在页眉中有一个装饰元素,用于分隔链接“|“。它将作为CSS内容元素添加:
::after {
content: "|";
.....
}
在HTML中,它与标题链接沿着显示在span中:
<span>
<a ...>
Link
</a>
</span>
在某些屏幕阅读器中,“|“分隔符,我想通过添加“aria-hidden”使其对屏幕阅读器不可见。有没有办法将其添加到CSS文件中?或者有没有其他办法使CSS内容属性对屏幕阅读器不可见?
我看到一个在方括号中添加ARIA属性的示例,如下所示:
::after[aria-hidden] {
content: "|";
.....
}
但是,它会完全移除整个项目的可见性,而不只是针对屏幕朗读程式。
3条答案
按热度按时间qf9go6mv1#
如前所述,您不能通过CSS添加ARIA属性。然而,我通常这样做的方法是有一个单独的
<span>
元素,该元素使用CSScontent
属性,并在<span>
上指定aria-hidden
。yduiuuwa2#
不,这是不可能的。这是CSS生成内容的缺点之一,也是为什么从可访问性的Angular 来看,它是相当不受欢迎的。你不能使用CSS向元素添加HTML属性。如果你想控制ARIA属性,比如aria-hidden,你必须在HTML代码中添加内容。
仅供参考,大多数屏幕阅读器会正常呈现CSS生成的内容,但有些浏览器根本不会。因此,也不建议使用CSS内容来传达重要信息。
请注意,您的命题
::after[aria-hidden]
不会将属性添加到生成的元素中,而是尝试匹配具有该属性的生成元素。由于不可能将任何属性添加到CSS生成的元素中,因此它永远不会匹配任何内容。这没有任何意义,实际上根据CSS规范是无效的。62o28rlo3#
It is not possible. There are two great answer already, I’d like to explore some other options, though.
A solution would be to not use
content
. `CSS selectors
In CSS you can only select an element for styling, you cannot add attributes. Some elements allow to define generated content, for example the
::before
and::after
pseudo-elements.You can select elements based on attributes, for example
[aria-hidden]
.Note that
Pseudo-elements are featureless, and so can’t be matched by any other selector.
so you cannot select a pseudo-element based on its attributes. It has none!
The selector from the example
::after[aria-hidden]
is invalid and will be discarded.You could match an element that has
aria-hidden
and add a pseudo-element to it. Beware though, thataria-hidden
is not a regular boolean attribute, it expects a string true|false.Defining accessible names for generated content
As discussed in the related question How to hide CSS generated content from screen readers without HTML markup? , the CSS standard allows to define alternative text (an accessible name) for generated content.
If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element.
Unfortunately, alternative text for content is not well supported .
Speech module
There is the standard CSS Speech Module which intends to allow control of how contents are announced by screen readers.
This is purely theoretical, though, and would probably only apply to screen readers, not to assistive technology in general. Braille displays would still output the content of the pseudo-element.