Visually hidden accessible text

Іноді потрібен текст лише для screen-читачів — наприклад, пояснення до іконки. 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) — та ж техніка, інша назва.

Схожі інструменти

Accordion (details/summary)

Нативний акордеон на details/summary, доступний з коробки, без JS.