Интересное

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

3 июня 2020

8 мин

Поделиться в соцсетях

В России 12 млн людей с инвалидностью и 35 млн пожилых людей. Многие из них испытывают те или иные трудности в работе с сайтами и мобильными приложениями. А ещё есть, например, мамы младенцев, оперирующие в основном одной рукой и иногда голосом. Как компании учитывают все эти временные или постоянные ограничения при разработке своих онлайн-ресурсов?

Особое мнение

По оценке Сбербанка, среди клиентов группы полмиллиона незрячих, 2,5 млн людей со слабым зрением, 2,5 млн людей с нарушением слуха или речи, полмиллиона людей с нарушением опорно-двигательного аппарата и 1 млн людей с ментальными нарушениями. К тому же особенности в коммуникациях есть и у пожилых клиентов, да и никто из нас не застрахован от временных травм. «Поэтому несколько лет назад мы выделили клиентов с инвалидностью в отдельный сегмент и создали внутри банка специальную команду „Особенный банк“»,  — рассказывает Александра Алтухова, директор дивизиона «Особенные решения» Сбербанка. Задача подразделения — обеспечить всем клиентам равный доступ к экосистеме продуктов и сервисов банка.

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

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

Четыре принципа

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

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

Один из инструментов, который используется в большинстве современных интерфейсов — скринридер. Эта программа буквально зачитывает всё, что «видит» на экране.

При разработке мобильного приложения Сбербанк Онлайн, занявшего в дальнейшем лидирующую позицию по результатам исследования доступности банковских приложений для людей с инвалидностью, особое внимание было уделено контрастности интерфейса и поддержке экранных дикторов Voiceover (для iOS) и Talkback (для Android), с помощью которых незрячие люди могут пользоваться функциями приложения полностью на слух.

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

Также в приложении был реализован сценарий оплаты квитанций ЖКХ при помощи QR-кода — единственно возможный для незрячего пользователя способ оплачивать счета без посторонней помощи.

Вторая важная характеристика современного контента и интерфейса — они должны быть чёткими и понятными любому посетителю сайта или обладателю приложения.

В марте 2020 года в офисе Mail.ru прошёл митап «Инклюзивный дизайн». На нём представители различных компаний рассказывали о том, как реализуется инклюзия у них.

Так, в Mail.ru исследовали аудиторию своего почтового сервиса и выяснили, что 27% пользователей — люди 6о лет и старше. Специалисты компании провели исследование пользовательских сценариев и выяснили, что и как они делают в почте, с какими проблемами сталкиваются. Достаточно часто респонденты отмечали незаметность или неразличимость элементов, неочевидность выбора тёмной темы, выпадение важных элементов почты из области зрения, неочевидность границ выпадающего меню. Теперь Mail.ru планирует исправить недоработки, перепроверить доступность, улучшить разметку для голосовых помощников.

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

А команда портала Мос.ру создала инструмент изменения цветовой палитры сайта с учётом дальтонизма (нарушения цветового восприятия есть у каждого десятого жителя планеты). Проектируя сайт или приложение, можно проверять палитру на контрастность и адаптировать цвета.

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

Источник: ВОЗ

«Третье правило современного онлайн-ресурса — управляемость — предполагает возможность взаимодействовать с интерфейсом и контентом доступным способом»,  — делится опытом Валерия Курмак, директор практики human experience диджитал-консалтинговой компании AIC.

Например, в соответствии со стандартом WCAG в современном приложении или сайте кнопки должны быть больше 1 сантиметра, обязательно нужны субтитры и расшифровка текста, необходимо предусматривать возможность использовать жесты для управления.

В последней версии IOS есть специальная разметка, позволяющая управлять интерфейсом с помощью голоса. Кроме того, незрячий может набирать текст на айфоне, используя шрифт Брайля. Недавно такой способ печати появился и в андроиде.

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

Цена вопроса

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

Типичные ошибки разработчиков и дизайнеров

Валерия Курмак

директор практики human experience компании AIC:

Создание специальной кнопки для слабовидящих

Она просто не нужна. На любом компьютере комбинация клавиш ctrl+ или ctrl– позволяет увеличивать и уменьшать размер текста.

Неучтённые нюансы

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

Также скринридер не читает картинки, поэтому если какой-то элемент интерфейса сделан в виде картинки, лучше давать к ней описание. Например, «мама протягивает ребёнку его первую детскую карту».

Дизайнеры не проверяют цвета и шрифты на контрастность

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

        Поделиться в соцсетях

        Статья была вам полезна?

        Да

        Нет