Доступность

Доступность (accessibility, сокращённо a11y) — свойство сайта, которым могут пользоваться все: люди с плохим зрением и незрячие, те, кто не может держать мышь, пожилые, люди с ярким солнцем на экране телефона. Незрячие пользуются программами чтения с экрана — они зачитывают страницу вслух по её разметке. Хорошая новость: правильный HTML уже доступен почти без усилий.

Клавиатура

Многие пользуются сайтом без мыши: клавиша Tab переводит фокус — выделение активного элемента — на следующую ссылку, кнопку или поле, а Enter нажимает:

<a href="#">Ссылка</a>
<button>Кнопка</button>
<input placeholder="Поле">

Щёлкните в превью и понажимайте Tab: вокруг элемента в фокусе появляется рамка. Ссылки, кнопки и поля получают фокус сами — потому что это правильные теги.

Не прячьте фокус

Рамку фокуса иногда убирают ради красоты — и человек с клавиатурой теряется. Если она не нравится, замените её своей с помощью псевдокласса :focus-visible:

<style>
  button:focus-visible { outline: 3px solid orange; outline-offset: 2px; }
</style>
 
<button>Первая</button>
<button>Вторая</button>

:focus-visible срабатывает при работе с клавиатуры и не мешает тем, кто щёлкает мышью.

Текст для того, кто не видит

Всё, что понятно только глазами, нужно продублировать текстом. Мы уже знаем два способа: alt у картинок и <label> у полей. Для кнопки-иконки без текста есть атрибут aria-label:

<button aria-label="Закрыть">✕</button>
<button aria-label="Добавить в избранное">♥</button>

Программа чтения с экрана скажет «Закрыть, кнопка», а не «знак умножения».

Структура страницы и ARIA

Незрячий человек не просматривает страницу глазами, а «прыгает» по ней: по заголовкам, областям <nav> и <main>, по ссылкам. Поэтому важны правильные уровни заголовков, смысловые теги и понятный текст ссылок. Атрибут lang у <html> нужен, чтобы текст читался с правильным произношением.

ARIA — набор атрибутов aria-* и role, которые сообщают программам чтения то, чего не выразить обычным HTML. Но первое правило ARIA — не использовать её, если подходит обычный тег: <button> лучше, чем <div role="button">. Неправильная ARIA делает хуже, чем её отсутствие.

Не только цветом

Если ошибку или статус показать только цветом, его не заметят люди, которые плохо различают цвета. Добавляйте текст или значок. И следите за контрастом — разницей между цветом текста и фона:

<p style="color: #bbb;">Светло-серый текст на белом трудно прочитать.</p>
<p style="color: #555;">Тёмно-серый читается легко.</p>
<p style="color: crimson;">✕ Ошибка: почта указана неверно</p>

Проверить контраст можно в инструментах разработчика браузера: при выборе цвета там показан коэффициент контраста.

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

Кнопка из <div> с обработчиком щелчка выглядит как кнопка, но клавиатура до неё не доберётся, а программа чтения не скажет, что это кнопка:

<div style="display: inline-block; padding: 4px 8px; background: #ddd;">Купить</div>
<button>Купить</button>

Нажимайте Tab в превью: фокус попадает только на настоящую кнопку. Для действий берите <button>, для переходов — <a>.