Visually hidden accessible text

Иногда нужен текст только для скринридеров — например, пояснение к иконке. display:none убирает его и оттуда, а этот класс — только визуально.

Код

<button style="width:2rem;height:2rem;border-radius:6px">
  &#128465;
  <span class="visually-hidden">Удалить элемент</span>
</button>
<style>
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }
</style>

Предпросмотр

Пояснение

В отличие от display:none или visibility:hidden, этот приём оставляет элемент "видимым" для accessibility API браузера, скрывая его лишь визуально через размер 1×1px и обрезку.

Класс часто называют sr-only (screen-reader only) — та же техника, другое название.

Visually hidden accessible text

Код

Предпросмотр

Пояснение

Похожие инструменты

Accordion (details/summary)