Доступность сайта: контраст, размер кнопок и версия для слабовидящих

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

01Стандарт WCAG

Основной международный стандарт называется WCAG, Web Content Accessibility Guidelines. У него три уровня: A, AA и AAA. Для обычных сайтов ориентиром считается уровень AA версии 2.1. На него я и опираюсь

02Контраст

Самое простое и самое частое нарушение: светло-серый текст на белом или тёмно-серый на чёрном. По WCAG уровня AA контраст обычного текста с фоном должен быть не ниже 4,5 к 1, а крупного текста не ниже 3 к 1. Крупным считается текст от 18 пунктов или от 14 пунктов жирным

Проверить контраст можно в любом онлайн-калькуляторе контраста или прямо в инструментах разработчика браузера. Я проверяю ключевые пары цветов ещё на этапе дизайн-системы, чтобы потом не перекрашивать готовые макеты

03Размер кнопок и ссылок

На телефоне человек попадает по кнопке пальцем, а не курсором. Apple в своих рекомендациях советует делать нажимаемую область не меньше 44 на 44 точки. Я держусь этого размера для всех кнопок и ссылок в меню, даже если визуально кнопка меньше: область нажатия можно сделать больше самой надписи

04Клавиатура и фокус

Часть людей не пользуется мышью. По сайту должно быть можно пройти клавишей Tab: все ссылки, кнопки и поля доступны, а на активном элементе видна рамка фокуса. Модальные окна и меню должны закрываться клавишей Esc. Например, мобильное меню на этом сайте закрывается и кнопкой, и клавишей Esc, и нажатием на любой пункт

05Подписи и структура

• У каждой картинки со смыслом должно быть текстовое описание, alt. Его читают программы экранного доступа и поисковые системы
• Заголовки должны идти по порядку: один главный заголовок H1 на странице, под ним H2 и дальше
• У полей формы должны быть понятные подписи, а не только серый текст внутри поля, который исчезает при вводе

06Версия для слабовидящих

Для государственных и муниципальных учреждений, в том числе театров, музеев, школ и больниц, доступность сайта для людей с нарушениями зрения обязательна. Этого требует закон о социальной защите инвалидов, а требования к доступности описывает стандарт ГОСТ Р 52872-2019. На практике у таких сайтов есть переключатель на версию для слабовидящих: крупный шрифт, контрастные цветовые схемы, возможность отключить картинки

Я закладываю такую версию в дизайн с самого начала. Тогда она выглядит как часть сайта, а не как чужой модуль, подключённый в последний момент. Подробнее о том, что должно быть на сайте учреждения культуры, я писал в статье про сайт для театра или музея

07Как проверить свой сайт

1. Пройдите по главной странице одной клавишей Tab: видно ли, где вы находитесь?
2. Откройте сайт на телефоне на улице: читается ли текст?
3. Проверьте контраст основного текста и кнопок в калькуляторе контраста
4. Посмотрите, есть ли у картинок описания

Если нужен сайт, который проходит эти проверки, посмотрите, как я работаю над сайтами, или напишите мне