Как скрыть элемент визуально, но при этом сделать его доступным для экранных считывателей?

Когда речь идет о веб-разработке, особенно о доступности (accessibility), важно иметь возможность скрывать элементы от визуального отображения, но при этом оставлять их доступными для экранных считывателей. Это может быть необходимо, например, для предоставления дополнительной информации для пользователей, которые используют вспомогательные технологии.

Решение

Для достижения этой цели используется свойства CSS. Наиболее распространённый способ — это использование свойства position в сочетании с clip или visibility. Ниже представлены несколько способов, как можно скрыть элемент визуально, но сохранить его доступным.

Способ 1: Использование position и clip

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

HTML:

<button aria-expanded="false">Меню</button>
<span class="visually-hidden">Это дополнительная информация для пользователей экранных считывателей.</span>

В данном примере текст внутри тега <span> будет скрыт визуально, но доступен для экранных считывателей.

Способ 2: Использование свойства visibility

.hidden {
    visibility: hidden;
}

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

Способ 3: Использование opacity

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

.hidden {
    opacity: 0;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

Заключение

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