Доступность: искусство дизайна для всех


04.10.2021 Время чтения - 10 минут 637

7 рекомендаций по созданию более инклюзивного интерфейса.


Читайте нас в Telegram.


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

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

В любом случае имейте в виду: исправление существующего сайта, который не является доступным, обычно требует значительных усилий. Начать можете с использования расширения Axe Chrome для выявления любых нарушений доступности. Если вам повезет, некоторые исправления могут быть относительно простыми. Еще я написал статью об инструментах, расширениях и надстройках, некоторые из которых могут помочь в преодолении проблем, связанных с доступностью.

Почему это важно?

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

По данным Всемирной организации здравоохранения, 15% людей в мире (1,1 миллиарда человек) идентифицируют себя как имеющие ту или иную форму инвалидности. И более 81% людей с ограниченными возможностями сообщили об использовании разных вспомогательных технологий или специального оборудования, чтобы передвигаться, общаться, учиться или выполнять повседневные дела.

С точки зрения бизнеса работа над доступным дизайном тоже имеет смысл:

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

– Пол Смит, руководитель отдела цифровой доступности, Barclays

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

1. Добавьте замещающий текст ко всем вашим изображениям

How alternative text appears in the html code.
Выделенный текст (справа) показывает замещающий текст изображения слева. 
Источник

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

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

При создании альтернативного текста старайтесь быть кратким и информативными. Не пишите ничего лишнего. Также нет необходимости включать в описание «изображение…» или «фото…».

Кроме того, альтернативный текст индексируется поисковыми системами (это означает, что он может отображаться в результатах поиска Google, тем самым улучшая ваше SEO). Он также отображается на странице, если изображение не загружается, как показано на изображении ниже:

Замещающий текст появляется, когда изображение не загружается

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

2. Убедитесь, что текст с фоном достаточно контрастны

Пример проверки доступности цветов на соответствие стандарту AA

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

Чтобы соответствовать уровню AA, убедитесь, что ваш обычный текст имеет минимальный коэффициент контрастности 4,5:1, а крупный текст (18 или 14 пунктов жирным шрифтом) имеет минимальный коэффициент контрастности 3:1. Можно увидеть, что пропорции становятся меньше по мере того, как шрифт становится больше и тяжелее, так как таким его легче читать. Вам может быть интересно, есть ли цвета, которых стоит избегать дизайнерам. Но речь идет не столько о том, чтобы избегать определенных цветов, сколько о том, чтобы выбранные цвета имели достаточный контраст.

Чтобы быстро проверить цветовой контраст, можете попробовать проверку цветового контраста WebAIM и Доступные цвета. Они определяют, соответствуют ли комбинации цветов минимальным порогам доступности. Также в них можно изменить значения цвета и размеры текста, чтобы увидеть результаты в режиме реального времени. На уровне дизайна есть плагины, вроде Contrast (для Figma), которые позволяют легко проверять коэффициенты контрастности цветов во время работы.

3. Не полагайтесь только на цвет для передачи важной информации

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

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

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

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

4. Используйте подписи к полям формы

Избегайте использования текста-заполнителя в качестве подсказки, вместо этого разместите ее над полем формы или рядом с ним. 
Фотография из книги Адама Сильвера: 
Шаблоны проектирования форм.

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

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

Текст подсказки над полем ввода из книги Адама Сильвера: 
Шаблоны проектирования форм.

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

Разные уровни заголовков, <h1> — <h6>

Заголовки – это эффективный способ организации контента на странице. Он же используется и как структура для программ считывания. Оценивая заголовки, спрашивайте себя, могут ли они донести до читателя главные идеи страницы без основного текста? Если нет, то вам, скорее всего, стоит их пересмотреть.

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

Для разработчиков чрезвычайно важно использовать правильную разметку (например, <h1>, <h2>, <h3>, <h4>, <h5> или <h6>) для программ чтения с экрана. Так пользователи смогут услышать заголовки и решить, хотят ли они слушать основной текст. Программы чтения с экрана также полагаются на заголовки для иерархической навигации по веб-страницам. Правильная структура позволяет тем, кто использует программы чтения с экрана, прослушивать список всех заголовков, перемещаться по содержимому с помощью заголовка или переходить непосредственно к заголовкам верхнего уровня (например, <h1>).

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

6. Используйте текст с изменяемым размером

Экран настроек iOS с разными размерами шрифта. 
Источник

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

Да, большая часть устройств и браузеров позволяет пользователям изменять размер текста. И все же рекомендуется использовать относительные единицы (например, проценты, rem или ems) для указания размера текста, а не абсолютные единицы (пиксели). Относительные размеры шрифтов обеспечивают большую гибкость при изменении визуального представления. Они позволяют масштабировать текст в зависимости от размера экрана пользователя и другого текущего содержимого.

7. Поддержка навигации с клавиатуры

Навигация по сайту с помощью клавиши Tab. 
Источник

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

Один из самых распространенных способов навигации с помощью клавиатуры – это клавиша Tab. Так пользователи перемещаются по всем интерактивным элементам на странице: кнопкам, ссылкам и полям ввода, пока они не достигнут интересующего элемента. Хорошая практика – проверить свой сайт на доступность клавиатуры. Используйте для навигации клавишу Tab и нажимайте Enter, чтобы выбрать элемент. Еще это позволит убедиться, что навигация логична и соответствует естественному визуальному потоку страницы.

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

Инструменты для проверки веб-доступности

Вот краткий список инструментов, которые помогут проверить доступность вашего сайта.

Оцените свои цветовые комбинации, чтобы проверить их на контрастность

Использование средств для проверки контраста, таких как Доступные цвета, поможет убедиться, что выбранные цветовые комбинации соответствуют рекомендациям WCAG 2.0 по доступности контраста. Если цвета не соответствуют минимальному порогу, эта проверка найдет наиболее близкую доступную комбинацию, изменив яркость цвета.

Используйте чеклист доступности

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

Пропустите URL-адрес через средство проверки доступности в интернете

Есть много бесплатных ресурсов, таких как WebAccessibility. Они проверяют, соответствует ли ваш сайт Руководству по доступности веб-контента (WCAG). Просто введите URL-адрес, а инструмент выдаст все несоответствующие области и предложит пути исправления. Еще есть вариант получить аудит доступности сайта или приложения. Его результаты можно использовать для устранения проблем, а потом провести еще один тест.

Доступность должна стать мышлением организации

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

Оригинал.

Читайте также: Воспринимаемая яркость: важная концепция UI-дизайна


Читайте нас в Telegram.