О невизуальной доступности цифровых сервисов в подкасте «Скоро будет доступно?» от Everland

Мы, Everland, помогаем людям с инвалидностью трудоустроиться, а бизнесу — внедрить инклюзивные практики и сделать услуги доступнее, 3 декабря запустили подкаст «Скоро будет доступно?». В ежемесячных выпусках мы будем говорить о проблемах, с которыми все чаще сталкиваются люди с инвалидностью из-за неадаптированных сервисов услуг компаний, и разбирать возможные варианты их решения. Гостями подкаста станут эксперты с инвалидностью, представители бизнеса, блогеры и журналисты.

Ищите «Скоро будет доступно?»  на четырех платформах:

Podster

Яндекс.Музыка 

Apple Podcasts 

VK Видео

Первый выпуск подкаста был посвящен невизуальной доступности цифровых сервисов, его провели:

• Евгений Сличный, руководитель направления доступности услуг Everland, 

• Василий Дрожжин, эксперт по цифровой доступности, 

• Андрей Якубой, руководитель отдела невизуальной доступности. 

Эксперты обсудили результаты «Исследования Everland невизуальной доступности сайтов и мобильных приложений» для пользователей с нарушениями зрения и моторики 2023-2024 годов. Рассказали об основных ошибках цифровых ресурсов. Разобрали проблемные кейсы на примере сервисов компаний — DNS, МТС, OZON, Авито, VK Видео, RUTUBE, Магнита. Отметили сервисы, которые отвечают потребностям людей с инвалидностью. 

«Обсуждая темы доступности в подкасте, мы хотим показать, с какими трудностями может столкнуться человек с инвалидностью при использовании того или иного ресурса и помочь организациям повысить доступность своих услуг для людей с различными ограничениями», — рассказывает Евгений Сличный.

Исследование невизуальной доступности сайтов и мобильных приложений проводилось командой Everland с августа 2023 года по август 2024 года. Были протестированы 173 платформы 67 компаний из 12 наиболее востребованных сфер.

В исследовании участвовали веб-разработчики и тестировщики с инвалидностью по зрению, которые прошли специальную подготовку на платформе Everland. Онлайн-сервисы проверяли 17 тестировщиков, а всего в команде проекта было 32 человека. Оценка проводилась с позиции обычного пользователя с нарушениями зрения и моторики. 

Зачем нужна невизуальная доступность сайтов и приложений

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

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

«Сейчас мы сталкиваемся с такой тенденцией, когда очень многие компании заявляют, что они доступны, проводят различные конференции, говорят, какие они крутые, что их сервисы доступны. А по факту это оказывается не так», — подчеркивает Евгений Сличный. Ведь даже небольшая недоработка в этом вопросе, сводит на нет затраченные усилия. Риск испортить себе репутацию очень высок, потому что первое впечатление пользователя влияет на его поведение в будущем. Когда человек понимает, что ресурс для него недоступен, у него пропадает желание заходить на него снова. Так компании теряют клиентов. 

Проблемы, с которыми сталкиваются незрячие пользователи

В каждой сфере, которую мы протестировали, выбирали популярные и массовые сервисы, которыми пользуются миллионы пользователей, например: 

• Самые знакомые и часто используемые в России банки: Сбер, ВТБ, Альфа-банк, Т-банк. 

• Мобильные операторы: МТС, билайн, Мегафон, t2. 

• Популярные онлайн-кинотеатры: Кинопоиск, Иви, Wink и другие.

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

По результатам исследования лучше всего адаптированными для людей с нарушениями зрения и моторики оказались платформы маркетплейсов и компаний банковской сферы. Из сферы «Аптеки» — «36,6» для iOS и Android и «еАптека» для Android. В области «Навигация» самые доступные приложения — «Московский транспорт» для Android и iOS, а также «Яндекс Карты» для Android. Среди онлайн-кинотеатров — приложение «Кинопоиск» для Android. Сайт «Домклик» получил высокую оценку. Наименее доступны — платформы компаний сферы «Путешествия».

Однако доступность от сервиса к сервису в одной сфере может сильно различаться. Например, средний балл доступности банковских платформ варьируется от 1,0 до 5,0! Кроме того, доступность сервисов на разных платформах одной компании также неодинакова. Бывает так, что сайты и приложения на iOS доступны хорошо, а на Android плохо или наоборот.

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

• капчу без альтернативного решения (например, аудио);

• неподписанные элементы;

• отсутствие изменений после активации кнопок;

• отсутствие индикации выбранной вкладки;

• дублирование ролей кнопок;

• лишние элементы;

• некорректную работу курсора;

• озвучку ненужной информации при регистрации и авторизации;

• проблемы с фокусом скринридера при оформлении подписки.

Кейсы компаний 

В подкасте «Скоро будет доступно?» эксперты в режиме реального времени просмотрели скринкасты, которые подготовили тестировщики Everland, и разобрали несколько проблемных кейсов. Изучим три из них (подробный разбор с демонстрацией скринкастов смотрите в подкасте на VK Видео).

Приложение DNS на платформе iOS

Первым участники подкаста рассмотрели приложение онлайн-магазина DNS на платформе iOS. Они столкнулись с неподписанными вкладками, где скринридер озвучивал только номер вкладки и общее количество вкладок. 

Тифлокомментарий: На скриншоте в нижней части экрана выбрана неподписанная вкладка с графической иконкой местоположения в ряду таких же вкладок с графическими иконками, всего их пять. Выше отображается Яндекс.Карта. Под ней поле для ввода названия, адреса, метро. Ниже кнопки «Открыто» и «Рядом»

Рассказывает Василий Дрожжин:

«Этим приложением пользоваться можно. То есть мы слышим, что есть пять вкладок. Наверное, каждая вкладка имеет свое предназначение, скорее всего на нее можно нажать и в нее перейти, но, что в этой вкладке, — мы узнаем только, когда туда перейдем. И для того, чтобы пользоваться этим приложением, нужно запомнить, какая вкладка за что отвечает».

Приложение Авито на платформе iOS

Здесь участники знакомились с навигацией по главному экрану и поиском товара. Неподписанных кнопок оказалось так много, что разобраться с этим стало еще сложнее. Скринридер озвучивал: «Кнопка, кнопка, кнопка…» Иногда сам предполагал, что это может быть: «Кнопка — возможно, “Найти”».

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

Говорит Андрей Якубой:

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

Приложение Магнита на платформе iOS

В этом кейсе пользователь перешел в «Любимые категории», выбрал «Овощные и грибные консервы» и попал на шторку. Выйти из нее он не может, так как нет кнопки «Назад» или какой-то другой возможности вернуться. Приходится выключать скринридер, свайпать эту шторку вниз, чтобы она закрылась. И после этого снова запускать программу экранного доступа. 

Тифлокомментарий: На скриншоте отображается шторка «Овощные и грибные консервы». На заднем плане видна небольшая часть неактивного раздела «Любимые категории». На шторке находится текстовая информация о бонусах за товары, условиях их получения, входящих в категорию консервах. Выбран текстовой блок в самом низу шторки «Любимые категории также действуют при доставке и самовывозе».   

Комментирует Василий Дрожжин: 

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

Как обеспечить невизуальную доступность цифровых сервисов

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

1. Капча: не барьер, а помощник

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

Что делать:

• Предлагайте альтернативы: Звуковые капчи, текстовые вопросы, простые математические примеры или флажок «Я не робот» — все это эффективные альтернативы.

• Не усложняйте: Стремитесь к максимальной простоте и ясности, чтобы снизить когнитивную нагрузку.

2. Семантическая разметка: карта сайта для скринридера

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

Что делать:

• Используйте WAI-ARIA: Применяйте роли WAI-ARIA (например, role="banner", role="navigation", role="main", role="contentinfo") для обозначения основных областей страницы (шапка, меню, основной контент, подвал).

• Избегайте излишней вложенности: Вложенные области с одинаковой ролью могут создать путаницу. Синтезатор речи при переходе в новую область прочитает все родительские и дочерние роли, что будет избыточно.

• Осторожно с HTML5: Теги <header>, <footer>, <nav> и аналогичные могут некорректно восприниматься скринридерами в случае вложенности. Лучше использовать роли ARIA, а не опираться на HTML5 теги.

Пример:

<header role="banner">

  <!-- Шапка сайта -->

</header>

<nav role="navigation">

  <!-- Меню навигации -->

</nav>

<main role="main">

  <!-- Основной контент -->

</main>

<footer role="contentinfo">

  <!-- Подвал сайта -->

</footer>

3. Скрываем визуально лишнее

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

Что делать:

• Используйте aria-hidden="true" Обёртывайте такие элементы в контейнер с этим атрибутом, чтобы скрыть их от скринридеров.

• Не распространяется на изображения: Изображения, выведенные через тег <img> должны быть доступны (см. пункт 4).

Пример:

<div aria-hidden="true">

  <!-- Слайдер или анимация -->

</div>

4. Изображения: не только картинки, но и текст

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

Что делать:

• Используйте alt или aria-label: Каждое изображение, выведенное через тег <img>, должно иметь атрибут alt или aria-label.

• Избегайте title: Атрибут title не заменяет alt или aria-label и не является полноценной альтернативой.

• Кратко и информативно: Текстовое описание должно быть кратким и точно передавать смысл изображения.

Пример:

<img src="" alt="Логотип компании 'Пример'">

<img src="" aria-label="Изображение смартфона 'Пример' на синем фоне">

5. Изображения в CSS: делаем доступными и их

Если изображения добавляются через background-image или аналогичные CSS свойства, их нужно сделать доступными для скринридеров.

Что делать:

• Используйте role="image" и aria-label: Тег, содержащий изображение в виде фона, должен иметь role="image" и aria-label с описанием изображения.

• Описывайте функцию: В aria-label описывайте не само изображение, а его функцию, например название ссылки/кнопки.

Пример:

<button role="image" aria-label="Кнопка 'Купить'">

  <!-- Картинка кнопки через background-image -->

</button>

6. Структура контента: заголовки и области

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

Что делать:

• Заголовки первого уровня в основной области: Основная область контента должна начинаться с заголовка первого уровня (<h1>).

• Заголовки или секции: Любая область должна начинаться либо с заголовка, либо должна быть обернута в <section> с aria-label.

• Избегайте дублирования: Не используйте одновременно заголовок и <section> с aria-label в начале одной области. Это приведёт к дублированию в озвучке.

Пример:

<main role="main">

  <h1>Заголовок статьи</h1>

  <section aria-label="Секция 'Введение'">

    <!-- Содержимое секции -->

  </section>

  <h2>Подзаголовок статьи</h2>

  <section aria-label="Секция 'Основные положения'">

    <!-- Содержимое секции -->

  </section>

</main>

7. Текстовая версия сайта: забудьте об этом

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

Почему это плохая идея:

• Двойная работа: Поддержание двух версий сайта — это удвоение трудозатрат на разработку и обновление.

• Устаревание: Такие специальные версии часто не обновляются и не включают в себя новые функции и исправления, присутствующие в основной версии сайта.

• Неполная доступность: Отдельные текстовые версии часто игнорируют другие важные аспекты доступности, кроме изменения шрифта.

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

8. Комбобоксы и списки: управляйте фокусом

Использование комбобоксов и комбинированных списков в формах требует особого внимания к доступности.

Что делать:

• Упрощайте вёрстку: Если возможно, упростите структуру формы, чтобы сделать её более понятной для скринридеров.

• Используйте WAI-ARIA: Применение WAI-ARIA ролей и атрибутов позволяет управлять фокусом скринридера и обеспечивает правильное чтение информации о состоянии списка (открыт/закрыт, выбранный элемент и т.д.). Это, как правило, требует написания JavaScript кода для обработки событий.

• Не допускайте “голой” вёрстки: Использование ролей списков и комбобоксов без соответствующих скриптов, управляющих фокусом скринридера, недопустимо. Это приводит к тому, что скринридеры не смогут корректно интерпретировать и озвучить информацию.

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

Аудит и помощь от Everland в подготовке команды по доступности услуг 

По опыту аудита мы в Everland знаем: на то, чтобы полностью обеспечить доступность сайтов и приложений в больших компаниях, уходит от полугода до года. Если это малый или средний бизнес и локальные сервисы, то все происходит гораздо быстрее. 70% случаев — это типичные проблемы, то есть неподписанные кнопки, изображения, капча и другие. И только 30% — это специфичные кейсы, где нужно придумать особые решения, Большинство проблем с доступностью решается просто следованием стандартам и не требует значительных финансовых затрат. 

Доступность услуг для населения — требование закона. Государство обязывает компании обеспечивать доступность для всех людей, включая людей с инвалидностью. По Кодексу Российской Федерации об административных правонарушениях юридическое лицо может быть оштрафовано за отказ в обслуживании человека с инвалидностью или в доступе к товарам. Штраф составляет 300−500 тысяч рублей за один случай.

В России действуют стандарты, которые регулируют доступность цифровых ресурсов для людей с инвалидностью. Ключевой документ — это ГОСТ Р 52872-2019, он определяет требования к доступности электронно-цифровой информации.

Everland разработали Систему добровольной сертификации «Доступность торговых помещений, веб-сайтов и мобильных приложений для людей с инвалидностью». Система помогает организациям создавать инклюзивные продукты и сервисы, соответствующие законодательству и потребностям клиентов с инвалидностью.

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