Определение наиболее важных аспектов доступности

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

Что такое доступность? Что значит быть доступным?

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

Доступность = Инклюзивность

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

Доступность = качество

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

WCAG 2.0 и WCAG 2.1 — это стабильные технические стандарты, на которые можно ссылаться. У них есть 12–13 руководств, которые организованы по 4 принципам: воспринимаемый, работоспособный, понятный и надежный. Для каждого руководства существуют поддающиеся проверке критерии успеха трех уровней: A, AA и AAA
👉 https://www.w3.org/WAI/WCAG21/quickref/

Проблемы доступности

Давайте подумаем о проблемах доступности, с которыми может столкнуться пользователь во время веб-серфинга (и я уверен, что каждый из нас сталкивался хотя бы с одной из них не раз!)

👉 Визуальный

  1. Слепота
  2. Плохое зрение
  3. Дальтонизм
  4. Использование мобильного телефона в солнечный день

Что мы можем сделать?

  • Использование нативных HTML-элементов
  • Использовать альтернативный текст для графики
  • Используйте цвета с высокой контрастностью
  • Включить навигацию с помощью клавиатуры
  • Размещайте связанный контент близко друг к другу
  • Разверните сокращения и аббревиатуры

👉 Слух

  1. Глухие люди
  2. Слабослышащих
  3. Люди, которые не хотят беспокоить

Что мы можем сделать?

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

👉 Мотор

  1. Неумение пользоваться мышью
  2. Медленное время отклика
  3. Ограниченный контроль мелкой моторики
  4. Пользователи застряли в шатком автобусе
  5. Пользователи с маленькими телефонами

Что мы можем сделать?

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

👉 Познавательный

  1. Инвалидность в обучении
  2. Легко отвлекаемые люди
  3. Людям, у которых есть трудности с концентрацией внимания
  4. Родители с маленькими детьми

Что мы можем сделать?

  • Понятный контент: правильная структура (заголовки, списки и разделение)
  • Краткие и четкие сообщения
  • Делать ошибки понятными для пользователя, чтобы он мог легко их исправить
  • Дайте ответ, который ожидает пользователь
  • Будьте проще (например, не используйте курсив)
  • Используйте автозамену и предлагайте варианты
  • Делайте напоминания и подсказки

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

Инструменты и ресурсы

Funkify: расширение для Chrome, которое поможет вам познакомиться с Интернетом и интерфейсами глазами экстремальных пользователей с разными способностями и ограниченными возможностями.
👉 https://www.funkify.org

Wave: набор инструментов оценки, которые помогают авторам сделать свой веб-контент более доступным для людей с ограниченными возможностями
👉 https://wave.webaim.org/

👉 Инклюзивный дизайн компонентов: https://inclusive-components.design/
👉 a11ycasts: bit.ly/a11ycasts
👉 Руководства BBC a11y: http://www.bbc.co.uk /доступность/путеводители/

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.