Доступный дизайн — это не сложно

Семь простых рекомендаций для дизайна более доступных сайтов ❤️

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

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

Впрочем, доработка уже функционирующего сайта с низким уровнем доступности может потребовать некоторых усилий. Когда я работал в Carbon Health, мы проверили доступность нашего сайта с помощью AXE Chrome Extension. Только на главной странице мы нашли 28 нарушений, которые нам предстояло исправить. Казалось, что это будет сложно. Но мы обнаружили, что те нарушения было не так уж трудно починить — требовалось только посвятить этому время и исследовать возможные решения. Уже через пару дней мы справились — нарушений стало ноль.

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

Но прежде чем мы начнём, давайте поговорим о том, почему это важно.

Зачем создавать доступный дизайн?

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

Более 56 миллионов людей (практически каждый пятый) в Соединенных Штатах и более 1 миллиарда человек во всём мире имеют ограниченные возможности. В 2017 году в суды штатов и федеральный суд США было подано 814 судебных исков на предмет доступности вебсайтов. Уже эти два факта должны убедить нас в том, как важно создавать доступный дизайн.

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

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

1. Добавьте контраста в цвет

Гвадалупе легче читать текст на кнопках с хорошим цветовым контрастом.

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

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

Есть инструменты, которые помогут быстро проверить уровень контрастности. Если вы используете Mac, я рекомендую приложение Contrast app, с которым можно моментально проверить контрастность с помощью селектора цвета. Если вы хотите получить более детализированную оценку, я рекомендую вбить значения цвета в WebAIM color contrast checker. Этот инструмент посчитает результат как для обычного, так и для крупного кегля, учитывая различные уровни соответствия (А, АА, ААА). Можно изменять значения цвета и видеть результаты в реальном времени.

Источник: WCAG Visual Contrast

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

Рене счастлива, когда графики и диаграммы доступны и для дальтоников.

Когда вы подаёте какой-то важный материал, не показывайте действие или ответную реакцию, используя один только цвет — он не может выступать сольным визуальным ориентиром. Людям с низкой остротой зрения или дальтонизмом будет нелегко понимать ваш контент.

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

Элементы с более комплексной информацией (таблицы, графики и диаграммы) особенно сложно читаются, если вы используете только цвет для разграничения данных. Для сообщения информации используйте визуальные аспекты — форму, ярлыки, размер. Также вы можете попробовать использовать различные узоры внутри ячеек с разной информацией, чтобы различия были более наглядными. Отличный пример исполнения этой рекомендации показан в режиме для нечувствительных к цвету (colorblind mode) в Trello. При активации режима надписи становятся более доступными за счёт добавления текстуры.

Лайфхак: распечатайте свою таблицу или график в черно-белом цвете и посмотрите, вся ли информация легко понимается. Также вы можете воспользоваться приложением вродеColor Oracle, которое в режиме реального времени продемонстрирует, что видят люди с наиболее частыми нарушениями зрения. Эти советы помогут вам убедиться в том, что информация на вашем сайте независима от цвета.

Источник: WCAG Visual Contrast Without Color

3. Создавайте удобные и различимые фокусные состояния

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

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

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

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

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

Источник: W3C Focus Visible

4. Используйте подписи или инструкции для элементов управления и текстовых полей

Мистер Лопез продолжает попытки превратить плейсхолдер в надпись.

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

Люди, использующие скринридеры, обычно используют клавишу Tab для навигации в форме и перемещения по элементам управления. Содержимое элементов <label> воспроизводятся вслух для каждого элемента управления. Любые элементы без <label>, например плейсхолдеры, обычно не читаются.

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

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

Источник: WebAIM Creating Accessible Forms

5. Напишите удобный альтернативный текст для изображений и другого нетекстового контента

На иллюстрации Робин нашел нового друга.

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

Существуют два способа представить альтернативный текст.

Через <alt> атрибут изображения.
Через контекст или окружение самого изображения.

Попробуйте описать, что происходит на изображении и как это соотносится с общей историей — это лучше, чем просто написать что-то вроде «изображение». Контекст определяет всё.

Бывает так, что изображение носит чисто декоративный характер, или оно излишне, потому что окружающий его контекст уже объясняет содержание. Тогда добавление атрибута <alt> заставит скринридер просто пропустить изображение. А если вы не добавите этот атрибут, некоторые скринридеры прочитают пользователю название файла. Это худший вариант из возможных.

Google разрабатывает технологию интерпретации изображений с помощью искусственного интеллекта, которая может описать картинку с точностью в 94%. Над этой open source моделью всё еще работают — надеемся, вскоре мы увидим, как она применяется в различных продуктах. А пока мы должны вручную предоставлять текст, описывающий значение и функцию изображений в нашем контенте.

Источник: W3C Using Alt Attributes

6. Корректно размечайте ваш контент

Ноа всегда хотел стать архитектором

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

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

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

Некорректное использование разметки негативно влияет на доступность. Не используйте HTML тэги только ради стиля. Скринридеры ориентируются на веб-страницах с помощью структуры заголовков (настоящих заголовков, не просто увеличенного текста с жирным начертанием) и их иерархии. Люди, приходящие на ваш сайт, могут послушать список всех заголовков, перепрыгнуть через контент в зависимости от типа заглавия, или сразу перейти к топовым заголовкам <h1>.

Источник: WebAIM Semantic Structure

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

Гейл перемещается по сайту с помощью клавиатуры, «прослушивая» веб-контент.

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

Если вы такой же, как я, вы обычно используете клавишу Tab для навигации по интерактивным элементам на веб-странице: ссылкам, кнопкам, или полям ввода. Фокусное состояние, о котором мы говорили выше, сопровождается визуальным индикатором вокруг выбранного элемента.

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

Хороший приём: потестируйте ваш сайт, используя только клавиатуру. Используйте клавишу Tab для перемещения между ссылками и формами для заполнения. Протестируйте использование клавиши Enter для выбора элементов. Удостоверьтесь, что все интерактивные компоненты работают без неожиданностей и по порядку. Если у вас получается перемещаться по всему сайту без мышки — вы на верном пути!

И последнее, но немаловажное. Будьте аккуратны с объемами вашей навигации — включая количество ссылок и длину текста. Перемещение по та́бу через длинные меню может быть затруднительно для людей с нарушениями опорно-двигательного аппарата. А прослушивание длинных ссылок будет утомительно для людей, пользующихся скринридером. Старайтесь быть лаконичными. Навигация станет проще, если использовать метки ARIA landmarks или такие структурные элементы HTML5, как <main> или <nav>.

Источник: W3C Keyboard

Помимо этих рекомендаций

Эти семь рекомендаций — прекрасное начало. Если вы хотите сделать продукт более доступным, я советую вам:

Организовать аудит доступности

Воспользуйтесь услугой аудита, чтобы узнать, работает ли ваш продукт с технологиями доступности и соответствует ли условиям уровня АА по WCAG 2.0. Используйте результаты аудита, чтобы исправить эти проблемы и проведите еще один тест.

Назначьте аудитора

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

Сделайте доступность частью вашего дизайн-исследования

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

Заключение

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

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

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

Создавайте дизайн ответственно. Благодарю вас.

Что почитать?

WebAIM: статьи, ресурсы и тренинги по веб-доступности
7 Things Every Designer Needs to Know about Accessibilityот Salesforce. Отличный материал с превосходными тезисами
UCLA Disabilities and Computing Program:не самый симпатичный и современный сайт, однако с кучей ценных ресурсов.
UX Myths: отличный список ошибочных мнений по поводу UX-дизайна, дополненный исследованиями. Некоторые из них относятся к доступности.
Color Accessibility Workflows: некоторые четкие примеры того, как «отполировать» цвета в дизайне, от Geri Coady.
W3C: Это библия гайдлайнов по веб-доступности — посещение этого ресурса может ошеломить вас. Но как только вы разберетесь в навигации, вы сможете найти потрясающие примеры, советы и ресурсы.

Полезные инструменты

WebAIM Color Contrast Checker: отличный сервис по проверке контрастности цветов, который выдаст вам результаты для маленького и крупного кегля в режиме реального времени.
Inclusive Components: библиотека образцов в форме блога, с фокусом на инклюзивный дизайн. Каждый пост посвящен часто используемому компоненту интерфейса, а завершается лучшим, наиболее функциональным и доступным вариантом компонента.
Color Oracle: бесплатный симулятор нечувствительности к цветам для Windows, Mac, и Linux. В режиме реального времени показывает вам, что видят люди с наиболее частыми нарушениями зрения.
Vox Product Accessibility Guidelines:исчерпывающий чеклист для дизайнеров, инженеров и проджект-менеджеров.
AXE Google Chrome Extension: проверьте любой сайт на наличие нарушений доступности, используя инспектор Chrome.
Contrast: приложение для платформы macOS для быстрой проверки уровня контрастности цвета по WCAG.

Hola, амигос. Я Пабло Стэнли, дизайнер в InVision Studio.

Я рисую серию комиксов под названием The Design Team и публикую штуки, имеющие отношение к дизайну в свой Twitter. Еще вы можете подписаться на мой канал в Youtube, Sketch Together, где вы найдете массу дизайн-туториалов.

Особая благодарность Courtney M. Sawyer, Raúl Martín, Matthew Zuckman, Gabriel Valdivia, и Lex Roman за всю оказанную помощь в написании этого поста. ❤️