Скрыто визуально, доступно скринридеру
Условие
.sr-only прячет текст с экрана, но оставляет его доступным скринридеру. display: none и visibility: hidden использовать нельзя - они убирают элемент и из дерева доступности.
Что проверяют тесты
не занимает места
не скрыт от дерева доступности
содержимое обрезано
текст на месте
Как подойти
Стандартный набор visually-hidden, который стоит помнить наизусть - он есть в каждой дизайн-системе. Ключевое понимание: display: none и visibility: hidden убирают элемент и из дерева доступности, а значит скринридер его не прочитает. Нулевые размеры тоже не годятся - часть скринридеров игнорирует элементы нулевого размера, поэтому берут один пиксель с обрезкой.
Подсказки: 3
- Элемент должен остаться в дереве доступности - значит убирать его нельзя.
- Приём: размер в один пиксель плюс обрезка содержимого.
- white-space: nowrap нужен, чтобы длинный текст не разъехался до обрезки.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.