4

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

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

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

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

4

1 回答 1

11

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>等语义标签对屏幕阅读器都有意义。这些标签将被宣布为标题或列表或表格或区域等。A<span>不会被宣布为任何内容。如果屏幕阅读器正在使用向上/向下箭头键浏览可访问性树，如果<span>包含文本，则将读取文本但仅此而已。

于 2018-10-16T18:28:41.830 回答