Автор: Дмитрий Бартошевич (мою фамилию часто пишут как Барташевич)

Доступность сайтов — новая норма

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

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

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

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

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

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

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

MDN Web Docs

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

  • У клиента с возрастом ослабло зрение, он сможет пользоваться моим сайтом?

  • Если человек сломал руку и сидит один на больничном, он сможет заказать у нас продукты домой?

  • Поймет ли пользователь, о чем видео, если будет смотреть в шумном помещении?

  • Если у пенсионера монитор с плохой цветопередачей, он найдет ссылку без посторонней помощи?

  • Удобно ли молодой маме вызвать такси через наше приложение, если у нее свободна только одна рука?

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

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

Что говорит закон о доступности

В Беларуси с 2010 года действует «Положение о порядке функционирования интернет-сайтов государственных органов и организаций». Доступность сайта для инвалидов по зрению — одно из требований. Существует также стандарт СТБ 2304-2013 «Интернет-ресурсы. Общие требования доступности для инвалидов по зрению». Как контролируют исполнение этих требований государственными организациями и контролируют ли, не знаю.

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

В США, например, действует Закон об американцах с ограниченными возможностями (Americans with Disabilities Act (ADA)). Закон распространяется, в том числе, на сайты коммерческих предприятий. В 2021 году против компаний, чьи сайты не соответствовали требованиям доступности, было подано 2 352 иска (отчет accessibility.com, англ.).

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

*UserWay — один из лидеров в сфере технологий обеспечения доступности веб-сайтов. В числе их клиентов Disney, eBay, Coca-Cola, Unicef, Wallmart.

Скриншот письма с оценкой доступности сайта bartoshevich.by
письмо UserWay

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

Преимущества доступности для условно здоровых

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

Есть и другие выгоды, которые приносит доступность условно здоровым людям. Например:

  • Субтитры в видео помогут людям с нарушением слуха, но также всем, кто смотрит видео в шумном помещении или без возможности включить звук. Видео с субтитрами лучше воспринимаются. Внутренние тесты Facebook показали, что субтитры увеличивают просмотр видеорекламы в среднем на 12%.

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

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

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

Базовые принципы доступности

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

Используйте семантические HTML теги

В HTML есть семантические теги, которые точно описывают цель элемента и тип заключенного в них контента. Они помогают скринридерам правильно считывать страницы сайта. Если, например, на странице нет тега <nav>, скринридер может не узнать, где на сайте меню.

Допускаю, многим этот пункт покажется непонятным. «Я же не разработчик, зачем мне это?» Я хочу обратить внимание на цену вопроса. Использовать семантические теги, это, например, вместо <div class="header"></div> написать <header></header>. Как видите, если придерживаться доступности с самого начала разработки, семантические теги не потребуют сверхусилий.

Используйте заголовки как элемент структуры документа

Иногда веб-разработчики используют теги заголовков (<h1>, <h2>, <h3> и т.д.), чтобы сделать текст крупнее, заметнее. От подобной практики следует отходить. Заголовки — это не про дизайн, а про структуру страницы. В идеале, если выписать заголовки страницы, должна получиться связная история. Скринридер прочтет заголовки и у пользователя сложится представление о содержимом.

Заголовки желательно располагать в последовательном порядке. Сначала заголовок первого уровня (<h1>). Он отражает основную цель страницы. Заголовки второго уровня (<h2>) разбивают страницу на разделы. Заголовки третьего уровня (<h3>) делят содержание блока под тегом <h2>. Каждый новый уровень заголовков более детально раскрывает предыдущий.

<h1> Как влиять на решения о покупке в точках продаж </h1> 
	<h2> Покупатель рациональный — миф </h2>
	<h2> Задача маркетолога в рознице </h2>
		<h3> Стать визуально большим и выделяющимся </h3>
		<h3> Использовать ассоциативные связи </h3>
		<h3> Подсказать критерии выбора </h3>
		<h3> Влиять на эмоции </h3>
	<h2> Ритейл-маркетинг и брендинг </h2>

Если на странице нарушена иерархия заголовков, например, если страница переходит от тега <h1> сразу к тегу <h4>, при использовании скринридера пользователь может подумать, что он пропустил важные блоки информации.

Придерживайтесь единообразия в структуре

Человек, который слушает сайт, строит в голове его структуру. Если основные блоки меняются на каждой странице или структура обновляется каждую неделю, освоить сайт сложно.

Пишите ясно

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

  • Используйте простой язык.

  • Пишите короткими фразами.

  • По возможности избегайте метафор и идиом.

  • Избегайте жаргонов. К терминам и мало известным словам добавляйте определения.

В блоге есть статья «Полезные ссылки для тех, кто пишет». Вы можете ее использовать в подготовке материалов для ваших ресурсов.

Размещайте текстовые версии для нетекстового контента

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

Публикуете видео — добавьте субтитры для тех, кто не может слышать аудио.

Обеспечьте достаточный цветовой контраст

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

Инструменты, с помощью которых можно выявить проблемные зоны:

  • Color Contrast Accessibility Validator Введите адрес веб-страницы. Сервис покажет проблемы цветового контраста (при наличии).

  • Contrast Checker Нужно ввести цвет шрифта и фона в формате RGB (например, #FD3 или #F7DA39). Сервис покажет, допустимо ли такое сочетание.

  • WCAG Color contrast checker Расширение для браузера Chrome. Кликнув по значку расширения, вы получите оценки контрастности всех элементов страницы.

Не полагайтесь только на цвет

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

— Чтобы перейти в корзину, кликайте на красную кнопку.

— Подскажите теперь, какая из кнопок красная.

Дополнительные материалы