Як приховати елементи візуально, але зберегти їх доступними для екранних читалок
Мета
Іноді потрібно сховати елемент візуально, але залишити його доступним для екранних читалок (наприклад, описи, підказки, службовий текст для сліпих користувачів).
Підхід 1: CSS клас ".sr-only"
Це найбільш поширений спосіб сховати елемент від очей, але не від екранних читалок.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}<p class="sr-only">Тільки екранна читалка бачить це</p>Використовується в Tailwind, Bootstrap (.sr-only) та інших UI фреймворках.
Підхід 2: Атрибут "aria-hidden="true""
Протилежна поведінка — ховає від екранних читалок, але залишає на екрані.
<p aria-hidden="true">Цей текст видимий, але не читається екранними читалками</p>Використовуйте aria-hidden="true" тільки для декоративних або дубльованих елементів.
Підхід 3: "span" з текстом + "aria-label"
Коли ви хочете візуально показати один елемент, але передати інший текст екранній читалці.
<button aria-label="Закрити модальне вікно">
❌
</button>Підхід 4: Текст поза екраном (менш бажано)
.hidden-offscreen {
position: absolute;
left: -9999px;
}Цей метод працює, але є менш надійним і може викликати проблеми з навігацією.
Чого не слід робити
display: noneтаvisibility: hidden— повністю ховають як від очей, так і від екранних читалок.- Видалення елемента з DOM.
Порада з доступності:
Використовуйте .sr-only для пояснень, прихованих заголовків та тексту для екранних читалок. Це робить ваш сайт доступним для всіх користувачів, включаючи тих, хто використовує допоміжні технології.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.