Памятка для понимания доступности веб-контента

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

В конце статьи я добавил несколько ресурсов, которые, надеюсь, побудят вас провести дополнительные исследования по этой теме. Наслаждаться!

Что такое доступность?

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

Доступно = включительно

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

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

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

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

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

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

👉 Визуальный

1. Слепота

1. Плохое зрение

1. Дальтонизм

1. Использование мобильного телефона в солнечный день

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

• Использование собственных элементов HTML

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

• Используйте цвета с высокой контрастностью

• Включить навигацию с помощью клавиатуры

• Размещайте связанный контент близко друг к другу

• Разверните сокращения и акронимы

👉 Слух

1. Глухие люди

1. Слабослышащие

1. Люди, которые не хотят беспокоить

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

• Используйте субтитры для всех видео

• Не помещайте контент только в видео и аудио, добавляйте также текст

• Не делайте телефон единственным средством связи с пользователями (например, в форме или на сайте компании)

• Пишите простым английским языком

👉 Мотор

1. Неумение пользоваться мышью

1. Медленное время отклика

1. Ограниченный контроль над мелкой моторикой.

1. Пользователи застряли в шатком автобусе

1. Пользователи с маленькими телефонами

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

• Включить навигацию с помощью клавиатуры

• Создавайте большие интерактивные пространства

• Делайте сообщения четкими и краткими

• Слайдеры крутые, но их сложно использовать, хорошо, что есть возможность печатать

• Нет коротких тайм-аутов

• Не ставьте вместе слишком много интерактивных элементов.

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

1. Неспособность к обучению

1. Легко отвлекаемые люди

1. Люди, которым трудно сосредоточиться

1. Родители с маленькими детьми

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

• Понятное содержание: правильная структура (заголовки, списки и разделение)

• Краткие и четкие сообщения

• Делать ошибки понятными для пользователя, чтобы он мог легко их исправить

• Дайте ответ, который ожидает пользователь

• Будьте проще (например, не используйте курсив)

• Используйте автозамену и предлагайте варианты

• Отправляйте напоминания и подсказки

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

Теперь вы можете догадаться, что означает a13y?

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

Фанкифай

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

Волна

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

Вы также можете попробовать Inclusive Components Design, a11ycasts и руководства BBC a11y.