ALLY: Контрольный список доступности пользовательского интерфейса для дизайнеров

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

Вспомогательные технологии:

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

Программы чтения с экрана:

Программы для чтения с экрана, такие как TalkBack от Google для Android, VoiceOver от Apple для iOS и JAWS от Freedom Scientific для ПК. Программы чтения с экрана читают вслух текст и элементы на экране (например, кнопки), включая видимый и невидимый замещающий текст.

Текст и типографика:

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

• Не полагайтесь на цвет как на единственный способ передачи информации.
• Убедитесь, что между текстом и цветом фона достаточно контраста. Вот полезный инструмент:https://webaim.org/resources/contrastchecker/
• Проверьте свой дизайн с помощью симуляторов дальтонизма, чтобы убедиться, что он доступен для людей с дальтонизмом.

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

• Используйте четкие и лаконичные метки для всех полей формы.
• Используйте правильные типы ввода для полей формы (например, электронная почта, телефон и т. д.).
• Используйте правильные сообщения об ошибках и предоставьте четкую обратную связь при отправке формы, используя цвет, толщину шрифта или подчеркивание текста.
• Убедитесь, что форма удобна для навигации и может быть заполнена с помощью навигации только с клавиатуры.
• Фокус дизайна указывает на наличие контрастных областей с коэффициентом контрастности не менее 3:1. Это называется контрастной областью (см. ниже).

• Предоставляйте стенограммы или субтитры для всего аудио- и видеоконтента.
• Убедитесь, что элементы управления звуком и видео доступны и просты в использовании.
• Предоставьте альтернативные форматы для мультимедийного контента (например, аудиоописание для видеоконтента).
• Для разработчиков: используйте aria-labels и теги Alt для изображений и мультимедиа, чтобы описать, что они из себя представляют. В зависимости от семантики это гарантирует, что программы чтения с экрана не пропустят их.
• Замещающий текст переводит визуальный пользовательский интерфейс в текстовый пользовательский интерфейс. Альтернативный текст — это короткая метка (до 125 символов) в коде, описывающая изображение для пользователей, которые их не видят.

• Убедитесь, что дизайн оптимизирован для мобильных устройств.
• Используйте адаптивный дизайн, чтобы макет адаптировался к разным размерам экрана.
• Убедитесь, что сенсорные цели достаточно велики, чтобы их можно было легко активировать. Размер области должен быть не менее 44x44 пикселей и 48x48dp для Android. Подробнее здесь

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

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

Дополнительная литература и ресурсы:

https://m2.material.io/design/usability/accessibility.html

https://design.gitlab.com/accessibility/keyboard-only

https://web.dev/focus/

https://www.sarasoueidan.com/blog/focus-indicators/