Могу ли я использовать 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> содержит текст, текст будет прочитан, но это все.