Примеры: Доступность: alt, label, aria и клавиатура

В каждом примере слева код, сверху — живой результат. Сравнивайте «плохо» и «хорошо».

1. Контраст текста к фону

Один и тот же фон, разный цвет текста. Бледный вариант читается тяжело — это барьер доступности.

/* плохо */ .bad  { background:#0f766e; color:#bfe3df; }
/* хорошо */ .good { background:#0f766e; color:#ffffff; }

2. Изображение: без alt vs с alt

Если картинка не загрузилась (или её читает скринридер), без alt пользователь не узнает, что было на месте картинки. Ниже специально указан несуществующий файл — браузер показывает то, что доступно.

<!-- плохо: alt пустой у значимой картинки -->
<img src="avatar.jpg" alt="">

<!-- хорошо: alt описывает смысл -->
<img src="avatar.jpg" alt="Портрет автора резюме">

3. Поле формы: без label vs с label

Кликните по подписи в правом блоке — курсор сам встанет в поле. У левого поля подписи нет, такой связи не будет.

<!-- плохо: только placeholder, он исчезнет при вводе -->
<input type="email" placeholder="E-mail">

<!-- хорошо: label связан с полем через for/id -->
<label for="email">E-mail для связи</label>
<input id="email" type="email">

4. Видимая обводка фокуса

Нажмите Tab или кликните по кнопкам ниже. Левая теряет фокус (outline:none), у правой он виден — пользователь понимает, где находится.

/* плохо: убрали обводку и ничего не дали взамен */
button:focus { outline: none; }

/* хорошо: заметная обводка только при навигации с клавиатуры */
button:focus-visible {
  outline: 3px solid #0f6cbf;
  outline-offset: 3px;
}

5. Подсказка к полю через aria-describedby

Пояснение под полем связывается с ним атрибутом aria-describedby — скринридер прочитает его после имени поля.

<label for="pf">Ссылка на портфолио</label>
<input id="pf" type="url" aria-describedby="pf-help">
<p id="pf-help">Можно указать GitHub, Behance или личный сайт.</p>