我可以在同一个元素上使用 aria-label 和 aria-hidden="true" 吗？

Question

如问题所述，我可以在同一个元素上使用 aria-label 和 aria-hidden="true" 吗？

我想要实现的是让一个元素（<span> 中的打开图标）带有 aria-label 但忽略其内容。

<span class="oi" data-glyph="star" aria-label="Favourite" aria-hidden="true"></span>

这种用法是否正确，或者 aria-hidden 试图忽略元素和 aria-label 试图赋予它意义之间存在冲突？

Answer 1

aria-hidden 将元素完全隐藏到辅助技术，例如屏幕 readers 和盲文设备。该元素不会出现在可访问性树中（有点像 DOM 树），因此屏幕 reader 用户不会知道该元素在那里。 aria-label 将被忽略，因为它是隐藏的。

如果你想忽略一个元素的内容，那么它将是你放置aria-hidden的嵌套元素。

<span aria-label="Favourite">
  ...
  <span aria-hidden="true">you can't see me</span>
  ...
</span>

然而，即使是那个例子也不是很正确，因为它在一个没有语义的元素上有一个 aria-label。如果您使用的 html 标签没有任何语义意义除非你还指定了一个 role.

A <span> 对屏幕来说没有任何意义 reader。 <h1>、<li>、<table>、<section>、<header>、<footer>等语义标签都对屏幕有意义reader.这些标签将作为标题或列表或 table 或区域等公布。<span> 不会作为任何内容公布。如果屏幕 reader 使用 up/down 箭头键遍历辅助功能树，如果 <span> 包含文本，将读取文本，仅此而已。

我可以在同一个元素上使用 aria-label 和 aria-hidden="true" 吗？

Can I use aria-label and aria-hidden="true" on the same element?

html

wai-aria

web-accessibility