Компанией Figma Inc. объявлено об открытом бета-тестировании начальной поддержки программ экранного доступа в её одноимённом инструменте проектирования графических интерфейсов. Figma представляет собой систему разработки и прототипирования интерфейсов с возможностью организации совместной работы в режиме реального времени. Она активно используется в индустрии разработки программного обеспечения как для создания упрощённых прототипов интерфейсов, так и для детальной проработки дизайна интерфейсов мобильных приложений, веб-сайтов и других сложных систем. Режим специальных возможностей в Figma в статусе закрытой бета-версии появился несколько месяцев назад, но в августе 2022 года он был переведён в статус открытой бета-версии.
Ранее в Figma уже предпринимался ряд усилий, призванный поддержать доступность как на уровне интерфейса самой системы, так и на уровне свойств создаваемого интерфейса. В частности, уже реализованы такие функции как:
- Тёмный режим и улучшенное соответствие формальным требованиям цветовой контрастности (за ориентир взят черновик стандарта WCAG 3.0) для пользователей, которым требуется другое визуальное представление.
- Открытая бета-версия живых субтитров для аудиочата в настольном приложении Figma и тарифных планах Pro, Org и Enterprise.
- Deque проводит общую оценку платформы для выявления областей, требующих улучшения, таких как обеспечение возможности взаимодействия только с клавиатуры и соблюдение передовых методов маркировки ARIA.
- Непрерывный рост и внедрение ориентированных на специальные возможности плагинов, виджетов и файлов сообщества, созданных такими компаниями, как Adee, Deque и Stark, и такими разработчиками, как Келли Горр (Kelly Gorr).
В официальном заявлении компании сказано:
«Видение Figma состоит в том, чтобы сделать дизайн доступным для всех, и хотя сегодня более двух третей нашего сообщества идентифицируют себя как нечто иное, чем «дизайнер», мы знаем, что сделать дизайн по-настоящему доступным означает больше, чем просто открыть его для большего числа людей. Это также означает создание продуктов, которые позволяют любому — независимо от возраста, способностей или опыта — участвовать в процессе проектирования от начала до конца.
...
Мы следим за тем, чтобы наша команда была оснащена, наделена полномочиями и должна была проектировать и создавать продукты с учётом доступности. Один из способов сделать это - создать повторно используемые компоненты пользовательского интерфейса для поддержки использования только клавиатуры и программ экранного доступа. Мы также разрабатываем инструменты, чтобы гарантировать, что новые функции и код будут соответствовать рекомендациям по доступности.
Сделать Figma более доступной также означает вовлекать наше сообщество в наш процесс проектирования на ранней стадии и часто, особенно с помощью программ альфа- и бета-тестирования, подобных той, которую мы объявляем сегодня.
Как сказал на прошлой неделе наш генеральный директор Дилан (Dylan) в своём выступлении на конференции Config, мы знаем, что нам ещё предстоит много работы. И пока мы предпринимаем шаги, чтобы сделать Figma более доступной платформой, мы также изучаем, какие инструменты могут помочь нашим пользователям создавать более доступные продукты. Это включает в себя предоставление пользователям возможности устанавливать замещающий текст, устанавливать роли ARIA для компонентов и устанавливать порядок табуляции для прототипов. Но это также только начало, и мы с нетерпением ждём возможности выполнить эту важную работу для нашего сообщества и вместе с ним.»
До недавнего времени система Figma была полностью недоступна для работы при помощи программ экранного доступа. Проблема обуславливалась тем, что интерфейс системы реализован на основе веб-технологий с использованием элемента холста <canvas>. Он создаёт область на веб-странице, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства, создавая рисунки, анимацию, игры и прочее. Однако по умолчанию всё графическое содержимое холста не имеет никакой семантики, при помощи которой программы экранного доступа могут прочитать контент и обеспечить взаимодействие с ним для незрячих пользователей.
Для обеспечения невизуальной доступности контента на холсте необходимо отдельно добавить ему всю необходимую семантику, что на начальном уровне и было сделано в Figma. В частности, была реализована поддержка текстовых заметок, замещающего текста для изображений, а также возможность взаимодействия и навигации по прототипам интерфейсов с помощью клавиатуры.
На момент публикации новости, данная функциональность находится в статусе бета-версии, так что может существенно изменяться, а у пользователя могут возникать многочисленные ошибки или проблемы с производительностью. Пока основной целью разработчиков является сбор отзывов пользователей программ экранного доступа о реализованных доработках.
Чтобы опробовать режим специальных возможностей в прототипах Figma, необходимо воспользоваться одной из поддерживаемых программ экранного доступа, среди которых заявлены VoiceOver для macOS, а также JAWS и NVDA для Windows. Сам режим пока поддерживается только в онлайн-версии (см. список поддерживаемых браузеров) и в настольном приложении Figma для Windows и macOS. В мобильных приложениях и мобильной онлайн-версии режим специальных возможностей на текущий момент не поддерживается.
Активировать режим специальных возможностей в прототипе Figma можно несколькими способами:
- Специальной кнопкой:
- Нажимая клавишу Tab, сфокусируйте визуально скрытую кнопку Skip to content. Эта кнопка является первым интерактивным элементом на странице. Также можно воспользоваться специальными навигационными командами программ экранного доступа.
- Нажмите Enter, чтобы включить слой специальных возможностей и переместить фокус на доступное содержимое.
- Через меню:
- Нажмите Options на панели инструментов.
- Нажмите Adapt content for screen readers (beta). При использовании этой опции фокус останется на панели инструментов.
При любом из вариантов активация режима специальных возможностей сопроводится сообщением "Now adapting content for screen readers".
В режиме специальных возможностей элементы дизайна Figma переводятся в HTML. Программы экранного доступа интерпретируют HTML-теги, чтобы понять содержимое и разделы документа, а также какие элементы доступны пользователю для взаимодействия на странице. Семантические HTML-теги также позволяют программе экранного доступа сообщать пользователю содержимое, которое может быть визуально выделено.
- Любой элемент в прототипе с взаимодействием «по клику» будет восприниматься программой экранного доступа как доступная кнопка.
- Программа экранного доступа сможет перемещаться по ссылкам и спискам в тексте дизайна.
- Любые фигуры с графической заливкой будут отображаться как графические элементы, а альтернативный текст будет заполнен именем слоя.
- Фреймы, компоненты и экземпляры компонентов верхнего уровня будут помечены регионами (<section>) с использованием имён слоёв в качестве доступной метки.
Об обнаруженных проблемах режима специальных возможностей Figma можно сообщать через отдельную форму обратной связи.
Получить всю необходимую информацию о системе Figma можно на её официальном сайте.
Социальные сети