Заголовок раздела нужен скринридеру, но не должен быть виден на экране
У иконочной кнопки «корзина» нет текста, а у формы фильтров нет видимого заголовка — так решил дизайн. Разработчик добавил текст и скрыл его через display: none. Аудит доступности показал, что скринридер его всё равно не читает.
Как скрыть текст визуально, оставив его доступным?
- Класс visually-hidden: элемент 1×1 px с обрезкой через clip, без display: none
- visibility: hidden — элемент скрыт, но остаётся в потоке
- opacity: 0 и pointer-events: none
- color: transparent и font-size: 0