Простой чек-лист веб-доступности для разработчиков

Доступные сайты работают для людей, использующих программы чтения с экрана, клавиатуру или увеличение, и обычно удобнее для всех. Чтобы начать, не нужно быть экспертом.

1. Используйте семантический HTML

Применяйте header, nav, main, button и правильные заголовки вместо обычных div. Вспомогательные технологии опираются на эту структуру.

2. Пишите полезный alt-текст

Описывайте, что показывает изображение или зачем оно нужно. У декоративных изображений alt должен быть пустым.

3. Обеспечьте достаточный контраст

Основной текст должен иметь контраст не менее 4,5 к 1 с фоном. Проверяйте цвета специальным инструментом.

4. Поддерживайте клавиатуру

Всё кликабельное должно быть доступно клавишей Tab, а элемент в фокусе должен быть хорошо виден. Не убирайте контур фокуса без замены.

5. Подписывайте каждое поле формы

Связывайте каждое поле с видимой подписью через атрибут for и объясняйте ошибки текстом, а не только цветом.

6. Соблюдайте порядок заголовков

Используйте один h1 и вкладывайте h2 и h3 по порядку. Не выбирайте заголовки по размеру.

7. Делайте ссылки понятными

«Читать руководство по ценам» понятнее, чем «нажмите здесь», особенно для пользователей программ чтения с экрана, просматривающих список ссылок.

8. Уважайте настройки пользователя

Позвольте масштабировать текст, поддерживайте уменьшенную анимацию через prefers-reduced-motion и избегайте автозапуска медиа.

9. Тестируйте инструментами и с людьми

Автоматические проверки находят многое, но быстрый тест только с клавиатурой и тест с программой чтения с экрана находят больше.