Проектирование взаимодействия с пользователями с учётом специальных потребностей

Вступление

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

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

Фактор COVID-19

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

Разработка плана развития специальных возможностей

В первую очередь нам требовалось получить новую версию документа VPAT, поскольку предыдущий уже устарел. Мы выделили четыре ключевых направления и использовали такие инструменты, как WAVE и Accessibility Insights, которые автоматически находят на веб-странице недостатки с точки зрения пользователей с особыми потребностями. Мы выявили ряд проблем и отдали приоритет следующим из них:

• цветовая контрастность — проверка контрастности всех элементов интерфейса на соответствие стандартам WCAG 2.0 уровня AA;
• замещающий текст — сопровождение всех основных изображений и визуальных элементов соответствующими описаниями, скрытие второстепенных визуальных элементов;
• метки ARIA — сопровождение всех элементов интерфейса метками ARIA и необходимыми описаниями;
• теги ARIA — надлежащее использование тегов ARIA, например ролей, во всех разделах продукта для более эффективного управления взаимодействием с пользователем.

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

Приоритет специальных возможностей

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

Компоненты со специальными возможностями

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

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

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

Пополнение инструментария специальных возможностей

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

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

    

   

    

2. В презентацию для разработчиков пользовательского интерфейса мы добавили раздел, посвящённый работе со спецификациями специальных возможностей.
3. Я провёл презентацию, в которой на примере новой функции поэтапно показал весь процесс работы со специальными возможностями, включая последовательность табуляции, роли, метки и описания ARIA. Таким образом я продемонстрировал, какими должны быть результаты взаимодействия с элементами, поддерживающими перемещение фокуса.

Глубокий анализ

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

Это только начало

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