Как скрыть элементы в CSS, не мешая работе скринридеров

Прежде чем перейти к методам скрытия элементов, стоит разобраться, что такое Accessibility Tree (Дерево Доступности). Этот инструмент упрощает проверку доступности, позволяя разработчикам удостовериться, распознается ли элемент программами для чтения с экрана, без включения устройства чтения с экрана.

Чтобы воспользоваться Accessibility Tree:

1. Нажмите F12, чтобы открыть DevTools.
2. Нажмите двойную стрелку справа и выберите Accessibility (Доступность).
3. Выберите элемент, чтобы проверить, отображается ли он в Accessibility Tree.

Если элемент отображается в списке, устройства чтения с экрана могут его распознать. Если он отображается как игнорируемый, скринридеры не будут озвучивать его.

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

Методы, блокирующие устройства чтения с экрана

1. display: none;

Эффект: Полностью удаляет элемент из макета.
Скринридеры: Не могут прочитать этот элемент.

2. visibility: hidden;

Эффект: Скрывает элемент, но сохраняет его место в макете.
Скринридеры: Не могут прочитать этот элемент.

3. Атрибут hidden

Эффект: Действует аналогично display: none;.
Скринридеры: Не могут прочитать этот элемент.

4. aria-hidden=”true”

Эффект: Скрывает элемент от устройств чтения с экрана, сохраняя его визуальное присутствие.
Скринридеры: Не могут прочитать этот элемент.

5. Динамическое удаление элементов (element.remove())

Эффект: Элемент полностью удаляется из DOM.
Скринридеры: Не могут прочитать этот элемент.

От редакции Techrocks: вас также могут заинтересовать другие статьи на тему веб-доступности:

• Доступность ссылок: выделения цветом недостаточно
• 4 инструмента для улучшения цветовой доступности сайта
• Практическое руководство по созданию доступных форм

Методы, позволяющие сохранить элементы видимыми для скринридеров

1. opacity: 0;

Эффект: Делает элемент полностью прозрачным, но сохраняет его в макете.
Скринридеры: Могут прочитать этот элемент.

2. position: absolute; left: -9999px;

Эффект: Перемещает элемент за пределы экрана.
Скринридеры: Могут прочитать этот элемент.

3. clip-path: inset(50%);

Эффект: Обрезает элемент, делая его невидимым.
Скринридеры: Могут прочитать этот элемент.

4. height: 0; width: 0; overflow: hidden;

Эффект: Уменьшает размер элемента до нуля, сохраняя его в DOM.
Скринридеры: Могут прочитать этот элемент.

5. transform: scale(0);

Эффект: Уменьшает элемент до невидимого размера.
Скринридеры: Могут прочитать этот элемент.

6. z-index: -1;

Эффект: Перемещает элемент за другие элементы.
Скринридеры: Могут прочитать этот элемент.

7. filter: opacity(0);

Эффект: Аналогичен opacity: 0;, делает элемент прозрачным.
Скринридеры: Могут прочитать этот элемент.

Итоги

Способы предотвратить чтение элементов программами чтения с экрана:

• CSS: display: none; и visibility: hidden;
• Атрибуты DOM: hidden и aria-hidden="true"
• JavaScript: Удаление элементов из DOM (element.remove()).

6 методов CSS, которые не блокируют работу скринридеров:

• opacity: 0;
• position: absolute; (перемещение за пределы экрана)
• clip-path
• height: 0; width: 0; overflow: hidden;
• transform: scale(0);
• z-index: -1;

Выбор подходящего метода скрытия зависит от того, должно ли содержимое быть доступно для скринридеров. Правильное управление скрытыми элементами повышает удобство использования и соответствие требованиям доступности.

Перевод статьи “How to Hide Elements in CSS Without Affecting Screen Readers”.