Что такое доступность. Часть третья

11 April

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

Что такое доступность. Часть третья

Почему вас вообще должна волновать доступность?

Закон

Адвокаты охотно берутся за подобные иски, потому что суды практически всегда встают на сторону истца. Например, американская компания Bag’n Baggage была вынуждена заплатить 4000 $ истцу, который не смог совершить покупку на их сайте с низким уровнем доступности. В каждой стране есть свои законы, касающиеся доступности. В конце статьи вы найдете ссылки на политики различных стран в отношении веб-доступности.

Моральные нормы

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

Потеря прибыли

Согласно Всемирной организации здравоохранения, около 15% населения Земли имеют тот или иной физический недостаток. Это, на минуточку, 1,1 млрд людей — существенная доля рынка.

Какие виды бизнеса попадают под суд чаще всего?

Согласно 3PlayMedia, в особой зоне риска находятся компании, занимающиеся предоставлением следующих услуг:

  • розничная торговля,
  • общественное питание,
  • путешествия,
  • банковские услуги.

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

  • федеральный закон №419-ФЗ,
  • федеральный закон №8-ФЗ,
  • Приказ Министерства связи и массовых коммуникаций России №483,
  • ГОСТ Р528720-2012. Интернет-ресурсы. Требования доступности для инвалидов по зрению.

Разъяснения по каждому пункту вы найдёте в статье «Доступность и закон» от сообщества Web Standarts — мы оставим её в самом конце.

Вашему бизнесу нужен сайт, который не создаст вам проблем с законом? Пишите на почту: hello@adcillc.com.

Принципы доступного дизайна

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

Согласно WCAG 2.1 (Web Content Accessibility Guidelines, Руководство по обеспечению доступности веб-контента), ваш сайт или приложение должны соответствовать четырем основным принципам: воспринимаемости, управляемости, понятности и надёжности.

Существует три уровня соответствия: А, АА и ААА. В большинстве случаев выполнения требований уровня АА хватает, чтобы обезопасить себя от проблем с законом. Мы рассмотрим положения уровней А и АА, которые, по нашему опыту, нарушаются чаще всего.

Контент не должен иметь проблем с воспринимаемостью

  • Весь нетекстовый контент должен по возможности иметь текстовые аналоги.
  • Аудио- и видеоконтент должен быть с субтитрами.
  • Последовательность чтения должна быть понятной и очевидной, в противном случае её необходимо установить на программном уровне.
  • Цвета, формы и звуки не должны быть смыслообразующей частью контента. Одни люди не различают цвета, другие имеют проблемы со слухом, а некоторые не способны мыслить сложными логическими структурами по возрастным причинам либо из-за проблем с психикой.
  • Коэффициент контрастности текста и изображений должен быть не ниже 4.5:1.
  • Текст должен легко увеличиваться в 2 раза без применения дополнительных средств.

Контент должен быть управляемым

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

Контент должен быть понятным

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

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

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

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

Чек-лист доступности

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

Ваш сайт должен быть воспринимаем зрением, слухом и/или осязанием

  • Встроенный мультимедиа-контент (аудио, видео) определяется через доступный текст?
  • Можно ли описать кнопки в формах словами?
  • Для записанного аудио-контента (mp3-файлов, аудиоподкастов и т. п.) есть расшифровка?
  • Для видео-контента, если он не декоративный, есть аудио- или текстовая расшифровка?
  • Текст и изображения текста имеют контрастность в отношении как минимум 4,5:1?
  • Если в интерфейсе есть кастомизированные элементы управления, они имеют контрастность в отношении как минимум 3:1 в разных состояниях (фокус, при наведённом курсоре, активное состояние и т. п.)?

Формы, элементы управления и навигации должны быть управляемыми

  • Вся функциональность страницы доступна с помощью клавиатуры? Исключение — функциональность, которой нельзя пользоваться с помощью клавиатуры (например, рисунок от руки).
  • Фокус клавиатуры не заблокирован или не застрял на каком-то одном элементе страницы?
  • Можно ли остановить или спрятать автоматически перемещающийся, мигающий или прокручивающийся контент (фото-карусели, анимацию и т. п.) дольше чем на 5 секунд?
  • Может ли частота вспышек у вспыхивающего контента быть не чаще 3 раз в секунду? Исключение — ощутимо мелкий контент и вспышки, которые имеют низкую контрастность и не содержат слишком много красного.
  • Доступны ли как минимум две опции поиска страниц из этого списка: список похожих страниц, содержание, карта сайта, поиск или список всех доступных страниц?
  • Очевидно ли с визуальной точки зрения, на какой элемент страницы сейчас наведён фокус? Например, если вы перемещаетесь по странице с помощью клавиши Tab, то вам должно быть понятно, где вы находитесь.
  • Может ли функциональность вашего сайта или приложения запускаться в одно касание, если нет необходимости запускать её пинчем, свайпом и другими жестами, требующими нескольких движений?
  • Может ли функциональность, которая запускается перемещением устройства (тряской или панорамным движением) или движением пользователя (взмахом перед камерой), быть недоступна и дублироваться через обычные элементы управления вроде кнопок?

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

Язык страницы определяется через HTML-атрибут lang?

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

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

Удалось ли избежать значительных ошибок в валидации или парсинге HTML и XHTML-кода?

Доступность и Drupal

Итак, вы поняли, что вам нужен сайт, адаптированный под стандарты доступности. Что дальше?

Мы часто рекомендуем использование Drupal CMS, так как большое количество опций доступны прямо из коробки. Кроме того, комьюнити Drupal постоянно добавляет что-то новое.

Что может предложить Drupal?

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

Помимо этого существуют сторонние модули, ссылку на которые вы можете найти в заключительном разделе.

Полезные ссылки

Компания ADCI Solutions занимается веб-разработкой с 2007 года. За это время мы поработали над более чем 250 проектами, среди которых eCommerce, SaaS, CRM, сайты для малого и среднего бизнеса, клиник и музеев. Расскажите нам о своём бизнесе в электронном письме и отправьте его по адресу hello@adcillc.com, и мы соберём для вас команду дизайнеров и разработчиков для создания сайта, решающего ваши бизнес-задачи.

Подписывайтесь на наш блог в Яндекс Дзене и следите за нами на Medium, ВКонтакте и инстаграме.