Ответ
Для скрытия элемента визуально, но оставления его доступным для скринридеров, используйте класс .visually-hidden:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Или используйте современный подход с clip-path:
.sr-only {
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}Это скроет элемент на экране, но оставит его в DOM и доступным для вспомогательных технологий. Не используйте display: none или visibility: hidden, так как они полностью скрывают элемент.
Ответ 18+ 🔞
О, а вот это, блядь, интересная тема подъехала! Смотри, бывает же такая хуйня — надо элемент спрятать, чтобы его на экране не было видно, но чтобы скринридеры его всё равно читали. Ну, для доступности там, для всяких незрячих пользователей, понимаешь?
Так вот, если ты тупо накинешь display: none или visibility: hidden, то это пиздец, а не решение. Элемент-то из DOM не выпадет, но скринридер его проигнорит нахуй полностью. Как будто его и нет. А нам надо, чтобы он был, но не мозолил глаза.
Раньше, блядь, все юзали вот этот классический костыль .visually-hidden. Смотри, какая хитрая жопа:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Суть в чём: ты элемент вырываешь из потока (absolute), сжимаешь его до пикселя, обрезаешь нахуй (clip), а margin: -1px — это чтобы этот пиксель ещё и за границу экрана выпихнуть, на всякий случай. Гениально и уёбищно одновременно, ёпта!
Но сейчас, в наше просвещённое время, можно сделать по-модному, с clip-path:
.sr-only {
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}Тут та же идея, но clip-path — он как будто ножницами отрезает всё, что внутри элемента, оставляя только хуй да маленькую шишечку. Современно, блядь, стильно.
Главное, чувак, запомни — никогда не прячь такие штуки через display: none. Иначе получится, как в той поговорке: «с глаз долой — из скринридера вон». А нам такое нахуй не надо.