Размещаемая в интернете информация должна быть доступной для широкого круга пользователей, в том числе для людей с ограниченными возможностями.
Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает нормы, следуя которым можно создать веб-среду, удобную большинству пользователей независимо от их физических возможностей.
Пройдемся по списку рекомендаций к контенту стандарта WCAG.
Информация и элементы пользовательского интерфейса должны легко восприниматься.
Все нетекстовые элементы должны сопровождаться текстовым описанием
Коэффициент контрастности цветов должен быть не менее 4.5 : 1
Пример текста с высокой контрастностью.
Контент должен быть адаптивным и изменяться без потери информации или структуры
Попробуйте изменить размер окна или перевернуть девайс, блоки перестроятся.
Размер текста может быть изменен без вспомогательных технологий до 200% без потери содержимого
Попробуйте увеличить размер при помощи клавиатуры:
Межстрочный интервал должен быть минимум в 1,5 раза больше размера шрифта
Этот текст имеет недостаточный межстрочный
интервал.
Продолжение текста с новой строки.
Интервал между абзацами должен как минимум в 2 раза превышать размер шрифта
Первый абзац.
Второй абзац. Этот текст имеет увеличенный интервал между абзацами.
Расстояние между буквами должно как минимум в 0,12 раза превышать размер шрифта
Пример текста с увеличенным расстоянием между буквами.
Интервал между словами должен как минимум в 0,16 раза превышать размер шрифта
Пример текста с увеличенным расстоянием между словами.
Через DevTools -> Elements выберите любой элемент на странице. В секции Styles описаны CSS стили элемента: шрифт, цвет и др.
При наведении на элемент обратите внимание на секцию ACCESSIBILITY во всплывающем окошке. В поле Contrast отображается текущее значение контрастности элемента и предупреждение в случае недостаточного уровня контрастности.
Пользовательский интерфейс должен быть легким в использовании.
Доступность с клавиатуры
Вся функциональность должна быть доступна для взаимодействия с клавиатуры.
Достаточное время
Пользователю должно быть предоставлено достаточное количество времени для чтения и взаимодействия с контентом.
Безопасность восприятия
Контент не должен воздействовать на физическое состояние пользователя.
Удобная навигация
Пользователь должен быть обеспечен удобными способами навигации и поиска контента.
Попробуйте пройтись по странице, используя клавиатуру.
| Клавиша | Описание |
|---|---|
| Tab | Перемещает фокус на следующий интерактивный элемент (ссылки, кнопки, поля ввода и т.д.) |
| Shift + Tab | Перемещает фокус на предыдущий интерактивный элемент. |
| Enter | Активирует текущий элемент с фокусом (например, нажимает кнопку или переходит по ссылке). |
| Space | Прокручивает страницу вниз. Активирует элемент (например, переключает состояние чекбокса) в случае, если элемент с фокусом является кнопкой, чекбоксом или радиокнопкой. |
|
↑
←
↓
→
|
|
Информация и функциональность пользовательского интерфейса должны быть понятными.
Контент должен поддерживать широкий спектр пользовательских устройств и вспомогательных технологий:
Экранные чтецы и лупы
Управление при помощи клавиатуры
Управление голосом
Альтернативные устройства ввода
В виде расширения для Chrome и онлайн в браузере доступен инструмент для проверки качества доступности контента WAVE Evaluation Tool.
WAVE следует стандарту WCAG и позволяет автоматизировать ряд проверок. Как бонус, WAVE имеет встроенную функциональность для подбора контрастности цветов.
Также в виде расширения можно попробовать axe DevTools, тоже опирающийся на стандарт WCAG. Чтобы воспользоваться им после установки:
Уровень повышен!
