Видно и читается
Контраст, размер шрифта и масштабирование: почему бледный серый текст на белом фоне подводит даже читателей с хорошим зрением.
сайт для всех: справочник о доступности
Wpget — как сделать сайт удобным для всех
Вашим сайтом пользуются разные люди: кто-то увеличивает текст вдвое, кто-то слушает страницу через экранный диктор, кто-то не может держать мышь, а кто-то читает с телефона на ярком солнце. Справочник объясняет, что мешает каждому из них, и показывает, как убрать эти помехи своими силами — спокойно, по шагам и без дорогих переделок.
Доступный сайт — не отдельная версия для особых посетителей, а та же самая страница, которую просто никто не забыл проверить.
С чего начать
Работает с клавиатуры
Как пройти страницу без мыши, где должен быть виден фокус и почему ни одна кнопка не должна быть доступна только по щелчку.
Понятные формы
Подписи у полей, ясные сообщения об ошибках и отправка без угадывания — то, что решает, напишет вам человек или уйдёт.
Видео и звук
Субтитры, расшифровка и сурдоперевод: чем они различаются и с чего разумно начать небольшому сайту.
Разделы справочника
- Инструкции
Пошаговые инструкции: как сделать текст читаемым, страницу — понятной по заголовкам, а форму обратной связи — удобной для всех. Здесь же каталог публикаций.
- Инструменты
Чем проверить сайт самому: увеличение в браузере, клавиатура, режим высокой контрастности, встроенный экранный диктор, проверка цветов и валидатор разметки.
- Сравнения
Уровни соответствия A, AA и AAA; альтернативный текст, подпись и расшифровка; субтитры, расшифровка и сурдоперевод — в сравнительных таблицах.
- Если не работает
Что делать, если не видно фокуса, текст не помещается при увеличении, кнопка без надписи, ошибки формы непонятны или видео идёт без субтитров.
- Риски
Ловушки доступности: непроходимая капча, исчезающие сообщения, мигание, короткие таймауты, сканы вместо текста и «оверлеи», обещающие исправить всё сразу.
- Словарь
Словарь терминов: доступность, WCAG, ГОСТ Р 52872-2019, контраст, альтернативный текст, фокус, экранный диктор, субтитры и простой язык.
- Вопросы
Ответы на частые вопросы о справочнике, о тексте и изображениях, о формах, видео и о том, как проверить доступность своего сайта без специалиста.
Проверить свой сайт за пять шагов
Пройдите страницу клавишей табуляции
Отложите мышь и нажимайте клавишу табуляции, двигаясь от начала страницы к концу. Вы должны каждый раз видеть, какой элемент сейчас выбран, и добираться до всех ссылок, кнопок и полей в разумном порядке.
Увеличьте масштаб вдвое
Увеличьте страницу в браузере вдвое и пролистайте её. Текст не должен обрезаться или наезжать на соседние блоки, а меню и кнопки должны оставаться на месте и работать.
Проверьте контраст
Сравните цвет основного текста с цветом фона с помощью любой проверки контраста. Для обычного текста по уровню AA нужно не менее 4,5:1, для крупного — не менее 3:1.
Посмотрите на заголовки
Выпишите заголовки страницы по порядку, как оглавление. Если по этому списку понятно, о чём страница и где что лежит, структура в порядке; если заголовков нет или они выбраны ради размера шрифта, её стоит поправить.
Проверьте подписи у полей формы
Щёлкните по подписи каждого поля: правильно связанная подпись переводит курсор в поле. Убедитесь, что подписи видны всё время, а не исчезают, как только человек начинает печатать.
Коротко о главном
Вы делаете сайты или проводите проверки за плату?
Нет. Wpget — справочник. Мы не делаем сайты, не продаём хостинг, не принимаем заявок и не представляем никакую студию. Здесь только объяснения, которые помогут вам проверить и поправить свой сайт самостоятельно.
Обязан ли мой сайт соответствовать стандарту доступности?
Это зависит от того, кто владелец сайта и чему он служит, и мы не даём юридических заключений. Если вопрос для вас важен, уточняйте у юриста. Независимо от ответа, доступный сайт удобнее для всех посетителей.
Можно ли поставить «версию для слабовидящих» и забыть?
Нет. Отдельная кнопка с крупным шрифтом не исправляет основной сайт: не появляются подписи у полей, описания картинок и работа с клавиатуры. Доступной должна быть та страница, которую видят все.
Сколько стоит сделать сайт доступным?
Честный ответ — многое делается вниманием, а не деньгами. Описать картинки, расставить заголовки, подписать поля и поднять контраст можно самостоятельно. Сложные переделки обычно нужны там, где о доступности долго не думали.
О проекте
Раньше на этом домене был посторонний блог. Его материалы не сохранились и не воспроизводятся. Справочник с тем блогом не связан, а название сохранилось от домена.
Мы пишем для владельцев и редакторов небольших сайтов, которые хотят, чтобы их страницами могли пользоваться все. Конкретных программ, конструкторов и компаний здесь нет — только принципы и проверки, которые подходят к любому сайту.
Читайте также
- Инструкции
Пошаговые инструкции: как сделать текст читаемым, страницу — понятной по заголовкам, а форму обратной связи — удобной для всех. Здесь же каталог публикаций.
- Инструменты
Чем проверить сайт самому: увеличение в браузере, клавиатура, режим высокой контрастности, встроенный экранный диктор, проверка цветов и валидатор разметки.
- Сравнения
Уровни соответствия A, AA и AAA; альтернативный текст, подпись и расшифровка; субтитры, расшифровка и сурдоперевод — в сравнительных таблицах.
- Если не работает
Что делать, если не видно фокуса, текст не помещается при увеличении, кнопка без надписи, ошибки формы непонятны или видео идёт без субтитров.
- Словарь
Словарь терминов: доступность, WCAG, ГОСТ Р 52872-2019, контраст, альтернативный текст, фокус, экранный диктор, субтитры и простой язык.
Источники
- W3C — рекомендации WCAG 2.2
- ГОСТ Р 52872-2019
- Редакционные материалы справочника Wpget
Сведения изложены общими словами на дату подготовки. Рекомендации, браузеры и привычки читателей постепенно меняются, поэтому в спорных случаях сверяйтесь с первоисточниками: текстом рекомендаций WCAG и действующим ГОСТ Р 52872-2019.