СтатьяПревратите сострадание в действие, избегая этих 8 ошибок в доступном дизайне

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

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

1. Клавиатурные ловушки

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

Советы:

• Основной контент: подумайте о том, чтобы пользователи могли легко пропустить навигацию верхнего уровня для доступа к основному контенту.
• Шаблоны пользовательского интерфейса. Следуйте семантике общих шаблонов, таких как «Переключатель», «Вкладки», «Таблицы», «Модальные окна» и атрибуты ARIA.
• Использование при наведении: не скрывайте текст или действия за состоянием наведения. Если пользователь, использующий только клавиатуру, не видит, что контент/кнопки существуют, он не может перемещаться по странице.

Пример хороших ссылок для пропуска № 1

Пример хороших ссылок для пропуска № 2

2. Недостаточный цветовой контраст

Недостаточный цветовой контраст влияет на способность людей воспринимать информацию визуально. Убедитесь, что между текстом и его фоном достаточно контраста, чтобы текст можно было прочитать. Коэффициент контрастности между текстом и фоном текста должен быть не менее 4,5 к 1. Однако, если размер текста составляет не менее 24 пикселей или 19 пикселей полужирным шрифтом, минимальное значение снижается до 3 к 1.

Советы:

• Цветовые палитры: помните об основных цветах. Кроме того, при выборе цветов помните о требованиях к цветовому контрасту.
• Не полагайтесь только на цвет: используйте комбинации формы, цвета и текста (а не только один) для передачи смысла и будьте последовательны. Предоставьте как минимум два индикатора, чтобы люди, которые не могут легко различать цвета, могли все же понять ваш контент.
• Исключения: текст, изображения текста, картинки и логотипы, которые не требуются для понимания смысла контента или являются чистым «украшением».

Пример недостаточного контраста

3. Текст в изображениях

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

Советы:

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

Пример хорошего текста на изображении

4. Состояния скрытого фокуса

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

Советы:

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

Состояния скрытого фокуса

Хорошие состояния фокусировки

5. Запутанная иерархическая структура

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

Советы:

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

Плохая иерархия

Хорошая иерархия

6. Чрезмерная когнитивная нагрузка

Четко сообщайте информацию, которую легко понять. Создавайте информацию таким образом, чтобы ее было легко воспринимать тем, у кого синдром дефицита внимания и гиперактивности (СДВГ), аутизм или расстройства аутистического спектра.

Советы:

• Будьте лаконичны: используйте короткие предложения и визуальные подсказки для разделения информации. Пример: перечислите группы, используя числа или маркеры.
• Сведите к минимуму когнитивную нагрузку: создайте повествование, в котором информация представлена ​​в нужном месте в нужное время. Избегайте представления плотных абзацев информации, которые можно разбить. Избегайте длинных линий.

7. Недифференцированные гиперссылки

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

Советы:

• Будьте конкретны: используйте описательные слова для кнопок вместо расплывчатой ​​терминологии, чтобы результат был предсказуем.
• Ссылки без подчеркивания: текст ссылки должен иметь коэффициент контрастности 3:1 по сравнению с окружающим текстом без ссылки.
• Не полагайтесь только на цвет: ссылка должна представлять «нецветное обозначение» как при наведении мыши, так и при фокусе клавиатуры. Например: тени, масштаб, переходы/преобразования, изменение цвета или подчеркивание.

Плохие гиперссылки

Хорошие гиперссылки

8. Неразборчивая типографика

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

Советы

• Предоставьте пользователям контроль: не запрещайте пользователям настраивать свой собственный опыт чтения, изменяя размер основного текста на меньший размер шрифта. Вы можете сделать это, установив размер шрифта на 100% и используя относительные размеры, чтобы установить иерархию между заголовками. Текст должен оставаться разборчивым при масштабе 200%.
• Уменьшите подчеркивание, курсив и заглавные буквы: эти формы букв труднее распознать и прочитать.
• Выровняйте длинноформатный текст по левому краю: создавайте согласованные макеты с линейными путями, за которыми будет следить глаз.

Увеличение на 100%

Измените размер текста. Убедитесь, что ваши страницы доступны и могут использоваться пользователями с нарушениями зрения и пользователями с плохим зрением. Измените размер текста и убедитесь, что все на странице работает. Повторяйте, пока не дойдете до масштаба 200%. Кажется простым? Это.

Шаги для проверки типографики:

1. Откройте браузер и измените размер текста на 200 процентов. Нажмите «Просмотр», выберите «Масштаб», а затем нажмите «Увеличить» (Ctrl/Cmd ++), чтобы увеличить размер текста.
2. Посмотрите, как отреагировал контент на экране. Весь контент на странице должен оставаться читабельным, и ни одна функциональность не должна быть потеряна.
3. Проверьте, работают ли по-прежнему взаимодействия, не перекрывается ли текст, не обрезан ли важный текст и не обрезан ли текст.

Масштаб на 200%

Советы:

1. Откройте браузер и измените размер текста на 200 процентов. Нажмите «Просмотр», выберите «Масштаб», а затем нажмите «Увеличить» (Ctrl/Cmd ++), чтобы увеличить размер текста.
2. Посмотрите, как отреагировал контент на экране. Весь контент на странице должен оставаться читабельным, и ни одна функциональность не должна быть потеряна.
3. Проверьте, работают ли взаимодействия, не перекрывается ли текст, не обрезан ли важный текст или не обрезан ли текст.

Ресурсы

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

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

• Узнайте, почему компаниям важно учитывать доступность веб-сайтов (и избегать корпоративных исков).
• Настройтесь на подкаст Solving for B° о важности веб-доступности.

Цветовой контраст

• Web AIM Contrast Checker
• Раскрашиваемая проверка контраста

Структура

• Расширение Chrome для карты заголовков
• Библиотека шаблонов проекта A11Y

Кредиты

• Проект A11Y
• w3.org — WCAG 2.0
• w3.org — Стандарты и обзор
• Юзабилити.org
• Исследование доступности в IBM
• Музеи Карнеги в ПиттсбургеDisney.com хорошая иерархия