Как адаптировать сайт для людей с инвалидностью: 12 проверок по WCAG 2.2

Что такое доступный сайт?

Доступный сайт — это сайт, который может воспринимать, использовать и понимать как можно больше людей, независимо от особенностей зрения, слуха, моторики или когнитивных способностей. Руководство WCAG (англ. Web Content Accessibility Guidelines), которое разрабатывает консорциум W3C, делит требования на четыре принципа.

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

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

1. Достаточен ли контраст текста и фона?

Контраст обычного текста и фона должен быть не ниже 4,5:1, крупного текста (от 24 px или от 18,7 px полужирным шрифтом) — не ниже 3:1 (WCAG 1.4.3). Рамкам кнопок и полей форм, а также важным иконкам нужен контраст не ниже 3:1 с соседними цветами (1.4.11).

Как видно по синим оттенкам, яркий фирменный цвет часто подходит для крупных заголовков, иконок и рамок, но не для мелкого текста — ни на белом фоне, ни белой надписью на кнопке такого цвета. Для мелкого текста подбирают более тёмный оттенок того же цвета. Проверить контраст можно в WebAIM Contrast Checker или в инструментах разработчика браузера.

2. Можно ли увеличить текст и подстраивается ли он под экран?

WCAG не указывает, какой шрифт или размер использовать, но требует, чтобы текст можно было увеличить до 200 % без потери контента (1.4.4), а страница на экране шириной 320 px читалась без горизонтальной прокрутки (1.4.10). Правила о 12-м кегле или шрифте Times New Roman относятся к печатным документам, а не к сайтам.

Ещё один критерий (1.4.12): текст не должен вылезать за пределы блоков или пропадать, если пользователь увеличит интервалы — межстрочный до 1,5 размера шрифта, между абзацами до 2, между буквами до 0,12, между словами до 0,16 размера шрифта. На практике это значит: размер шрифта задаётся в относительных единицах (rem, em), у блоков нет фиксированной высоты, а текст не помещают в картинки.

3. Правильно ли размечены заголовки и области страницы?

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

• Области размечены элементами <header>, <nav>, <main> и <footer> — скринридер позволяет сразу перейти к ним.
• В начале страницы есть ссылка «Перейти к содержимому», чтобы не приходилось на каждой странице заново проходить всё меню (2.4.1).
• У каждой страницы своё название во вкладке браузера (2.4.2), а в коде указан язык страницы, например lang="ru" (3.1.1), чтобы скринридер читал текст с правильным произношением.

4. Есть ли у изображений подходящий альтернативный текст?

Альтернативный текст (alt) передаёт информацию изображения тем, кто его не видит. Если изображение информативное, alt-текст кратко говорит, что на нём показано или для чего оно нужно. Если изображение декоративное, атрибут alt оставляют пустым (alt=""), чтобы скринридер его пропустил (1.1.1).

5. Передаётся ли информация не только цветом?

Цвет не может быть единственным способом что-то сообщить (1.4.1). Человек с дальтонизмом или пользователь скринридера не поймёт, что поле заполнено неверно, если оно просто покраснело, и не отличит ссылку от текста, если она выделена только цветом.

• Ссылки в тексте подчёркнуты или выделены как-то ещё, а не только цветом.
• Неверно заполненное поле формы отмечено и текстом, например «Введите номер телефона».
• На диаграммах у линий и столбцов есть подписи, а не только разные цвета.
• У выбора цвета товара есть текстовое название, а не только цветной квадратик.

6. Понятны ли таблицы и диаграммы скринридеру?

Таблица с данными должна быть настоящей HTML-таблицей с ячейками заголовков (<th> и атрибут scope), чтобы скринридер у каждого числа называл строку и столбец, к которым оно относится (1.3.1). Название таблицы стоит задать элементом <caption>.

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

7. Можно ли пользоваться сайтом только с клавиатуры?

Все функции должны работать с клавиатуры (2.1.1): клавишами Tab и Shift+Tab переходят между элементами, клавишей Enter или пробелом нажимают кнопку, клавишей Esc закрывают всплывающее окно. Навигацией с клавиатуры пользуются и люди, которые не могут работать с мышью, и многие пользователи скринридеров.

• Видимый фокус (2.4.7). Всегда видно, какой элемент выбран; в стилях не должен быть отключён outline без замены.
• Логичный порядок (2.4.3). Фокус движется так, как читается страница: сверху вниз, слева направо.
• Никаких ловушек (2.1.2). Из всплывающего окна, видеоплеера или карты можно выйти с клавиатуры.
• Фокус не перекрыт (2.4.11, новый критерий WCAG 2.2). Выбранный элемент не должен полностью закрывать закреплённая шапка, окно чата или баннер cookie.

8. Достаточно ли крупные кнопки и ссылки?

По новому критерию WCAG 2.2 2.5.8 нажимаемый элемент должен быть не меньше 24 × 24 CSS-пикселя или иметь вокруг достаточно свободного места, чтобы случайно не нажать соседний. Исключения — ссылки внутри текста и элементы, размер которых задаёт сам браузер.

Другой новый критерий (2.5.7) касается перетаскивания мышью или пальцем. Если диапазон цен можно задать только перетаскиванием ползунка, а порядок товаров — только перемещением карточек, должен быть и более простой способ: поля ввода, кнопки или стрелки.

9. Можно ли без препятствий заполнить формы?

Подпись поля формы должна быть видимой и связанной с полем через элемент <label>, а не только серым текстом внутри поля, который исчезает, как только начинаешь печатать (3.3.2). Обязательные поля отмечают не только цветом.

• Ошибки (3.3.1, 3.3.3). Ошибка показывается рядом с полем словами, с объяснением, как её исправить.
• Автозаполнение (1.3.5). У полей имени, электронной почты, телефона и адреса есть соответствующее значение autocomplete, чтобы браузер мог их заполнить.
• Без повторного ввода (3.3.7, новый критерий WCAG 2.2). В рамках одного оформления заказа не нужно второй раз вводить те же данные: например, адрес доставки можно сделать адресом плательщика одной галочкой.
• Помощь в одном и том же месте (3.2.6, новый критерий WCAG 2.2). Если на сайте есть контакты или окно чата, на каждой странице они находятся в одном и том же месте.

10. Не усложнён ли вход головоломками?

Критерий 3.3.8 (новый в WCAG 2.2) запрещает требовать при входе когнитивный тест — что-то запомнить, переписать или вычислить, — если нет альтернативы или помощи. Должна быть возможность вставить пароль или заполнить его менеджером паролей, а одноразовый код — скопировать.

На уровне AA разрешено просить распознать объекты на картинках, но для незрячих это всё равно препятствие. Поэтому в формах входа вместо переписывания искажённых букв лучше использовать незаметные средства защиты: скрытое поле-ловушку для роботов, проверку времени заполнения формы или вход по ссылке из письма.

11. Есть ли у видео- и аудиозаписей субтитры и текст?

Для заранее записанных видео со звуком нужны субтитры (1.2.2), а для аудиозаписей, например подкастов, — текстовая версия (1.2.1). На уровне AA для видео нужно и тифлокомментирование (1.2.5), если важная информация видна только в кадре, а не проговаривается.

• Звук длительностью более 3 секунд не включается автоматически без возможности его остановить (1.4.2).
• Движущийся или меняющийся контент, например карусель, можно остановить (2.2.2).
• Ничто не мигает чаще 3 раз в секунду (2.3.1).

12. Понятен ли текст и ясно ли, куда ведут ссылки?

Уровень WCAG AA не требует определённой сложности текста, но ясный язык помогает всем, особенно людям с когнитивными нарушениями. Пишите короткими предложениями, одна мысль — один абзац, а сложные термины поясняйте при первом упоминании.

• Текст ссылки говорит, куда она ведёт: «Условия доставки», а не «Нажмите здесь» (2.4.4).
• Меню на всех страницах расположено одинаково (3.2.3).
• Инструкции не опираются только на форму или расположение: не «нажмите зелёную кнопку справа», а «нажмите кнопку „Оформить заказ“» (1.3.3).

Как проверить сайт бесплатными инструментами?

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

Проверяйте не только главную страницу, но и типовые шаблоны: категорию, статью, форму, корзину. Для быстрого осмотра подойдёт список W3C Easy Checks.

С чего начать, если сайт старый?

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

Если тема устаревшая и производитель её больше не обновляет, часто разумнее её заменить, чем латать. Saitai.lt обновляет сайты на WordPress, Joomla, WooCommerce и VirtueMart, меняет темы, переделывает формы и меню — подробнее на странице об обновлении и редизайне сайта. Если сначала хотите узнать, что нужно исправить, проверка доступности сайта по WCAG 2.2 AA стоит от 120 € и обычно занимает 1–3 рабочих дня. При разработке нового сайта контраст, размеры шрифтов и стили фокуса закладываются уже на этапе дизайна.

Источники

• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, рекомендация от 5 октября 2023 г.: w3.org
• W3C WAI, что нового в WCAG 2.2: w3.org
• W3C WAI, Easy Checks — первичная проверка доступности: w3.org
• WebAIM, инструмент проверки контраста: webaim.org
• WebAIM, инструмент проверки доступности WAVE: wave.webaim.org
• NV Access, бесплатный скринридер NVDA: nvaccess.org

Планируете обновить сайт и устранить барьеры доступности? В форме заявки укажите адрес сайта и систему, на которой он сделан. В течение 1 рабочего дня ответим, с чего лучше начать: с проверки доступности сайта (от 120 €) или сразу с обновления сайта.