Скрыть элемент от скринридера

hide content

Accessible Rich Internet Applications(ARIA) — набор специальных атрибутов, которые определяют способы сделать веб-контент и веб-приложения (особенно разработанные с использованием JavaScript) более доступными для людей с ограниченными возможностями. Нужно помнить что ARIA это вспомогательная технология. Не нужно вставлять не подходящие теги и после переопределять их с помощью ARIA. Семантически грамотная HTML разметка, сама по себе обеспечивает достаточно хорошую доступность. Некоторые вопросы можно решить стандартными HTML атрибутами. Например изображения, вставленные для внешнего оформления. Чтобы исключить их из дерева доступности нужно оставить атрибут alt пустым.

role=presentation говорит о том, что семантическое  значение элемента не соответствует его назначению. При этом содержимое остаётся доступным, а вложенные элементы сохраняют своё семантическое значение. Как по мне так это очень специфический атрибут. Трудно придумать ситуацию где можно было бы его использовать. Самый распространённый пример применения — табличная вёрстка. Во время флэксов и гридов, такой себе пример, но суть атрибута передаёт максимально наглядно. В случае если таблица используется для компоновки элементов на странице, отмечаем её как role=“presentation“ и скринридеры не будут воспринимать её как таблицу, при этом весь контент останется доступным.

Следующий вариант — атрибут aria-hidden=“true“. Полностью скрывает сам элемент и всё что в него вложено. Это могут быть какие-то элементы интерфейса. Например чекбокс с инпутом, как триггер для раскрытия меню. Ещё вариант - всплывающее сообщение, которое присутствует на странице но скрыто таким образом, что остаётся в дереве доступности.

Вот такие два способа для удаления элементов из дерева доступности. Как я уже говорил, вариант с role=“presentation“ довольно специфичный, но это не значит что его можно, не раздумывая заменить на aria-hidden. Что бы выбрать какой вариант использовать определитесь что хотите сделать. Если удалить только семантику используем первый вариант. Для скрытия декоративного/служебного/бесполезного(с точки зрения скринридера) элемента - второй.

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