Aria-hidden=true для родителя не делает дочерние элементы также aria-hidden

Я немного читаю об использовании aria и наткнулся на этот фрагмент документации: Четвертое правило ARIA Используйте. Одна часть, которая мне не ясна, заключается в следующем:

«Применение aria-hidden к родителю/предку видимого интерактивного элемента также приведет к скрытию интерактивного элемента»,

Я попробовал следующий фрагмент, но тег привязки по-прежнему доступен (хотя я поместил aria-hidden в его родителя). Что мне здесь не хватает?

body, html {
  background-color: #333;
  height: 100%;
}

#main {
  margin: 0 auto;
  width: 80%;
  background-color: #fff;
  height: 100%;
  padding: 50px;
}

.test {
  border: 1px solid #555;
  padding: 10px;
}
<div id="main">
  <div tabindex="0">Woohoo</div>
  <div class="test" aria-hidden="true" role="presentation">
    <div class="one" aria-hidden="true">
        <span aria-hidden="true">
          <a href="#">Testing</a>
        </span>
    </div>
  </div>
</div>


accessibility wcag wcag2.0
person coffeeak    schedule 06.09.2018    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Зависит от того, что вы подразумеваете под «доступной» ссылкой. Добавление aria-hidden="true" предотвратит включение элемента в дерево доступности (аналогично DOM), так что пользователь программы чтения с экрана не сможет найти ссылку при обходе дерева доступности (обычно это делается с помощью клавиши со стрелками вверх/вниз).

Атрибуты ARIA влияют на то, как средство чтения с экрана обращается к элементам. Он не обеспечивает никакого поведения. В предоставленной вами ссылке «правила использования арии» посмотрите немного ниже на «Что Добавление роли не работает".

Таким образом, хотя добавление aria-hidden="true" делает предотвращение вставки элемента в дерево специальных возможностей, оно не удаляет элемент из обычного порядка табуляции на клавиатуре. Вы все еще можете перейти к ссылке и выбрать ее. Вам нужно будет добавить tabindex="-1" к ссылке, чтобы предотвратить переход к ней.

Я знаю, что ваш образец фрагмента был предназначен только для целей тестирования, но, надеюсь, у вас нет случая, когда интерактивный элемент, такой как ссылка, скрыт от пользователя программы чтения с экрана. aria-hidden следует использовать, чтобы скрыть неважные вещи (декоративные элементы) от средств чтения с экрана, или если вы временно скрываете что-то визуально, а также хотите, чтобы это было скрыто от средств чтения с экрана, например, если у вас есть функция развертывания/свертывания и когда элемент свернут, вы визуально скрываете содержимое, перемещая его за пределы экрана (вместо использования display:none), вы также хотели бы установить aria-hidden="true" для содержимого.

person slugolicious    schedule 06.09.2018
comment
Спасибо за комментарий! Под доступным я имел в виду обычный порядок табуляции на клавиатуре, о котором вы уже упоминали. Фрагмент кода действительно был предназначен только для целей тестирования, потому что меня немного смутила документация, которую я упоминаю в вопросе. Спасибо за устранение путаницы! - person coffeeak; 06.09.2018