Однако, подобные вспомогательные технологии нельзя отождествлять с доступностью. Когда ориентируются на одну категорию людей, игнорируя других, это не про доступность. Разрабатывать и внедрять все новые и новые дополнения для разных групп — не лучшее решение. К тому же некоторые вещи нельзя реализовать в автоматическом режиме (напр., указывать правильный альтернативный текст к картинкам). Выход — сайт изначально должен разрабатываться доступным для всех, вне зависимости от их физического состояния и возможностей.
— 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.
Но юридические требования, на мой взгляд, не должны быть главным мотиватором к переходу на доступные сайты. Если в центр бизнеса компания ставит клиента, то доступность — логическое следствие организации работы. Кроме того, от доступности выигрывают все пользователи, независимо от их текущего физического состояния.
Грядет время, когда серфить в интернете будут с помощью голосовых помощников. Управлять навигацией, понимать содержимое доступных сайтов в этом случае будет проще.
Есть и другие выгоды, которые приносит доступность условно здоровым людям. Например:
Субтитры в видео помогут людям с нарушением слуха, но также всем, кто смотрит видео в шумном помещении или без возможности включить звук. Видео с субтитрами лучше воспринимаются. Внутренние тесты Facebook показали, что субтитры увеличивают просмотр видеорекламы в среднем на 12%.
Правильный цветовой контраст поможет не только людям с нарушениями цветового восприятия. Всем пользователям станет легче читать текст на маленьком экране или при ярком освещении.
Если на сайте реализована возможность управления с помощью клавиатуры, то пользователь откроет выпадающее меню сайта даже когда в беспроводной мышке села батарейка.
Понятные и простые в навигации доступные сайты улучшают поведенческие факторы. Пользователи легко схватывают, что хочет сказать компания. Маркетологи быстрее донесут до аудитории идею бренда.
Я познакомился с техническими спецификациями и обнаружил, что соблюдение базовых принципов доступности не требует значимых затрат. Например, верстая макет вы знаете, что нельзя использовать светлый шрифт на светлом фоне. Сколько денег потребуется, чтобы заменить цвет шрифта на более контрастный? Нисколько. Вы сразу выберете правильный «диапазон» цветов. И так со всеми базовыми требованиями. Минимальными усилиями можно значимо улучшить доступность сайтов.
В 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>, при использовании скринридера пользователь может подумать, что он пропустил важные блоки информации.
Человек, который слушает сайт, строит в голове его структуру. Если основные блоки меняются на каждой странице или структура обновляется каждую неделю, освоить сайт сложно.
Если текст состоит из широко распространенных слов и коротких предложений, для его понимания, как правило, не требуются развитые способности к чтению. Легче такой текст воспринимать и на слух через речевой синтезатор. Поэтому:
Используйте простой язык.
Пишите короткими фразами.
По возможности избегайте метафор и идиом.
Избегайте жаргонов. К терминам и мало известным словам добавляйте определения.
В блоге есть статья «Полезные ссылки для тех, кто пишет». Вы можете ее использовать в подготовке материалов для ваших ресурсов.
Если размещаете ссылку, объясните, что ожидает пользователя, который по ней перейдет. Бывает, на сайте разместили иконки соц. сетей. Оформили как ссылки. Визуально понятно, куда человек перейдет по клику, но на слух — нет.
«Подписать» ссылки недостаточно. Текст должен быть информативным. Пользователь не должен кликать по ссылке, чтобы понять, куда она приведет. Поэтому, например, ссылка «подробнее» не так полезна, как ссылка «больше информации об услугах компании».
Плохо | Хорошо |
---|---|
Скачайте здесь | Скачайте с сайта группы компаний Sarmont |
О маркетинге я пишу тут | Я веду блог о маркетинге |
Он выложил новый ролик | Он выложил новый рекламный ролик AIDA Pioneer |
Люди с нарушениями зрения могут использовать программы для чтения с экрана. Если на сайте нет альтернативного текста для изображений, пользователи скринридеров не смогут воспринять контент. Поэтому, если размещаете картинку, добавьте краткое описание того, что изображено, или укажите назначение картинки.
Публикуете видео — добавьте субтитры для тех, кто не может слышать аудио.
Убедитесь, что все текстовые элементы имеют достаточный цветовой контраст между текстом на переднем плане и цветом фона за ним. Если он не будет достаточным, пользователь не увидит текст или для восприятия страницы ему нужно будет приложить больше усилий.
Инструменты, с помощью которых можно выявить проблемные зоны:
Color Contrast Accessibility Validator Введите адрес веб-страницы. Сервис покажет проблемы цветового контраста (при наличии).
Contrast Checker Нужно ввести цвет шрифта и фона в формате RGB (например, #FD3 или #F7DA39). Сервис покажет, допустимо ли такое сочетание.
WCAG Color contrast checker Расширение для браузера Chrome. Кликнув по значку расширения, вы получите оценки контрастности всех элементов страницы.
Дизайнеры часто используют цвет для привлечения внимания или выделения важных информационных блоков. Это нормально, но в некоторых случаях такой принцип не работает. Например, если на сайте ссылки не подчеркиваются, то человек может их не видеть. Если на графике продукт A обозначен красной линией, а продукт B — зеленой, для части аудитории это будут две одинаковые линии.
— Чтобы перейти в корзину, кликайте на красную кнопку.
— Подскажите теперь, какая из кнопок красная.
«Что такое доступность?» | MDN Web Docs
«Принципы доступности» | W3C
Пандус для сайта Статья Ивана Бакаидова. У него ДЦП, самопроизвольно сокращаются мышцы тела, неразборчивая речь. Программист, пишет приложения для неговорящих людей.
Доступность и закон. Разбор законов и стандартов по веб-доступности
Веблайнд — рекомендации по разработке сайтов для людей с нарушениями зрения
статьи WebAIM (англ.)
блог A11Y Project (англ.)
блог компании AudioEye (англ.)
блог компании UserWay (англ.)
WAVE расширение браузера (для Chrome, Firefox, Edge) — оценивает доступность веб-страниц непосредственно в браузере