Accessibility is the new black. Как создавать инклюзивный дизайн

Привет! Меня зовут Юлия Жихарева, я дизайнер в команде NIX. За моими плечами опыт в проектах в сфере SaaS, mobile device management, е-commerce. Последние два года вместе с нашей командой мы создаем дизайн-систему с учетом требований доступности. Я провожу аудиты доступности готовых сайтов и решений других дизайнеров.

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

Без понятного и удобного для всех UI/UX дизайна сегодня никуда. Пользователи могут покинуть сайт или закрыть приложение из-за низкого уровня accessibility продукта — его доступности. В этой теме у меня накопилось достаточно наблюдений и знаний, поэтому мне захотелось поделиться с вами опытом.

Что такое инклюзивный дизайн

Доступность — это результат, измеримый и тестируемый по определенным критериям. Accessibility веб-интерфейса означает, что любые пользователи, в том числе люди с ограниченными возможностями, могут свободно воспринимать интерфейс и взаимодействовать с ним. Инклюзивный дизайн — более широкое понятие. Его суть в том, чтобы создавать доступные и этичные продукты и услуги. Слоган контроллера от Xbox отлично описывает важность инклюзивного дизайна: «Когда играем мы все, выигрывает каждый из нас». Следование требованиям доступности как раз помогает разрабатывать более удобные продукты для всех пользователей.

Обратите внимание на автоматы для самообслуживания в McDonald’s. В правом углу вы заметите иконку, благодаря которой интерфейс сворачивается в респонсивную версию (респонсивный дизайн предусматривает создание приложений, способных «растягиваться» под любой размер экрана). Зачем это нужно? Чтобы пользователи с различными ограничениями (не только с инвалидностью, но и с временной травмой, дети или люди низкого роста) могли свободно выбрать и заказать то, что хотят.

Приложение iBooks на iOS позволяет читать, как вам удобно: выбирать шрифт из предложенных вариантов и комфортные для зрения цвета страниц. Это делает процесс чтения приятным для всех.

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

В мире веб-дизайна классификация ограничений от Microsoft считается одной из самых популярных. Поэтому предлагаю и нам на нее сослаться:

• Постоянное ограничение. Например, если у пользователя наблюдаются различные врожденные особенности зрения или слуха.

• Временное. Это может быть сломанная рука или гипс на шее, то есть ограничения, на устранение которых потребуется определенное время.

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

В практике нашей команды есть разработка дизайна приложения для строителей заборов. Эти ребята выезжают на объект, снимают все необходимые мерки, заносят их в приложение, в нем же просчитывают и создают примерный дизайн. Зачастую это люди, также работающие в цеху, иногда с травмами рук. Их ситуационное ограничение заключается в том, что замеры могут производиться на улице, при слепящем солнце или в дождь, либо одной рукой, потому что другой он держит инструмент. При работе в цеху взаимодействие усложняют шум и вибрация. В этом случае мы столкнулись со зрительными и физическими ситуационными особенностями. Учитывая эти ограничения, мы проектируем интерфейс с увеличенной touch area, крупными открытыми шрифтами, контрастными цветами, заметными обводками полей и достаточным пространством между компонентами.

Разберем детальнее различные виды ограничений с примерами доступности:

• Двигательные. Полное или частичное ограничение моторики (скорости, силы, возможности передвижения, координации). Разработчики Microsoft выпустили Xbox Adaptive Controller — устройство, имеющее две огромные кнопки и большое количество выходов/входов, куда можно подключать джойстики, мышки и кнопки. Благодаря этому человек может собрать свой кастомный аппарат для игры. Даже процесс «общения» с продуктом полностью инклюзивный. Разработчики продумали три прототипа упаковки для примочки, протестировали их с людьми, у которых есть нарушения двигательных функций, и выбрали наиболее удобный вариант.

• Визуальные. Сюда относится врожденная или приобретенная потеря или ухудшение зрения (возрастные особенности, травмы, глаукома, катаракта, дальтонизм и т.д.). На некоторых государственных сайтах в правом верхнем углу вы можете заметить кнопку в виде глаза. Во время нажатия на нее интерфейс становится черно-белым и значительно масштабируется.

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

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

• Когнитивные. Особенности и нарушения внимания, восприятия информации и ее обработки (аутизм, дислексия, возрастная деменция). Сюда же можно отнести эпилепсию, так как для этого заболевания требования отдельно прописаны во WCAG (Web Content Accessibility Guidelines) — рекомендациях по обеспечению доступности веб-контента. Проектирование интерфейса с учетом когнитивных особенностей тесно связано с базовыми юзабилити практиками. Когнитивные особенности могут быть и временными. К примеру, воздействие алкоголя на человека или клиническая депрессия.

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

Стандарты доступности веб-интерфейсов

Давайте детальнее разберем WCAG (Web Content Accessibility Guidelines) — руководство по обеспечению доступности веб-контента. Это самый широко применяемый стандарт в разработке дизайна. В документе подробно описаны требования к структуре сайта и кода, изображениям и звукам, есть ссылки на разъяснения, используемые техники и часто встречающиеся ошибки.

Авторы WCAG выделяют три уровня доступности:

• А — минимальный. Не влияет на визуальную составляющую дизайна, что особенно ценно для имиджевых и эстетических работ (авэ безумный awwwards).

• АА — золотой стандарт. Зачастую соответствие ему является требованием международных компаний.

• ААА — наивысший, задача «со звездочкой». Стоит применять, когда вы уверены, что продукт будут использовать большое количество юзеров с ограничениями.

Помимо стандартов, в этом документе описываются 4 принципа онлайн доступности: perceivable, operable, understandable, and robust. Тут можно детальнее почитать, что означает каждый из них.

WCAG далеко не единственный стандарт, используемый для создания доступных веб-интерфейсов. Есть и другие подобные документы. Например, в США это федеральный закон Section 508 и свод правил ADA (Americans with Disabilities Act), регламентирующих доступность онлайн. Из современных международных документов стоит выделить WAI-ARIA. Эти нормы появились в ответ на то, что сайты стали массово использовать интерактивные элементы, которые доступны не для всех (к примеру, drag&drop, сложные виджеты и динамичные элементы).

Как создавать инклюзивный дизайн

Основываясь на опыте нашей команды и концепции атомик-дизайна, я составила чек-лист, который может пригодиться и вам. В случае нашего проекта мы стремились к уровню соответствия АА. В чем суть атомик-дизайна? В продвижении от меньшего к большему (from abstract to concrete). Мы начали с токенов (то, что нельзя разделить на меньшие частицы — типографика, палитра, иконографика, сетка), далее перешли к атомам (кнопки, поля ввода), затем к молекулам (drag&drop, file uploader), и так до организмов (модальные окна и трея), и наконец — к страницам.

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

Начнем с палитры

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

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

Чтобы убедиться в соответствии стандартам, нужно тестировать каждый элемент на всех возможных вариантах фона, а также все основные состояния, в том числе disable.

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

Не полагайтесь только на цвет

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

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

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

«Причешите» формы

Мы работаем над Master Data Management продуктом, и 80% всего интерфейса — это формы. В данном случае одним из основных паттернов взаимодействия «пользователь — система» является возможность вводить и изменять информацию.

Приведу основные рекомендации для обеспечения доступности форм.

• У всех полей должны быть читаемые фиксированные лейбы с осмысленным текстом.
• Границы поля — явно очерчены и видны. Откажитесь от подчеркивания как индикатора поля (как в старых версиях material design).
• С осторожностью используйте плейсхолдер, если хотите разместить важную информацию. Лучше использовать отдельные информационные баннера.
• Важные инструкции и хинты должны быть видны сразу.
• Группы полей должны быть логически сгруппированы и обозначены тайтлом.
• Обязательные поля — четко выделены.
• Требования к вводимым данным обозначены сразу.
• Убедитесь, что есть инструкции, которые помогут пользователю исправить ошибку, если таковая есть.
• При открытии формы первое поле должно быть в состоянии фокуса, чтобы юзер мог сразу начать ввод.

Типографика и читаемость

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

Перечислим общие требования к доступной типографике:

• Используйте читабельный размер шрифта. Для уровня АА — это минимум 16px с контрастностью не менее 4,5:1 и не менее 3:1 для большого текста в 24px. Исключения — логотипы и декоративные тексты.
• Один из главных признаков читабельного шрифта — узнаваемые формы символов. C этой целью используются уникальные литеры. Кроме нуля (0) и О, такими же схожими могут быть цифра три (3) и буква З и так далее.
• В зависимости от use case стоит выбирать верное начертание. Существует базовое правило использовать шрифты без засечек для интерфейсов и шрифты с засечками для длинных документов, но это не безусловное правило. Важнее открытость символов и расстояние между буквами (WCAG стандарт — в 0,12 раза больше размера шрифта). Чтобы получить базовые знания в этой теме, советую посмотреть лекцию матери всех кириллических шрифтов Александры Корольковой.

• Продумайте оптимальную высоту строки. Рекомендуемое значение от WCAG — высота строки в 1,5 раза больше размера шрифта, интервал между абзацами — в два раза больше размера шрифта.
• Не делайте слишком длинные или слишком короткие строки. 45–75 символов — приемлемое количество, 66 — оптимальное.

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

Макет и структура верстки

Набирая текст этой статьи в Google Docs, для группировки разделов я использую автоматизированную систему стилей. Если все сделано правильно, то в меню «Структура документа» будет видна соответствующая иерархия. Примерно по этому же принципу работают html-теги для заголовков сайта и смысловых разделов (h1-h6).

Зачем это нужно? Screen reader программы считывают и озвучивают текст с экрана согласно этим тегам. Если текст для заголовков будет находиться в других тегах (например, p или div) или будет нарушен порядок их использования на странице, то человек будет слышать информацию в неправильном порядке.

Более того, это позволяет создать корректную визуальную иерархию и снизить когнитивную нагрузку на человека. Понаблюдайте за собой: когда вы открываете новый для себя сайт, взгляд в первую очередь падает на крупные контрастные элементы (заголовки, кнопки, например). Благодаря им вы быстрее найдете то, что нужно, и выполните свои задачи. Это непосредственно отразится на юзабилити сайта и вашем пользовательском опыте.

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

Дублируйте визуальный контент текстом

Согласно закону Якоба, пользователи проводят большую часть своего времени на других веб-сайтах, а не на вашем. Значит, есть часть паттернов и визуальных приемов, которые знакомы всем и стали стандартом. К примеру, все знают, что иконка с тремя линиями (бургер) открывает меню, а после нажатия на иконку с шестеренкой откроются настройки. Тем не менее, для повышения уровня доступности, стандарты рекомендуют дублировать даже их текстом. Если в вашем продукте используются уникальные иконки с нестандартными смыслами — уж тем более их нужно дублировать текстом.

В нашей MDM-системе используются иконки со значением, к примеру, app vision, claim и device lookup. Попробуйте без подписи угадать, какая иконка что означает :)

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

Используйте альтернативный текст

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

Существуют такие основные требования к написанию альтернативного текста:

• Убедитесь, что подпись не дублирует уже написанный текст.

• Используйте фразы «Фото чего-то», «Иллюстрация показывает», потому что screen reader считывает информацию без контекста. Он не понимает, что вы перешли от одного блока к другому.

• Декоративные изображения не нуждаются в описании, если не несут никакой смысловой нагрузки. Например, фото торта на примере ниже в альт-тексте не нуждается.

Продумайте состояние фокуса и доступ с клавиатуры

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

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

Начинаем отрисовку с маленьких компонентов (атомы, молекулы), а после — увеличиваем до масштабов скринов и модальных окон.

Пиши, сокращай, знай основы UX-writing

Из текста на кнопке должно быть понятно, что произойдет после клика.

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

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

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

Следите за порядком текста

Скринридер двигается по экрану слева-направо, сверху-вниз. Все элементы, необходимые юзеру для выполнения задачи, должны быть размещены до интерактивных элементов. Как на примере ниже, секция Terms and conditions перенесена над кнопкой, так как в первом случае юзер может дойти до кнопки Submit и решить, что это конец экрана.

Аудит и тестирование

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

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

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

• Симуляция низкого перфоманса. Чтобы проверить, как сайт отображается на девайсах с низким уровнем интернета, установите режим Slow 3G в консоли Inspect и просмотрите, как прогружается и работает продукт. Получает ли юзер необходимые фидбеки от системы в это время, работает ли скелетон или лоадер?

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

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

• Установите скринридер. Если вы действительно хотите walk in your user’s shoes — установите скринридер и с его помощью пройдите основные user flow своего пользователя. Но если есть возможность, лучше проводить такого типа тестирования с реальными пользователями (рекомендую почитать статью о том, почему завязывать глаза и садиться в коляску плохая идея). Как и в других случаях, здесь работает главное правило UX: «Вы — не ваш пользователь» .

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

Для автоматического тестирования создано огромное количество софта. Пробуйте разные программы и выбирайте то, что удобнее вам.

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

• TENON — автоматизированный помощник для тестирования доступности;
• WAVE от сервиса WebAim — проверяет страницу по стандарту WCAG;
• MAUVE — можно настроить такие параметры анализа, как уровень соответствия, разрешение и версию стандарта. Помимо сжатого саммари, позволяет скачать готовый к презентации PDF с графиками.

А здесь можете найти список из 159-ти подобных сервисов на любой вкус.

Вот так, к примеру, выглядят результаты автоматического тестирования сайта Верховной Рады Украины. Примечательно, что основной заголовок «Верховна Рада України» имеет недостаточную контрастность белого текста на синем фоне:

На этапе создания дизайна автоматически можно тестировать только контрастность. Я использую плагин Stark для Figma, Adobe XD и Sketch.

Объясните заказчику важность доступного для всех дизайна

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

• Юридическая сторона. Этого требует законодательство страны, где находится ваш заказчик и где реализуется данный продукт. На слуху судовые дела Netflix и Apple, упустившие требования доступности в некоторых своих продуктах.

• Этическая. Нужно обеспечить равный и полноценный доступ к продукту для всех пользователей. Мы живем в прекрасное время, когда слова diversity, inclusivity, feminism, eco-friendly ежедневно мелькают в ленте. Это наша новая реальность, в которой жизнь и комфорт каждого человека и общества в целом становится ценностью.

• Экономическая. Говорите клиенту о цифрах. Например, что начиная с 30 лет зрение человека снижается, а к 60-ти годам значительно ухудшается. Соберите статистические данные о количестве людей с ограниченными возможностями среди потенциальных пользователей.

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

Чтобы заказчик услышал вас, ссылайтесь на потребности пользователей и по возможности внедряйте принципы инклюзивного дизайна самостоятельно. Как говорится, Volunteer as a tribute. Внедрение базовых требований доступности не внесет критичных изменений в дизайн, но изменит опыт взаимодействия многих юзеров.

Говоря об изменениях в визуальной части дизайна, увлекшись требованиями доступности, есть риск перегнуть палку. Вот так выглядит страничка стандартов WCAG — 100% аксессибилити, 0% эстетики:

Многие организации, ставя доступность в приоритет, забывают об эмоциональной и эстетической составляющей дизайна. Как подчеркивает 83-летний Дон Норманн в своей статье, когда компании создают вещи специально для пожилых людей, выходят уродливые вещи, которые так и кричат: «Я стар и не могу функционировать!». Однако доступный дизайн не равно уродливый дизайн.

Вывод

Пройдя все эти шаги, вам удастся разработать современный и действительно доступный для всех дизайн. А чтобы уже сейчас проверить, насколько ваш дизайн или сайт соответствует требованиям accessibility и что вы можете улучшить, делюсь с вами своим чек-листом доступности. Следуйте этим пунктам, и я уверена: у вас получится создавать более инклюзивные продукты.