Как скрытые элементы влияют на скринридеры?

Влияние скрытых элементов на скринридеры

Скринридеры (программы чтения с экрана) полагаются на DOM-дерево доступности (Accessibility Tree), которое браузер строит на основе HTML-кода. Способ скрытия элемента напрямую влияет на то, будет ли он включен в это дерево и, следовательно, озвучен пользователю.

Основные способы скрытия и их эффект

• display: none и атрибут hidden: Полностью удаляют элемент из Accessibility Tree. Скринридер не видит и не озвучивает его. Это правильный способ скрыть контент, который не должен быть доступен никому.
• visibility: hidden: Аналогично, элемент скрывается и из визуального представления, и из дерева доступности.
• opacity: 0 и clip: Элемент визуально невидим, но остается в Accessibility Tree. Скринридер может его прочитать, что может дезориентировать пользователя, так как он не видит элемент на экране.
• aria-hidden="true": Этот атрибут явно указывает скринридеру игнорировать элемент, независимо от его визуального состояния. Он не удаляет элемент из DOM, но исключает его из Accessibility Tree.

Пример кода

<!-- Элемент полностью скрыт от всех -->
<div style="display: none;">Этот текст не увидят и не услышат</div>

<!-- Элемент визуально скрыт, но доступен скринридеру (плохая практика) -->
<div style="opacity: 0;">Этот текст услышат, но не увидят</div>

<!-- Элемент визуально видим, но скрыт от скринридера -->
<div aria-hidden="true">Этот текст увидят, но не услышат</div>

Вывод

Для обеспечения доступности важно выбирать правильный способ скрытия элементов. Используйте display: none или hidden для контента, который не должен быть доступен никому. Применяйте aria-hidden="true" для декоративных элементов или контента, который визуально присутствует, но не несет смысловой нагрузки для пользователей скринридеров. Избегайте использования opacity: 0 для скрытия контента, который не должен быть озвучен.