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

Говоря о доступности каких-либо сервисов и адаптации среды для людей с ограниченными возможностями, мы довольно чётко представляем себе, что такое физическая доступность. Если мы слышим про доступный офис, то наше сознание быстро рисует ассоциативную картинку о том, что это пандус, отсутствие порогов внутри отделения, удобный лифт, помогающие сотрудники, сурдоперевод. Всё это понятно. Но понятно ли нам, что такое цифровая доступность? Чтобы увидеть весь наш путь к доступному интернет-банкингу, стоит в этом разобраться.

Что такое адаптация в digital?

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

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

Так и в цифровой доступности. Каждый элемент на экране должен быть обозначен, размечен и правильно подписан. И только тогда наши пользователи, которые работают с интерфейсом, используя программу экранного чтения, смогут совершить все необходимые им действия. Повторим, это касается каждого элемента экрана: полей, выпадающих списков, таблиц, кнопок, меню, навигации на главной странице, плюс корректной работы всех горячих клавиш. Нашему незрячему пользователю легко будет взаимодействовать с системой, только если всё правильно размечено и подписано.

Как мы пришли к digital-доступности в мобильном приложении СберБизнес

В 2019 году мы сделали глобальный редизайн интернет-банка для юридических лиц. Изменилось абсолютно всё: цвета, пользовательские сценарии, навигация и даже построение структуры. Мы много работали над тем, чтобы сделать его очень удобным, нативным, с наименьшим количеством кликов, с удобными сценариями. Всё это было разработано и запущено достаточно быстро. Мы очень радовались положительной обратной связи от пользователей: клиенты писали, что им удобно, быстро, интуитивно. Пока мы не прочитали в соцсети адресованный нам пост Анатолия Попко, незрячего эксперта в сфере невизуальной доступности. Смысл поста сводился к следующему: «Друзья, вы что-то изменили, и я не смог сделать в приложении ничего. Вообще. Я даже не смог найти, как мне создать платёж, не то чтобы заплатить своим контрагентам».

Мы не смогли оставить это без внимания и достаточно быстро среагировали, пригласив Анатолия к себе, чтобы получить консультации. Он вживую показал, что для незрячего пользователя в нашем приложении не работает действительно ничего. Нет никакой навигации и совершенно непонятно, как ориентироваться в нашей системе. Решение надо было принимать быстро, поскольку у клиента (а значит и такой же целевой аудитории) «болит», у команды нет опыта (мы никогда не работали с цифровой доступностью), а у разработчиков нет компетенции.

Этапы цифровой адаптации приложения СберБизнес

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

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

Frontend-разработчик интернет-банка СберБизнес Тимофей Аркуша:

«Разметить элементы для удобной навигации было сравнительно просто, но после этого перед нами встала настоящая проблема — адаптация форм, в частности формы отправки денег контрагентам. Это была и есть самая важная форма интернет-банка СберБизнес, ибо, согласитесь, главная функция банка — это хранить и переводить деньги.

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

• старая версия react-select, поднять которую было слишком сложно, так как в новой версии были критические изменения;

• наш, написанный в Сбере селект;

• очень навороченный селект выбора контрагента, который был написан только для этой конкретной формы.

Все три селекта не хотели работать с программами экранного доступа сразу, их пришлось адаптировать.

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

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

Любой фронтенд-разработчик знает, что не каждый браузер поддерживает все современные фичи и стандарты, и мы вынуждены с этим мириться. Увы, стороной эта проблема не обошла и wai-aria, из-за чего хорошо читаемый на Chrome код не будет хорошо читаться на Firefox. Также всё усложняет существование разных программ экранного доступа, которые, как и браузеры, имеют свою поддержку. А самое неприятное то, что конкретные пары браузер-скринридер могут выдавать разные эффекты. Например, NVDA+Chrome ≠ JAWS+Chrome ≠ JAWS+Firefox ≠ NVDA+Firefox.

Чтобы адаптировать компоненты, не нужно писать много строк, вся адаптация заключается в применении корректных html-атрибутов, что достаточно просто и быстро в контексте простых компонентов вроде компонента отображения денег или кнопки с иконкой, но крайне сложно в контексте комплексных компонентов вроде модальных окон, селектов и поповеров, а если учесть, что каждая пара браузер-скринридер работает по-разному, мы получаем ад при разработке, так как хорошо адаптированный код в JAWS+chrome может оказаться совсем неадаптированным в NVDA+firefox».

В мае 2020 года вышел релиз мобильного банка СберБизнес, который мы уже могли назвать хорошо адаптированным для незрячих пользователей. Мы очень волновались, ведь нам предстояло получить пользовательский фидбэк, а также мнение нашего главного критика — Анатолия Попко. Но он сообщил, что у нас всё получилось, в интернет-банке стало легко ориентироваться и совершать платежи. 

А теперь «вдолгую»

Но что же дальше? Подход, который мы применили на старте, помог нам закрыть клиентскую «боль» с помощью разработчиков-энтузиастов, но он был недостаточно эффективен для работы на долгую перспективу, а она необходима. Было очевидно, что нужно внедрять новую культуру разработки во все команды, которые работают над приложением СберБизнес. Мы выработали формулу новой культуры разработки, которая состоит из двух слагаемых:

• новые компетенции;

• приоритет задачам по доступности.  

Новые компетенции означают, что разработчикам надо учиться. Те, кто уже погрузились в проект, составили Q-book — мануал, ознакомившись с которым любой фронтальный разработчик мог на практике применять скиллы по цифровой адаптации. Кстати, работая над доступностью приложения СберБанк Онлайн, ребята из «Особенного банка» решили поделиться своим опытом и выложили гайдлайн для основных участников процесса (менеджера, дизайнера и разработчика), который поможет в разработке доступного продукта.

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

Как уговорить команду разработки заниматься доступностью?

Наверное, многие из вас приходили в команды, чтобы приоритизировать какую-то доработку, рассказать, как создать новый продукт или сделать его лучше. Тогда вы представляете, какие три основных вопроса задаёт команда:

• Сколько клиентов будет этим пользоваться?

• Сколько денег это принесёт банку?

• Сколько ресурсов команда потратит на эту доработку?

В случае с доступностью сервиса для людей с ограниченным возможностями по зрению: не важно, сколько людей будет пользоваться этим сервисом — 1 или 100 000 человек. Потому что жизненно необходимо сделать продукт, которым могут пользоваться ВСЕ категории наших клиентов. На второй вопрос про деньги ответ точно такой же — это не имеет значения, потому что нашими продуктами должны пользоваться все категории клиентов. А вот с третьим вопросом интересно.

Все считали, что цифровая доступность приложения — это какая-то отдельная работа, на которую нужно потратить силы. Тогда мы сосредоточились на том, чтобы объяснить командам, что если думать о доступности заранее, в момент создания продукта, то не понадобится никакой отдельной работы. И у нас получилось.

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

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

Мы не ждали наград, но в конце 2020 года самым большим подарком для нас стало признание. Мы получили ведущую международную премию, которая присуждается за лучшие и самые инновационные решения в сфере банковского обслуживания, Banking Technology Awards в номинации Diversity&Inclusion Excellence («Совершенство в обеспечении равных прав и инклюзивности»). Получить эту высокую награду нам было очень приятно, но это накладывало и большую ответственность. Надо было двигаться дальше.

На чём фокус Сбера в рамках цифровой доступности сегодня

В 2021–2022 годах мы продолжаем адаптировать мобильное приложение СберБизнес. Здесь задействованы все команды, весь периметр СберБизнеса проверяет свои продукты в мобильном приложении на доступность. Также мы продолжаем наращивать темп по вебу и сохранять стандарты адаптивной разработки для наших пользователей.  

Дарья Толстова, директор проектов трайба «Цифровой корпоративный банк» Сбербанка