Цифровая доступность на 100% — конкретные решения, которые делают сайт доступным для людей с особыми потребностями
Показатель цифровой доступности в 100% имеют сайты организаций, экспертных в этих вопросах. А еще такой уровень доступности у сайта Правительства Нижегородской области. Разработчики рассказывают, как они этого добились.
Привет от IT-компании Riverstart! Мы разработчики: делаем CRM, цифровые платформы, сервисы, сайты и порталы. В нашем портфолио есть проект по модернизации сайта Правительства Нижегородской области, на примере этого проекта хотим затронуть важную тему — цифровую доступность.
Цифровая доступность — концепция, по которой сайт, приложение и любое другое ПО могут использовать все, в том числе люди с инвалидностью и разными особенностями, влияющими на восприятие информации. Задача разработчиков — найти способ, чтобы ни проблемы со зрением, ни тремор рук, ни дальтонизм, ни что-либо другое не было препятствием для использования цифрового продукта.
В России более 10 млн взрослых граждан с инвалидностью, по крайней мере такую цифру дает Федеральная служба государственной статистики. Сколько-то людей с нарушениями зрения или моторных функций могут не иметь группу инвалидности, дислексия, дальтонизм, СДВГ и прочие ситуации тоже могут вызывать сложности в пользовании цифровыми сервисами. Эти люди — такие же интернет-пользователи, на которых нужно ориентироваться при разработке.
Как люди с особыми потребностями пользуются сайтами
Мы рассматривали три инструмента, помогающих воспринимать контент:
1. Программы озвучивания
Программы озвучивания экрана или скринридеры, которые озвучивают весь интерфейс и контент сайта. Ими пользуются слабовидящие, незрячие, а также люди с одновременным нарушением зрения и слуха: в этом случае скринридер связывает обычный компьютер или смартфон с дисплеем брайля, отображающим контент рельефными точками.
2. Версии для слабовидящих
Люди с нарушениями зрения могут не пользоваться программами озвучки, а самостоятельно читать с экрана. Версии с настройками отображения помогают сделать текст крупнее, настроить контрастность.
3. Клавиатурное управление
Если нарушения моторики мешают использовать компьютерную мышь или тачпад, люди используют клавиатуру, чтобы перемещаться по экрану и запускать команды.
Как тестировали цифровую доступность сайта
На всех наших проектах есть стандартная задача — сделать расширенную версию для слабовидящих. Обычно делаем версию, в которой можно выбрать цветовую схему, настроить размер текста, отображение картинок и эффектов. Если вы читали пост про разработку сайта аэропорта Внуково, наверняка видели пример. Сайт Правительства Нижегородской области мы тоже адаптировали.
Людям без инвалидности может быть трудно представить, какие именно сложности возникают при работе с сайтом. На проекте был человек с пользовательскими особенностями — Илья Лебедев, руководитель проектов АНО «Проектный офис Стратегии развития Нижегородской области». Он помогал нам тестировать доступность сайта и давал ценные замечания.
Я подключился на финальном этапе, незадолго до выхода в прод. Это довольно стандартная ситуация для доработок доступности, когда такая задача уточняется заказчиком не до, а во время реализации. Но, во-первых, о неправильности такого подхода надо говорить открыто, во-вторых – разработчик, как оказалось, многое уже сделал сам.
Лучше способа проверить интерфейс на доступность, чем пользовательское тестирование, пока не придумали. Кроме формальной правильности кода и цвета есть пользовательская специфика, основанная на опыте взаимодействия людей с разными сайтами. Мы проводили пользовательское тестирование с программами экранного доступа NVDA для Windows и Talk Back для Android.
Как измеряли показатель доступности
Как правило, в России максимально доступными бывают сайты, которые создают сами эксперты в этой области, или крупные компании, развивающие направление цифровой доступности. С большинством государственных ресурсов все куда сложнее. К нашей гордости, показатель доступности сайта Правительства НО — 100%.
Нам удалось добиться 100% доступности портала Правительства Нижегородской области. Из российских сайтов такие показатели, как правило, бывают у ресурсов, специализирующихся на экспертизе и разработке доступности.
Оговоримся, что стопроцентной доступности для всех не бывает, но есть базовые ориентиры для оценки. В нашем случае 100% — оценка сервиса автоматической проверки Lighthouse. Мы запустили его после пользовательского тестирования, валидатор подсветил отдельные моменты, прямо не влияющие на доступность.
Фрагмент проверки сайта через https://googlechrome.github.io/lighthouse
Обычно разработчики используют Lighthouse и WAVE перед началом работ, чтобы оценить объем задач и распределить приоритеты. Мы же использовали их для контрольной проверки.
ГОСТЫ доступности для цифровых продуктов
В РФ существует ГОСТ Р 52872-2019, описывающий требования к доступности. Есть три уровня — A, AA и AAA. Соответствие максимальному уровню AAA — задача пока исследовательская и необходимая для ресурсов специфического назначения.
На портале Правительства мы ориентировались не на весь ГОСТ, а только на те положения, которые станут обязательными в новом приказе Минцифры России по доступности сайтов органов власти, МСУ и подведомственных учреждений.
По моей оценке, ресурс соответствует новым требованиям, хотя они и вступят в силу только с 1 марта 2024 года. Тут еще важно, что перед глазами есть достойный референс, ведь сейчас готовятся техзадания по доработкам других сайтов органов власти региона. Всегда удобно опираться на пример реализации не из зарубежной практики. Наконец, отдельно хочу отметить новый сайт Стратегии развития региона, сделанный Riverstart самостоятельно. Он тоже доступен и валидируется Lighthouse на сотку.
Теперь слово нашим разработчикам: рассказываем, как сделали сайт Правительства НО доступным.
1. Адаптация верстки под программы озвучивания экрана (скринридеры)
Программе нужно распознавать навигацию по сайту, озвучивать голосом все текстовые блоки и объяснять содержание картинок.
Реализация:
- Программа не распознает картинки, поэтому ей нужно дать текстовое описание того, что там изображено. Для этого мы заполнили атрибуты alt, title, aria-label, aria-labelledby, aria-describedby.
- Описание для озвучки содержания картинки, видео, цитаты и некоторых других элементов, обернутых в блок figure, находятся в блоке figcaption.
- Кнопки и ссылки могут состоять только из иконки, но их тоже нужно озвучить. Мы добавили текстовое описание в атрибутах title и aria-label.
- Для полей ввода формы также добавили текстовое описание label и aria-describedby, в котором выводится ошибка валидации.
- Для кнопки открытия различных выпадающих списков и аккордеонов добавили атрибут aria-expanded, он показывает программе чтения с экрана, открыт ли выпадающий список в данный момент. Это помогает в навигации по экрану.
- Добавили текст «идет загрузка», обернутый в блок с атрибутами role="alert", чтобы пользователь сразу услышал фразу, что началась отправка формы.
- Для той же цели после отправки формы добавили показ уведомления при успехе или ошибке, обернутое в блок с атрибутами role="alert" aria-live="assertive".
- Настроили озвучивание открытия модального окна, при этом программа фокусируется внутри него, чтобы пользователь ориентировался на экране и мог закончить задачу. Этого получилось добиться путем сравнения текущего сфокусированного элемента с элементами внутри модального окна.
- Для сложных интерактивных элементов, например, календаря, добавили атрибут aria-describedby с описанием того, как этим элементом пользоваться.
- Для элементов, которые не нужно озвучивать, добавили атрибут aria-hidden="true", а к интерактивным добавили tabindex='-1'.
2. Широкие настройки отображения
Не все слабовидящие пользуются программами для озвучивания экрана, некоторые настраивают отображение контента и читают сами. Мы добавили возможность выбрать цветовую схему с разной контрастностью, отключить анимацию, настроить изображения — отключить их или перевести в черно-белый режим, а также увеличить текст.
Несколько настроек для примера
Реализация:
- Подготовили файлы стилей с переменными CSS, которые позволяют выбрать цветовую схему. При нажатии на кнопку нужной темы на корневом элементе переключается атрибут и начинается загрузка нужного файла стилей.
- Для увеличение масштаба все размеры на сайте прописали в единицах измерения rem. Размер зависит от размера шрифта корневого элемента: меняем его размер — меняется размер всех элементов на сайте.
- При таком изменении размера элементов могут возникать искажения верстки, поэтому мы разработали алгоритм расчета медиа запросов, который имитирует изменения сайта так, как если бы пользователь увеличивал масштаб сайта, покрутив колесико мыши.
- Для отключения эффектов на сайте мы предусмотрели запрет анимаций и автовоспроизведения видео.
3. Возможность обходиться только клавиатурой
Люди с нарушениями моторики реже пользуются мышью из-за ее чувствительности к движениям. Им удобнее перемещаться по сайту и запускать команды с помощью одной только клавиатуры, табами и стрелками.
Реализация:
- Заголовки обернули в теги H1-H6 для удобной навигации горячими клавишами в программе.
- Для управления с клавиатуры задействовали интерактивные элементы html: button, a, input и другие.
- Добавили атрибут tabindex='0' к элементам, выполненным через обычный div, которые необходимо сделать интерактивными. Это позволяет взаимодействовать с элементом только с клавиатуры.
- Для видимого фокуса добавили стиль outline ко всем интерактивным элементам, если те находятся в фокусе.
Около 30% времени, затраченного на верстку, мы посвятили проверке доступности сайта: правили верстку для корректного озвучивания текста, добавляли атрибуты, проставляли нужные классы объектам, чтобы слабовидящие или незрячие пользователи свободно ориентировались в структуре сайта. Контент в полном объеме должен быть доступен всем пользователям, без исключений.
В комментариях с удовольствием обсудим с вами цифровую доступность, перспективы и реализацию на сайтах в РФ и за рубежом.
Еще интересное из блога:
______
Познакомиться поближе и обсудить задачу — @hello_riverstart
когда уже разработчики перестанут выдавать за инфоповод то, что уже делается всеми и так. давайте статью напишите "ура мы сделали так, чтобы кнопка, на которую нажимаешь, реально нажималась"
Мы перестанем это делать, когда такая версия станет применяться везде. А пока мы понимаем, что такая проблема в России есть. Так как сами доделываем версии для слабовидящих или вводим их в плохо сделанные для галочки. По нашему мнению, пункты, которые мы изложили, будут полезны многим, почему бы не поделиться)
К сожалению, для большинства разработчиков эта тема либо далекая и непонятная, либо понятная, но совершенно факультативная. Так что, двигаясь, небольшими шагами, даже о небольших локальных результатах говорить нужно.
Полезная тема, молодцы) По-хорошему это все должно быть стандартом для всех сайтов, а не только правительства
За рубежом часто такие сайты, что и зрячему неудобно. У нас дизайн с юзабилити круче развиты имхо
Наверное, даже соглашусь, у нас часто сайты как будто на шаг впереди с точки зрения удобства. Хотя можно надергать таких примеров, которые разобьют тезис в пух и прах))
Уважаю, что делаете сайты доступнее для всех!