html 是否可以为css内容属性添加“aria-hidden”?

dy1byipe  于 2022-12-09  发布在  其他
关注(0)|答案(3)|浏览(244)

我在页眉中有一个装饰元素,用于分隔链接“|“。它将作为CSS内容元素添加:

::after {
    content: "|";
    .....
}

在HTML中,它与标题链接沿着显示在span中:

<span>
    <a ...>
        Link
    </a>
</span>

在某些屏幕阅读器中,“|“分隔符,我想通过添加“aria-hidden”使其对屏幕阅读器不可见。有没有办法将其添加到CSS文件中?或者有没有其他办法使CSS内容属性对屏幕阅读器不可见?
我看到一个在方括号中添加ARIA属性的示例,如下所示:

::after[aria-hidden] {
    content: "|";
    .....
}

但是,它会完全移除整个项目的可见性,而不只是针对屏幕朗读程式。

qf9go6mv

qf9go6mv1#

如前所述,您不能通过CSS添加ARIA属性。然而,我通常这样做的方法是有一个单独的<span>元素,该元素使用CSS content属性,并在<span>上指定aria-hidden

<style>
  .foo::after {content: "|"}
</style>

<a href="...">some link</a>
<span class="foo" aria-hidden="true"></span>
<a href="...">another link</a>
yduiuuwa

yduiuuwa2#

不,这是不可能的。这是CSS生成内容的缺点之一,也是为什么从可访问性的Angular 来看,它是相当不受欢迎的。你不能使用CSS向元素添加HTML属性。如果你想控制ARIA属性,比如aria-hidden,你必须在HTML代码中添加内容。
仅供参考,大多数屏幕阅读器会正常呈现CSS生成的内容,但有些浏览器根本不会。因此,也不建议使用CSS内容来传达重要信息。
请注意,您的命题::after[aria-hidden]不会将属性添加到生成的元素中,而是尝试匹配具有该属性的生成元素。由于不可能将任何属性添加到CSS生成的元素中,因此它永远不会匹配任何内容。这没有任何意义,实际上根据CSS规范是无效的。

62o28rlo

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 . `

a {
  display: inline-block;
}
a::after {
  content: "";
  display: inline-block;
  height: 1em;
  margin-left: .3em;
  border-right: .12em solid black;
}
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>

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, that aria-hidden is not a regular boolean attribute, it expects a string true|false.

[aria-hidden="true"]::after {
  content: …

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.

content: "|" / "";

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.

/* not supported anywhere – yet? */
::after {
  speak: never;
}

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.

相关问题