Значения доступности показа / скрытия против добавления / удаления из DOM

Question

Ниже приведен пример раскрывающегося меню, написанного на Angular, в котором я использую атрибут HTML5 hidden (другими словами, display: none;), чтобы показать / скрыть список элементов:

<button
  id="my-btn
  type="button"
  aria-haspopup="menu"
  aria-controls="my-menu"
  [attr.aria-expanded]="isMenuOpen"
  (click)="isMenuOpen = !isMenuOpen"
>
  Menu
</button>

<ul
  id="my-menu"
  role="menu"
  aria-labelledby="my-btn"
  [hidden]="!isMenuOpen"
>
  ...
</ul>

В следующем примере я использую структурную директиву *ngIf вместо атрибута hidden для условной визуализации списка. Другими словами, теперь список добавляется и удаляется из DOM каждый раз, когда изменяется isMenuOpen.

<ul
  id="my-menu"
  role="menu"
  aria-labelledby="my-btn"
  *ngIf="isMenuOpen"
>
  ...
</ul>

Игнорируя какие-либо проблемы с инфраструктурой или производительностью, отличаются ли эти две реализации от точки зрения доступности ?

Многие атрибуты ARIA работают, ссылаясь на идентификаторы других элементов (например, aria-controls, aria-labelledby и т. Д.). Является ли удаление из DOM элемента, на который ссылается такой атрибут, менее доступным, чем скрытие этого элемента?

Answer 1

Да, есть разница. Рассмотрим этот простой пример:

<button aria-labelledby="foo"></button>

где элемент "foo" не существует на странице (пока). Если вы пропустите этот код через валидатор, такой как https://validator.w3.org/nu,, произойдет сбой.

Error: The aria-labelledby attribute must point to an element in the same document.

С точки зрения WCAG произойдет сбой 4.1.1 - Анализ .

Кроме того, WCAG 4.1.2 - Имя, Роль, Значение будет проблемой. Кнопка (в моем примере) не имеет доступного имени, потому что элемент, на который она указывает, не существует. Если элемент, на который он указывает, является скрытым (а не несуществующим), то доступное имя может быть вычислено , как отмечено в шаге 2А вычисления Доступное имя и описание .

Пользователи программы чтения с экрана имеют быстрые клавиши, которые позволяют быстро и легко осуществлять навигацию. Если я хочу перейти к следующей кнопке на странице, я могу просто нажать «B» (во время работы программы чтения с экрана) и мой фокус переместится на следующую кнопку. Имя кнопки будет объявлено, но если элемент, на который она указывает, не существует, имя не будет объявлено.

Я также могу вызвать диалог со списком всех кнопок на странице (если я использую программу чтения с экрана JAWS), нажав ctrl + ins + б . В списке будут отображаться доступные названия всех кнопок. Опять же, если ваша кнопка указывает на элемент, который не существует, в этом диалоговом окне не будет отображаться имя.

С VoiceOver на iOS я могу настроить свой ротор на перемещение по кнопкам, чтобы при перемещении вверх или вниз фокус перемещался к следующей кнопке (аналогично нажатию клавиши «B» на устройстве чтения с экрана ПК). Когда фокус перемещается к следующей кнопке, ее имя будет вычислено и объявлено. Итак, еще раз, если элемент, на который он указывает, не существует, имя не будет объявлено.

Итак, простой ответ на ваш вопрос - использовать скрытые элементы вместо элементов, которые создаются / уничтожаются в DOM, но я хотел бы дать некоторый контекст за этим ответом.