Aria-hidden = true для родителя не делает своих детей также aria-hidden

Question

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

"Применение скрытой арии к родителю / предку видимого интерактива элемент также приведет к тому, что интерактивный элемент будет скрыт, "

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

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>

Answer 1

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

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

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

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