Как скрыть элемент визуально, но оставить для скринридеров

Короткий ответ

Сделайте элемент размером в 1 пиксель, вырежьте его через clip-path и уберите из потока:

<style>
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
</style>
 
<button>🛒 <span class="sr-only">Cart, 3 items</span></button>

На экране видна только иконка, а скринридер прочитает «Cart, 3 items». Класс обычно называют sr-only или visually-hidden и держат в общих стилях сайта.

Где это нужно

• Подпись к полю, если дизайн её не предусматривает, — например, к полю поиска с кнопкой-лупой.
• Пояснение к иконке или к ссылке «Читать далее» («…about coffee roasting»).
• Заголовок раздела, который виден глазу по оформлению, но нужен в структуре страницы.

Обратная задача

Иногда нужно наоборот: показать элемент глазами, но скрыть от скринридера, — например, декоративную иконку рядом с текстом. Для этого есть атрибут aria-hidden="true":

<p><span aria-hidden="true">★★★★☆</span> <span class="sr-only">Rating: 4 out of 5</span></p>

Частая ошибка

Текст для скринридеров прячут через display: none или hidden. Такие элементы не видят и программы чтения с экрана — подсказка пропадает для всех. Скрытие с помощью opacity: 0 тоже не подходит: элемент остаётся на месте и занимает пространство.