Советы, инструменты и примеры того, как надо и как не надо работать над
доступностью сайтов.ИЛЛЮСТРАЦИЯ: НАЗВАНИЕ САЙТА TE-ST, ВЫПОЛНЕННАЯ В
ВИДЕ ТЕКСТА ИШИХАРЫ. ИНСТРУМЕНТ: FRANCISCOUZO.GITHUB.IO/ISHIHARA/
Инна Суворова
ВРЕМЯ НА ЧТЕНИЕ  20 МИН
 11 МАРТА 2021
Как проверить, удобно ли пользоваться вашим сайтом людям с ограниченными
возможностями? Что почитать и на какие руководства полагаться в
разработке? Сколько стоит создать доступный сайт? В этой статье советы,
инструменты и примеры того, как надо и как не надо работать над
доступностью сайтов.
Эксперты, которые мне помогли в создании материала: Никита Цейковец,
Джуди Брюер, директор WAI, Анна Минаева из USABILITYLAB и Евгений
Альтовский, руководитель Информационно-аналитической службы, член
Правления общественного движения (ОД) «Информация для всех».
В России официально 12 млн человек с инвалидностью (по данным
Министерства труда России). Кроме того, некоторые особенности
восприятия, например, дислексия, инвалидностью не являются, но могут
помешать использованию Интернета.
Сложности, в первую очередь, испытывают люди со слабым зрением или
незрячие, люди с моторными нарушениями, а также, особенно в контексте
видеосервисов, инвалиды по слуху. С 2015 по 2018 год инвалидами по
зрению было признано 80,9 тысячи человек старше 18 лет. 56 тысяч
получили инвалидность из-за проблем со слухом. Более точных данных нет,
последняя общая статистика относится к 2009 году, а Всемирная
организация здравоохранения в своих отчетах обращает внимание на
ухудшение зрения у людей по всему миру. По их данным, сегодня 65
миллионов человек страдают слепотой или нарушениями зрения.
Поэтому о доступности интернет-ресурсов и приложений говорят много, и
постепенно, хотя иногда слишком медленно, мы двигаемся к созданию более
доступной онлайн-среды для людей с ограниченными возможностями.
Доступность сайта полезна гораздо большему количеству людей, чем это
может показаться на первый взгляд. Концепция, которой
следует WAI (Web Accessibility Initiative, некоммерческая организация,
занимающаяся разработкой стандартов доступности Интернета), звучит как
«Essential for some – useful for all» («Необходимо для некоторых –
полезно для всех»). То, что необходимо людям с ограниченными
возможностями, часто может быть нужно и удобно многим другим.
Возможность пользоваться ресурсом без использования мыши оценили все те,
кто когда-либо ломал руку. Родителям маленьких детей тоже очень удобно
иметь возможность пользоваться сайтом без мыши, приложением – одной
рукой – и держать в свободной руке ребенка. Пожилые люди гораздо
лучше ориентируются на сайтах с крупными кнопками, хорошим контрастом и
возможностью увеличить шрифты.
Простой и понятный интерфейс – это необходимая деталь для успеха у любой
целевой аудитории.
Как выглядит Интернет для людей с ограниченными возможностями?
Для начала представим себе, как выглядит текст для человека с дислексией.
Видеозапись с канала AbilityNet, имитирующая, как человек с дислексией
видит текст.
Что такое дислексия? Это расстройство, связанное с навыками чтения при
совершенно нормальном развитии интеллекта. Как такие люди чувствуют себя
в Интернете при условии, что это среда, где навигация происходит через
текст? Те, у кого дислексия в тяжелой форме, сталкиваются со сложностями
не только в использовании компьютера. Как снимать наличные в банкомате,
если в пин-коде не можешь отличить 6 от 9?
А вот очень беглое объяснение, как пользуются компьютером незрячие люди:
Видеозапись из блога «Занимательная повседневность», который ведут
незрячие супруги Михаил и Анна. На видео Анна показывает, как она
пользуется компьютером
Еще один способ взглянуть на сайт, чтобы понять, как он выглядит для
людей с различными проблемами со зрением, – расширение
для Chrome No Coffee. Его автор Аарон Левенталь работает в Google в
команде разработчиков браузера Chrome.
Например, вот так будет выглядеть сайт «Теплицы» глазами человека с
дальтонизмом:
скриншот с сайта «Теплицы социальных технологий» с плагином No Coffee
СКРИНШОТ С САЙТА «ТЕПЛИЦЫ СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ», ГДЕ ПРИМЕНЕН ПЛАГИН NO
COFFEE
То или иное нарушение цветовосприятия есть, по разным оценкам, у 2-8%
населения, в основном – у мужчин. Есть данные (Harrison, G.A. et al.,
1977 год, «Human Biology»), что у 9,2% русских мужчин есть
нарушения цветовосприятия. Но степень выраженности может быть очень
разной (многие узнают об этом вообще уже будучи взрослыми), проблемы в
восприятии информации в Интернете обычно возникают у людей с серьезными
нарушениями цветовосприятия.
Новые стандарты отрасли: курс на приложения
Мировыми стандартами доступности занимается WAI – Web
Accessibility Initiative, подразделение консорциума W3C, который под
руководством Тима Бернерса-Ли, изобретателя Всемирной паутины,
занимается развитием Сети.
Заметная часть этой работы – как раз развитие стандартов доступности.
Действующий стандарт WCAG 2.1 (Web Content Accessibility Guidelines,
Руководство по обеспечению доступности веб-контента 2.1) можно найти на
сайте WAI. Официального перевода на русский язык, признанного WAI, еще
нет, но есть неавторизованный перевод, его выполнило ОД «Информация для
всех», текст доступен на сайте ОД «Информация для всех».
Два новых стандарта 2.2 и 3 сейчас разрабатываются. Черновик WCAG 2.2
опубликован 11 августа 2020 года. По словам Джуди Брюер «в настоящее
время Web Accessibility Initiative (WAI) разрабатывает Руководство по
обеспечению доступности веб-контента (WCAG) 2.2, которое добавит больше
положений, касающихся доступности для людей с когнитивными нарушениями,
людей с ослабленным зрением, а также добавит больше положений для людей
с ограниченными возможностями, пользующихся мобильными устройствами и
приложениями». О разнице между версиями 2.1 и 2.2 можно почитать на
сайте «Тифлокомп».
WCAG 3 уже расшифровывается как W3C Accessibility Guidelines (WCAG) 3.0,
он опубликован 21 января 2021 года. Из названия пропало слово «контент»,
рекомендации станут более всеобъемлющими. Подробнее об изменениях,
которые уже на этом этапе можно понять из документа, можно узнать на
«Тифлокомп».
WCAG не содержит конкретных технических решений, это скорее чек-лист,
который описывает то, что нужно сделать разработчику сайта и на что
обратить внимание.
У WAI есть англоязычный онлайн-курс на edX, посвященный азам
доступности, обучение бесплатное, сертификат можно оплатить отдельно,
стоимость – 99 долларов США, что по текущему курсу чуть больше 7200 рублей.
Более детальные инструкции, описывающие механизмы обеспечения
доступности, содержатся в технических спецификациях Консорциума
Всемирной паутины. Прежде всего, это Accessible Rich Internet
Applications (ARIA). ARIA – это не столько руководство, сколько
спецификация ролей, атрибутов и свойств элементов, из которых
проектируется веб-интерфейс. Его можно использовать как справочник
дополнительных приемов, при помощи которых можно улучшить доступность в
плохо сделанном интерфейсе или изначально реализовать доступность
сложных элементов интерфейса, для которых нет типовых решений.
Российские стандарты
В России есть собственные стандарты создания доступных интернет-ресурсов
и приложений – это ГОСТ Р 52872-2019 «Интернет-ресурсы и другая
информация, представленная в электронно-цифровой форме. Приложения для
стационарных и мобильных устройств, иные пользовательские интерфейсы.
Требования доступности для людей с инвалидностью и других лиц с
ограничениями жизнедеятельности». Документ утвержден в августе 2019 года
и вступил в силу в апреле 2020 года. Судя по тексту документа, он
основан на стандарте WCAG 2.1 от WAI, а также содержит ссылки на другие
нормативные документы Российской Федерации.
В 2014 году также был принят федеральный закон № 419 «О внесении
изменений в отдельные законодательные акты Российской Федерации по
вопросам социальной защиты инвалидов в связи с ратификацией Конвенции о
правах инвалидов» – пакет поправок, признанный уравнять возможности
доступа к ресурсам людей с ограниченными возможностями.
Как на самом деле
Ситуация с доступностью сайтов все еще не очень оптимистичная, причем не
только в России, но и в мире. Как показывает Web Accessibility Annual
Report (ежегодный отчет о доступности сети Интернет), по крайней мере
98% меню веб-сайтов, 89% всплывающих окон и 83% кнопок не соответствуют
рекомендациям WCAG 2.1.
ГРАФИК ИЗ WEB ACCESSIBILITY ANNUAL REPORT, ДЕКАБРЬ 2019 ГОДА, КОТОРЫЙ
ПОКАЗЫВАЕТ – КАКОЕ КОЛИЧЕСТВО ЭЛЕМЕНТОВ ИНТЕРФЕЙСОВ В ИНТЕРНЕТЕ НЕ
СООТВЕТСТВУЕТ РЕКОМЕНДАЦИЯМ СТАНДАРТА WCAG 2.1
В Евросоюзе принята «Web Accessibility Directive» или «Directive (EU)
2016/2102» («Директива Европейского Парламента и Совета ЕС 2016/2102 от
26 октября 2016 года о доступности сайтов и мобильных приложений органов
публичного сектора»). Она обязывает сделать сайты, программное
обеспечение и приложения удобными и понятными для всех людей с
инвалидностью. Директива касается публичного
сектора, например, госучреждений, образовательных организаций. Частные
компании ей следовать не обязаны. Краткое путешествие по сайтам
правительств стран ЕС показывает, что директиве они следуют.
В США с 1973 года действует Закон о реабилитации инвалидов
(Rehabilitation Act), который запрещает дискриминацию в любой форме
людей с ограниченными возможностями. Секция 508 (Section 508),
посвященная обеспечению равных возможностей в использовании современных
технологий, появилась в этом законе аж в 1986 году.
А что в реальности? Показательным для американского рынка может быть
случай, когда компанию Domino Pizza через суд обязали сделать свое
приложение и веб-сайт доступными для незрячих.
Однако, как отмечает Buro of Internet Accessibility (США), даже
ежегодный отчет Департамента об образовании для президента и конгресса,
касающийся, в том числе, вопросов доступности образовательных
веб-сайтов… не отвечает стандартам оформления документов так, чтобы с
ними могли ознакомиться незрячие и слабовидящие. Например, к
иллюстрациям нет поясняющих текстов, а сам файл не подготовлен для
скрин-ридеров.
Но многое меняется к лучшему, в том числе и в России. Анна Минаева
говорит, что есть положительная динамика. Команда USABILITYLAB
проводит исследования доступности банковских мобильных приложений для
физических лиц с 2016 года. Количество проблем высокой критичности, не
позволяющих взаимодействовать с приложением в принципе, значительно
сократилось.
В 2016 году в некоторые из приложений было невозможно войти при
включенном экранном дикторе. Теперь, несмотря на то, что многие операции
по-прежнему недоступны или доступны плохо, доля критичных проблем
сокращается. Сейчас проблемам доступности уделяется большее внимание,
особенно в банковской сфере, в части мобильных приложений, поскольку это
сейчас наиболее динамично развивающийся канал дистанционного банковского
обслуживания.
— Анна Минаева
USABILITYLAB
Лидер среди банковских приложений – «Сбербанк», основываясь на своем
опыте улучшения доступности своих сервисов, запустил небольшой
проект «Гайдлайн», где рассказывает о своем опыте обеспечения равного
доступа к сервисам для всех клиентов банка.
В 2020 году многие российские государственные организации обратили
внимание на необходимость доработки своих сайтов для того, чтобы ими
могли пользоваться люди с ограниченными возможностями. Причина – не
только новый ГОСТ, но и вступившие в апреле 2020 года поправки в Кодекс
об административных правонарушениях, которые наделяют Роскомнадзор
правом штрафовать за нарушение прав людей с ограниченными возможностями
на доступ к информации.
Фонд «Искусство, наука и спорт» и инклюзивный проект Everland (мы о нем
регулярно рассказываем) с декабря 2019-го по апрель 2020 года провели
исследование доступности сайтов для уязвимых групп россиян, портал
Госуслуги получил высшие оценки. Подробнее об исследовании можно
прочитать на сайте фонда.
Пенсионный фонд РФ не попал в это исследование, но, как можно убедиться,
также проделал определенную работу по повышению доступности своих сервисов:
СКРИНШОТ САЙТА ПЕНСИОННОГО ФОНДА, ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ
Последнее обновление поддерживает https, но при переходе в Личный
кабинет доступный режим сайта исчезает. Надеемся, в ближайшее время это
будет исправлено.
Доступность – не бинарная категория
При разработке доступных веб-сайтов все эксперты сходятся в одном –
нужно следовать инструкциям. Доступность обеспечивается не только в
рамках взаимодействия «пользователь – сайт», многие используют
дополнительное ПО (например, программы экранного доступа, скринридеры –
от англ. screen reader), есть средства на уровне браузеров. Речь идет о
среде, и новый элемент – веб-сайт, чьи владельцы приняли решение
улучшить его доступность, – должен в эту среду вписаться, а значит –
играть по правилам, а не выдумывать что-то новое.
Есть хорошие новости. Первая: WCAG все требования по обеспечению
доступности группирует по трем уровням: А, АА, ААА. В большинстве
случаев стоит ориентироваться на средний, второй, уровень AA. Переход от
уровня к уровню не скачкообразный, постепенная доработка и улучшение
возможны и вполне приемлемы. Не обязательно полностью обновлять сайт,
чтобы сделать его доступнее для разных категорий пользователей.
Вторая хорошая новость – для обеспечения доступности в большей части
случаев достаточно следовать инструкции, а не искать креативных
нестандартных подходов.
Третья хорошая новость следует из второй – какого-то невероятного
удорожания стоимости разработки при создании сайта, удобного для людей с
ограниченными возможностями, не происходит. Более того, если такую цель
поставить до начала разработки, то особых сложностей и серьезного
удорожания проекта возникнуть не должно.
Некоторые сложности могут возникнуть в том случае, если сначала сделать
очень эффектный, необычный и не шаблонный сайт, а потом уже задуматься о
том, как его воспринимают скринридеры.
Доступность – это не только про веб-сайты
Если в области именно создания доступных сайтов за 2020 год не случилось
прорывов, то разработчики браузеров и вспомогательного ПО на месте не
стоят. Хотя, конечно, их разработки интересны скорее конечным
пользователям и помогают преодолеть несовершенство веб-сайтов.
Как отмечает Джуди Брюер, WAI, «Разработчики могут многое сделать, чтобы
их продукты и сервисы обеспечивали повышение доступности для людей с
ограниченными возможностями».
Например, в последнем обновлении Apple добавлена функция «Язык жестов»,
и мессенджер FaceTime теперь определяет, что кто‑то из участников
разговора использует язык жестов, а во время групповых видеозвонков
видео такого участника фиксируется на экране.
В целом Apple, производя одновременно «железо» и программное
обеспечение, по умолчанию предлагает своим пользователями набор удобных
функций, которые могут пригодиться не только людям с ограниченными
возможностями, хотя предназначены, в первую очередь, для них. Например,
для неслышащих и слабослышащих устройство Apple может распознать звук
пожарной сигнализации или звонка в дверь и прислать уведомление об этом.
И, кстати, описывает эти функции понятным языком.
Для мобильных устройств есть встроенные скринридеры VoiceOver (iOS)
и TalkBack (Android), они периодически обновляются. Как отмечает Анна
Минаева, USABILITYlab, незрячие пользователи отмечали хорошее качество
озвучивания в телефонах Samsung по сравнению с другими
производителями Android-телефонов.
Для пользователей, у которых компьютеры не от Apple, существуют
другие скринридеры. Один из самых популярных среди бесплатных
– NVDA (Non-Visual Desktop Access).
Многие функции, которые относятся к Accessibility, могут быть полезны
кому угодно, например, режим чтения в Safari, который отрезает рекламу и
лишнюю информацию.
Кстати, такая же опция есть в большинстве браузеров, в FireFox, Opera,
Edge и в Chrome, где ее нужно активировать на странице .
В этом режиме можно выбрать размер и вид шрифта, а также разные виды
фона, облегчающие чтение, особенно длинных текстов.
Браузеры тоже совершенствуют практики взаимодействия «пользователь –
сайт» с помощью собственных встроенных средств. Ссылки на страницы с их
описанием: Mozilla (FireFox), Microsoft Edge, Chrome.
Chrome от Google предлагает своим пользователям набор расширений для
браузера, которые могут помочь людям в его использовании (скринридеры,
лупы, настройки тем и цветов).
Как проверить доступность сайта?
Для проверки сайта на предмет его доступности и удобства для людей
с ограниченными возможностями есть три взаимодополняющих варианта.
1. Формально проверить сайт на соответствие существующим требованиям.
Здесь, например, вам поможет хороший чек-лист на habr.
2. Задействовать автоматическую проверку специальными валидаторами,
которые проверяют верстку и указывают на типовые ошибки. Здесь можно
воспользоваться либо соответствующими инспекторами доступности из
инструментов разработчика в браузерах, например, Chrome
или Firefox, либо каким-то внешним инструментом, например, Axe или WAVE.
Вот так выглядят результаты проверки сайта Пенсионного фонда
в Accessibility Inspector, встроенный в FireFox по умолчанию,
проверяющий соответствие стандартам WCAG.
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ИНСТРУМЕНТА ACCESSIBILITY INSPECTOR
(FIREFOX).
Удобно, что к каждому не соответствующему стандартам элементу можно
посмотреть описание ошибки. Какие-то из них можно легко и быстро поправить.
Axe – это плагин для браузера Chrome. Результат его работы с сайтом
Пенсионного фонда тоже показателен:
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE ДЛЯ CHROME.
Плагин нашел 9 ошибок, среди них ни одной критической. Это отличный
результат.
Версия для людей с ограниченными возможностями также содержит 9 ошибок,
но серьезных ошибок на одну меньше.
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE ДЛЯ CHROME ДЛЯ
АДАПТИРОВАННОЙ ВЕРСИИ САЙТА ПЕНСИОННОГО ФОНДА
Для сравнения, сайт «ВКонтакте» содержит 41 критическую ошибку:
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE НА САЙТЕ «ВКОНТАКТЕ».
При выборе вкладки «Специальные возможности», которая, видимо, должна
адаптировать интерфейс к вспомогательным технологиям, количество ошибок
уменьшается незначительно:
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE НА САЙТЕ «ВКОНТАКТЕ» ПОСЛЕ
ВЫБОРА ОПЦИИ «СПЕЦИАЛЬНЫЕ ВОЗМОЖНОСТИ».
Социальные сети могут сделать Интернет доступнее. В январе Facebook
сообщил об обновлении своего инструмента Automatic Alternative Text
(AAT, автоматический альтернативный текст). Нейросеть, натренированная
на миллиардах изображений и хэштегов в Instagram, позволяет описать
изображение, к которому нет альтернативного текста. Причем она учитывает
культурную специфику, например, «узнает» на фотографии свадьбу, даже
если невеста не в белом платье.
Для использования WAVE ничего дополнительно устанавливать не требуется,
вы просто заходите на сайт проекта и вводите ссылку на интересующий
ресурс. Вот так выглядит результат анализа сайта Пенсионного фонда:
РЕЗУЛЬТАТ РАБОТЫ СЕРВИСА WAVE НА ПРИМЕРЕ САЙТА ПЕНСИОННОГО ФОНДА РФ.
Разработчик сразу может посмотреть, где ошибки, и их поправить.
РЕЗУЛЬТАТ РАБОТЫ СЕРВИСА WAVE НА ПРИМЕРЕ АДАПТИРОВАННОЙ ВЕРСИИ САЙТА
ПЕНСИОННОГО ФОНДА РФ.
Недостаток WAVE – невозможно полноценно проверять сайты, которые требуют
авторизации, например, большинство соцсетей.
3. Проверка специалистов. Сервисы помогают оценить, что вообще
происходит с сайтом. Что-то можно поправить сразу, но если доступность
сайта в приоритете, то лучше заказать экспертизу доступности у
специалиста. Он вручную, как обычный пользователь, проверит, как сайт
открывается в разных браузерах и как работает со вспомогательным
программным обеспечением. Это позволит найти проблемы, которые не
вычислить с помощью автоматической проверки и чек-листа.
Самый надежный способ – реализовать все три пункта. Сначала проверить по
списку и исправить те ошибки, которые выдают сервисы, а потом поручить
экспертизу специалисту по доступности. Даже очень эмпатичный и
старательный разработчик, который в курсе всех правил, ГОСТов и
регламентов, все равно не в состоянии полностью воспроизвести тот
вариант взаимодействия с сайтом/приложением, который проходят
пользователи с теми или иными ограничениями.
Так как сайты дорабатываются и обновляются с течением времени, не всегда
при этом учитывая стандарты доступности, то проверку нужно проводить
регулярно.
Кстати, примеры показывают, что доступный сайт – это не какой-то
специальный сайт для специальных людей. Удобный и продуманный сайт
нравится всем пользователям без исключения.
7 шагов для тех, кто хочет сделать сайт более удобным для незрячих
посетителей
1. Интерфейс должен быть контрастным и выдерживать масштабирование
средствами браузера до 200%, не «разваливаясь».
2. Все элементы страницы, имеющие определенный семантический смысл
(заголовок, список, таблица, ссылка и так далее) должны верстаться не
просто за счет изменения внешнего вида, а соответствующими типовыми
элементами HTML –
Читать далее →