Проверка доступности сайта для людей с ограниченными возможностями: W3C стандарты

Что такое доступность сайта для людей с ограниченными возможностями? Как проверить сайт на доступность? Практические советы, на что следует обратить внимание при разработке каждого элемента дизайна сайта, чтобы избежать ошибок в доступности. Об этом подробнее в статье.

Для чего нужно ритейлерам проверять доступность сайта для людей с ограниченными возможностями

В развитых странах мира, в Америке и Европе в частности, вопрос доступности сайта для людей с ограниченными способностями очень критичен. Так как по статистике 15% жителей планеты имеют статус инвалида, а это более миллиарда человек.

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

• В США это раздел 508 Федерального Закона о реабилитации, который предписывает государственным организациям и агентствам создавать специальные цифровые приложения, чтобы их сервисами было удобно пользоваться и людям с ограниченными возможностями;
  
• В Австралии это Закон о дискриминации инвалидов;
  
• В Германии это Федеральное постановление о безбарьерных информационных технологиях и т.д.

‍

Так, например, в Америке был создан прецедент Национальной федерации слепых против магазинов Target по причине недоступности сайта компании для слепых. Компания согласилась урегулировать судебный процесс, оптимизировав их веб-сайт и выплатив 6 миллионов долларов в «Фонд возмещения убытков» коллективного иска и 3,7 миллиона долларов в качестве гонорара адвокатам.

Не учитывая людей с ограниченными возможностями при разработке интернет-магазина, бизнес не только теряет большую часть потенциальных покупателей, но и нарушает закон, если говорить о мировом рынке. Но вскоре это коснется и нашей страны, так как по данным инвалидизации в Украине 2,8 млн людей имеют статус инвалида и в 3,7% случаях причиной инвалидности являются болезни глаз.

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

Что такое стандарты WCAG?

W3C (World Wide Web Consortium) — это основанная в Америке в 1994 международная организация, которая занимается разработкой стандартов для сайтов и онлайн-сервисов. В 1997 году W3C запустила Web Accessibility Initiative (WAI), которая формулирует правила и условия доступности, например, WCAG (Web Content Accessibility Guidelines) 2.0, которые признаны международными стандартами — ISO: ISO/IEC 40500.

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

Что входит в понятие веб-доступности сайта согласно WCAG стандартам?

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

Познавательный процесс (Cognitive)

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

Руководство WCAG включает требования («критерии успеха»), касающиеся когнитивной доступности такие как адаптируемость, читабельность, навигация, и прочее.

Мобильная доступность (Mobile)

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

Руководство помогает решить ряд проблем, которые могут возникнуть при использовании различных гаджетов, например:

• Использование сенсорных экранов разных размеров;
  
• Разные способы ввода (голосовое управление, 3D-касание с помощью датчиков давления, и т.д.);
  
• Различные условия использование устройств (в темноте, ярком освещении, и т.д.).
  

Главные стандарты и рекомендации по доступности сайтов и онлайн-сервисов

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

Воспринимаемость информации и пользовательского интерфейса

Важно оформить контент таким образом, чтобы пользователи могли его воспринимать различными органами чувств — зрение, слух, осязание.

Альтернатива нетекстового контента

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

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

Альтернативы для мультимедиа

• Добавьте транскрипт соответствующего контента для аудиофайлов (подкасты, MP3-файлов и т.д.).
  
• Предоставьте стенограмму или аудиоописание соответствующего контента для видео, не предназначенного для прямого эфира и если видео не носит декоративный характер.
  
• Добавьте синхронизированные субтитры для видео, которые содержат аудио (видео YouTube, аудио-трансляции, веб-трансляции, видеоконференции и т.д.).
  
• Предоставьте расшифровку стенограммы или аудиоописания видео.
  
• Добавьте видео на языке жестов для мультимедийных материалов, содержащих аудио.
  
• Если нет возможности добавить аудиоописание к видео из-за синхронизации аудио (например, недостаточное количество пауз в аудио), то стоит сделать альтернативную версию видео с паузами, чтобы можно было создать аудиоописание.
  

Различные способы представления контента

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

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

• Используйте семантическую разметку для обозначения заголовков (<h1>), списков (<ul>, <ol> и <dl>), выделенного или специального текста (<strong>, <abbr>, <code>, <blockquote>, и т.д.).
  
• Сделайте порядок чтения и навигации (определяется порядком кода) логичным и интуитивно понятным.
  
• Сгруппируйте связанные элементы формы с помощью набора полей или легенды. Можно использовать маркировку ARIA, когда стандартного HTML недостаточно.
  
• Используйте таблицы, где ячейки данных связаны с их заголовками, а заголовки таблиц данных, если они есть, связаны с таблицами данных.
  
• Не делайте инструкции, которые основаны исключительно на сенсорных характеристиках (цвет, форма, размер, визуальное расположение и т.д.).
  
• Реализуйте сайт так, чтобы ориентация не ограничивалась только книжной и альбомной.
  
• Добавляйте соответствующий атрибут автозаполнения в поля ввода, которые собирают определенные типы информации о пользователях.
  
• Используйте области HTML5 или ориентиры ARIA для определения областей страницы.
  
• При необходимости используйте ARIA для улучшения семантики HTML, чтобы лучше идентифицировать назначение компонентов интерфейса.
  

Контент сайта легче видеть и слышать

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

• Выделяйте ссылки от окружающего текста не только цветом, но делайте дополнительное различие (например, ссылка становится подчеркнутой при наведении).
  
• Предоставьте возможность регулировать громкость и выключить аудио, а также поставить воспроизведение на паузу при необходимости.
  
• Обеспечьте достаточный контраст контента, используя различную комбинацию цветов и отделение фона от переднего плана, и т.д.
  
• Обеспечьте, чтобы межстрочный интервал не менялся и информация и данные не терялись при увеличении страницы до 400%.
  
• Предусмотрите адаптивный дизайн для сайта. Это необходимо, чтобы текст, структура и прочий контент корректно отображался на всех устройствах.
  
• 3:1 — это минимально допустимый коэффициент контрастности для различения графических объектов (таких, как значки и компоненты диаграмм, графиков) и настраиваемых автором компонентов интерфейса кнопки, индикаторы фокуса, и прочее).

‍

Управляемость навигации по сайту и пользовательского интерфейса

Доступность функциональности сайта и страницы с клавиатуры

Дайте пользователям возможность использовать клавиатуру как основной способ доступа к функциональности сайта:

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

Нет ограничений по времени для ознакомления и использования контента

Некоторым людям нужно больше времени для ознакомления с контентом и использования его. Поэтому предоставьте пользователям достаточно времени для чтения и использования контента.

• Если у страницы или приложения есть ограничение по времени, предоставьте пользователю возможность отключить, отрегулировать или продлить этот срок.
  
• Дайте пользователю возможность приостановить или остановить автоматическое перемещение, мигание или прокрутку содержимого (например, каруселей, шатров или анимации), которое длится более 5 секунд.
  
• Если есть автоматическое обновление контента (например, динамически обновляемая лента новостей, сообщения чата и т.д.), предоставьте пользователю возможность приостановить, остановить или вручную контролировать время обновлений.
  
• Дайте возможность пользователю отложить и отменить прерывания в сеансе (предупреждения, обновления страниц и т.д.) за исключением случаев, когда они необходимы.
  
• Если сеанс аутентификации истекает, пользователь может повторно пройти аутентификацию и продолжить действие без потери каких-либо данных с текущей страницы.
  
• Предупреждайте пользователей о любом тайм-ауте, который может привести к потере данных, если только данные не сохраняются в течение 20+ часов бездействия пользователя.
  

Безопасность контента

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

• Дайте пользователям возможность отключить несущественную анимацию и движение.
  
• Предупреждайте пользователя о мигающем или анимированном контенте и предлагайте альтернативу.
  
• Не используйте контент, который мигает более 3 раз в секунду, допустимо если мигающее содержимое достаточно маленькое, а вспышки имеют низкую контрастность, не содержат слишком много красного.
  

Доступность навигации

Обеспечьте легкую и понятную навигацию, чтобы пользователь мог не только ориентироваться где он находиться, но и без труда перемещаться по сайту:

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

Доступность ввода

Упростите пользователям управление функциональными возможностями сайта не только с клавиатуры, но и других способов ввода (речевой ввод, активация касанием, и т.д.):

• Дайте возможность заменить жесты, которые требуют точности и ловкости, на менее точные.
  
• При разработке компонентов и элементов сайта, исключите случайную активацию и предоставьте функцию отмены последнего действия.
  
• Сделайте все активные компоненты (все кнопки, ярлыки, ссылки, и прочее) на достаточном расстоянии друг от друга и достаточного размера, чтобы пользователю было удобно активировать их касанием.
  
• Дайте возможность активации функциональности с помощью компонентов пользовательского интерфейса.
  
• Реализуйте поддержку функции активации голосом.
  

Понятная информация и пользовательский интерфейс

Читабельность и простота восприятия текста

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

• Используйте атрибут HTML lang (например, <html lang = "en">), чтобы определить основной язык сайта или страницы, и атрибут lang (например, <blockquote lang = "es">) для определения языка содержимого страницы на другом языке.
  
• Реализуйте механизм для определения конкретных определений слов или фраз, используемых необычным или ограниченным образом, включая идиомы и жаргон.
  
• Предоставьте определения и расшифровку для сокращений, необычных слов, фраз, идиом и т.д.
  

Загрузка и работа страницы происходит предсказуемым и ожидаемым образом

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

• Располагайте элементы навигации на ожидаемом месте.
  
• Убедитесь, что не происходит существенных или резких изменений на странице (появление pop-up, смещение фокуса, и т.д.) при вводе данных или взаимодействии с элементом управления.
  
• Не меняйте названия компонентов навигации или пользовательского интерфейса.
  
• Убедитесь, что только после согласия пользователя все важные изменения вступают в силу.
  

Помощь при вводе данных

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

Надежный контент и надежная интерпретация (Совместимость)

Контент должен быть совместим с браузерами и вспомогательными технологиями:

• Исключите существенные ошибки проверки и синтаксического анализа HTML — можно проверить на  http://validator.w3.org/.
  
• Обеспечьте надежную интерпретацию разметки, например, реализовав проверку валидности. Соблюдайте спецификации HTML и использование форм, меток форм, заголовков фреймов и т.д.
  
• Используйте ARIA для повышения доступности, когда HTML недостаточно.
  

Оценка и проверка доступности сайта для людей с ограниченными возможностями

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

Входной контроль

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

Инструменты

Существует более 100  инструментов оценки веб-доступности — это программы и онлайн-сервисы, которые помогают определить, соответствует ли веб-контент стандартам доступности такие как A-Tester, A11y-sitechecker, AATT (Automated Accessibility Testing Tool), Access Analytics, EqualWeb, Little Forest index (LFi), и многие другие.

Оценка соответствия и отчеты (аналитика)

Используйте описанные выше рекомендации или оригинальный документ «Руководство по доступности веб-контента» для проведения оценки соответствия сайта или приложения стандартам WCAG. Также важно собирать данные аналитики, чтобы измерить эффективность улучшений и изменений дизайна сайта.

Фидбек пользователей

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

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

Эта статья основана на WCAG 3.5.1, которая была обновлена 4 октября 2019. Сейчас эта версия руководства по доступности находится в работе и наша команда будет следить за обновлениями и изменениями.

References:
https://www.w3.org/WAI/WCAG21/quickref/
https://www.w3.org/WAI/  
https://www.w3.org/TR/coga-usable/
https://www.w3.org/WAI/test-evaluate/
https://www.w3.org/WAI/fundamentals/accessibility-intro/ru
https://www.w3.org/Translations/WCAG20-ru/WCAG20-ru-20130220/#seizure
https://en.wikipedia.org/wiki/World_Wide_Web_Consortium
https://www.w3.org/TR/?tag=accessibility