Доступность сайта часто воспринимают как что-то для узкого круга людей с особыми потребностями. На деле она нужна гораздо большему числу посетителей: тем, кто читает с телефона на солнце, кто плохо видит мелкий шрифт, кто сломал руку и пользуется только клавиатурой, кто смотрит видео в транспорте без звука.
Ниже базовые вещи, которые делают сайт удобнее для всех и почти ничего не стоят, если заложить их с самого начала.
Контраст и размер текста
Светло-серый текст на белом фоне выглядит изящно в макете и плохо читается в жизни. Текст должен заметно отличаться от фона, а основной размер шрифта быть комфортным без увеличения. Если пользователь увеличит текст в браузере, вёрстка не должна ломаться.
Управление с клавиатуры
Попробуйте пройти по сайту только клавишей Tab. Должно быть видно, на каком элементе вы сейчас находитесь, и в каком порядке они идут. Меню, всплывающие окна и форма должны работать без мыши, а окно должно закрываться клавишей Esc.
Формы
- У каждого поля есть подпись, которая не исчезает, когда человек начинает печатать
- Ошибка объясняет, что не так и как исправить, а не просто подсвечивает поле красным
- Обязательные поля отмечены не только цветом
- Телефон и почта открывают подходящую клавиатуру на мобильном
Понятная форма это ещё и больше заявок. Подробнее о том, где они теряются, в тексте про заявки, которые не доходят.
Картинки, ссылки и кнопки
У содержательных картинок должно быть текстовое описание в атрибуте alt, его зачитывают программы экранного доступа. Ссылки и кнопки должны говорить, что произойдёт: «Скачать прайс» понятнее, чем «Нажмите здесь». Кнопки должны быть достаточно большими, чтобы в них легко было попасть пальцем.
Видео и анимации
Видео со звуком полезно сопровождать субтитрами: их увидят и те, кто не слышит, и те, кто смотрит без звука. Анимации не должны мигать и мешать чтению, а у людей, которые отключили анимации в настройках системы, сайт должен работать спокойно.
Как проверить самому
- Пройти сайт клавишей Tab и отправить форму без мыши
- Увеличить масштаб страницы в браузере и посмотреть, не разъехалось ли что-то
- Открыть сайт на телефоне на улице при ярком свете
- Запустить автоматическую проверку доступности в инструментах разработчика браузера
Доступность хорошо сочетается с другими базовыми вещами из текста про SEO перед запуском. Если хотите, чтобы мы проверили ваш сайт, напишите через контакты.