html - 我可以在同一个元素上使用 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将元素完全隐藏到辅助技术，例如屏幕阅读器和盲文设备。该元素不会在可访问性树(有点像 DOM 树)中，因此屏幕阅读器用户不会知道该元素在那里。 aria-label将被忽略，因为它是隐藏的。

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

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

然而，即使是那个例子也不是很正确，因为它有一个 aria-label在没有语义意义的元素上。许多屏幕阅读器会忽略 aria-label (它不会被读取)如果您使用的 html 标签没有任何语义意义除非您还指定了 role .

A <span>对屏幕阅读器没有任何意义。语义标签，例如 <h1> , <li> , <table> , <section> , <header> , <footer>等都对屏幕阅读器有意义。这些标签将作为标题或列表或表格或区域等公布。<span>没有宣布为任何东西。如果屏幕阅读器使用向上/向下箭头键遍历辅助功能树，如果 <span>包含文本，将读取文本，仅此而已。