Веб-доступность

По каким критериям оценивают веб-доступность?

Веб-доступность оценивают по международному стандарту WCAG (Руководство по доступности веб-контента) и основанному на нём корейскому стандарту KWCAG. WCAG разработан W3C, текущая рекомендация — версия 2.2, а в Корее применяется KWCAG версии 2.2.

Оба стандарта исходят из четырёх принципов. Названия у них сложные, но применительно к сайту заведения смысл простой.

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

Обязательна ли веб-доступность по закону для сайта небольшого заведения?

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

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

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

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

Как проверить контраст текста 4.5:1?

Контраст — это разница в яркости цвета текста и фона, выраженная числом; её сразу покажет бесплатный инструмент проверки контраста, если ввести два цвета. Критерий успеха 1.4.3 стандарта WCAG 2.2 требует не менее 4.5:1 для обычного текста и не менее 3:1 для крупного (от 18 пунктов, а для жирного — от 14 пунктов).

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

Логотипы и декоративные надписи под этот критерий не попадают. А вот текст, который клиент обязательно должен прочитать, — цены, часы работы, кнопки, — нужно проверить полностью.

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

Какую проверку доступности можно провести самому?

Даже без профессиональных инструментов базовые проблемы можно найти самостоятельно. Проверка ниже займёт 20–30 минут — нужны только компьютер и телефон.

Если заметили проблему, сделайте скриншот этого места и передайте веб-студии. Чем точнее вы объясните, в чём проблема, тем быстрее её исправят.

Если функция чтения с экрана произносит только «изображение» или «кнопка», значит, там не хватает описания или названия. Для клиента это непонятная кнопка, поэтому исправлять её нужно в первую очередь.

1. 01На компьютере без мыши, только клавишей Tab, перемещайтесь по меню и дойдите до записи или заявки.
2. 02Проверьте, видна ли при перемещении клавишей Tab отметка текущего положения — например, рамка.
3. 03Увеличьте масштаб браузера до 200% и проверьте, не наезжает ли и не обрезается ли текст.
4. 04Включите на телефоне функцию чтения с экрана (VoiceOver на iPhone, TalkBack на Android) и послушайте первый экран.
5. 05Проверьте в формах записи и заявки, подписано ли каждое поле и сообщается ли при ошибке, что именно введено неверно.
6. 06Если есть видео, проверьте, есть ли субтитры и понятно ли содержание без звука.

На что в доступности обратить особое внимание в разных сферах?

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

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

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

• Кафе · рестораны: если меню выложено только фотографией, программы экранного доступа не смогут его прочитать. Дублируйте блюда и цены текстом.
• Салоны: в форме записи выбор даты и времени не должен работать только мышью; подпишите поля ввода.
• Мастерские: добавьте субтитры к видео о занятиях, а список того, что взять с собой, и длительность продублируйте текстом.
• Онлайн-продажи: если карточка товара — одна длинная картинка, продублируйте главное (материал · размер · доставка) текстом.

Какие ошибки чаще всего совершают в веб-доступности?

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

Жаль, когда ограничиваются баллом автоматического инструмента. Инструмент показывает, «есть ли» описание к фото, но не может оценить, «верно ли оно написано», поэтому проверка человеком обязательна.

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

Что спросить у веб-студии о веб-доступности?

Если студия говорит, что «доступность соблюдена», получите результат: по какому стандарту и как проверяли. Это пригодится при будущих правках или передаче сайта другому подрядчику.

• До какого уровня вы соблюдаете стандарты доступности (WCAG · KWCAG)?
• Проверяете ли вы контраст текста на этапе дизайн-макета?
• Можно ли пройти запись · заявку до конца только с клавиатуры?
• Будет ли после запуска поле, где я смогу легко написать описание (alt) к загружаемому фото?