Как сделать сайт доступным: 8 шагов

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

1. Выберите самые важные страницы

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

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

2. Запустите автоматическую проверку

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

• WAVE — расширение браузера, которое отмечает ошибки прямо на странице;
• axe DevTools — расширение для инструментов разработчика в браузере;
• Lighthouse — встроен в браузер Chrome, раздел «Accessibility».

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

3. Проверьте сайт с клавиатуры

Отложите мышь и пройдите страницу клавишей Tab, а назад — Shift+Tab. Проверьте:

• хорошо ли видно, какой элемент активен (рамка фокуса);
• логичен ли порядок элементов — сверху вниз, слева направо;
• открываются ли меню, выпадающие списки и всплывающие окна клавишей Enter или пробелом и закрываются ли клавишей Esc;
• не застревает ли фокус в баннере cookies или окне чата;
• можно ли дойти до оплаты и завершить заказ.

На этом же этапе увеличьте масштаб браузера до 200 % (Ctrl и +). Строки не должны наезжать друг на друга, а меню и кнопки должны оставаться доступными. Затем откройте сайт на телефоне и поверните его горизонтально: содержимое должно подстроиться, а текст — увеличиваться жестом пальцев.

4. Послушайте сайт через программу чтения с экрана

Программа чтения с экрана озвучивает страницу — так сайтами пользуются незрячие люди. Попробовать можно бесплатно: NVDA на компьютере с Windows, VoiceOver на Mac или iPhone, TalkBack на телефоне с Android. Слушайте:

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

5. Составьте список ошибок с приоритетами

Не все ошибки одинаково важны. Их удобно разделить на три группы:

Список критериев с объяснениями — в статье требования WCAG к сайту.

6. Исправьте код, дизайн и содержимое

Часть ошибок исправляет программист, часть — дизайнер, а часть вы можете исправить сами.

Код

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

Дизайн

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

Содержимое

Через систему управления сайтом вы сами можете написать описания изображений, выстроить заголовки по порядку, поправить тексты ссылок и добавить субтитры к видео. Важную информацию из PDF стоит перенести на обычную страницу.

Несколько правил для тех, кто наполняет сайт:

• Альтернативный текст описывает, что показывает изображение, а не как называется файл: не «IMG_2045», а «Красная детская куртка с капюшоном».
• Заголовки идут по порядку: после H2 — H3, а не сразу H4. Уровень заголовка не выбирают ради размера шрифта.
• Текст ссылки говорит, куда она ведёт: «Условия доставки», а не «нажмите здесь».
• Текст пишут короткими предложениями и абзацами, сложные термины объясняют.

А как же виджеты доступности?

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

7. Опубликуйте информацию о доступности

Создайте страницу «Доступность» и укажите на ней:

• какого уровня вы добиваетесь, например WCAG 2.1 AA;
• что уже адаптировано и какие недостатки пока известны;
• как посетитель может сообщить о проблеме — e-mail или телефон.

Пишите просто и честно. Если, например, старые PDF-каталоги ещё не адаптированы, так и укажите и предложите альтернативу — прислать информацию по e-mail. К самой странице «Доступность» применяются те же требования доступности. Ссылку на неё удобнее всего поставить в подвале — тогда она доступна с любой страницы.

Для компаний, на которые распространяется Европейский акт о доступности, информация о доступности услуги обязательна.

8. Поддерживайте доступность

Доступность — не разовая работа. Каждая новая страница, фотография или плагин может вернуть ошибки, поэтому:

• впишите правила доступности в инструкцию для тех, кто наполняет сайт;
• после крупного обновления повторите шаги 2–4;
• при разработке новой функции включайте требования доступности в техническое задание;
• прежде чем установить новый плагин, окно чата или баннер cookies, проверьте, работают ли они с клавиатуры.

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

Регулярную проверку и мелкие исправления удобно включить в обслуживание сайта.

Когда стоит обратиться к специалистам

Ошибки в содержимом обычно можно исправить самостоятельно, но для управления с клавиатуры, форм и дизайн-системы нужны программист и дизайнер. Если сайт сделан на старой технологии, иногда дешевле сделать его заново, чем исправлять. Это становится понятно только после проверки. Проверка доступности стоит от 120 €, исправление ошибок — по отчёту.

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