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

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

При проектировании для обеспечения доступности необходимо учитывать четыре основных области инвалидности: зрение, слух, мобильность и познание.

Визуальные проблемы могут варьироваться от неспособности различать цвета до полного отсутствия зрения.

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

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

  • Сделайте контент понятным, используя текстовые альтернативы для всего контента, который не является строго текстовым.
  • Убедитесь, что вы проверили, что ваши компоненты пользовательского интерфейса все еще работают без звука.

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

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

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

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

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

Доступен ли ваш пользовательский интерфейс?

Резюме (tl; dr)

При проверке вашей заявки на доступность спросите себя:

  • Можете ли вы использовать свой компонент пользовательского интерфейса только с клавиатурой? Удалось ли сосредоточиться и избежать ловушек? Может ли он реагировать на соответствующие события клавиатуры?
  • Можете ли вы использовать свой компонент пользовательского интерфейса с программой чтения с экрана? Вы предоставили текстовые альтернативы для любой информации, которая представлена ​​визуально? Вы добавили семантическую информацию, используя ARIA?
  • Может ли ваш компонент пользовательского интерфейса работать без звука? Выключите динамики и изучите варианты использования.
  • Может ли это работать без цвета? Убедитесь, что ваш компонент пользовательского интерфейса может использовать тот, кто не видит цвета. Полезным инструментом для имитации дальтонизма является расширение Chrome под названием SEE (попробуйте все четыре формы симуляции дальтонизма). Вы также можете быть заинтересованы в расширении Daltonize, которое также полезно.
  • Может ли ваш компонент пользовательского интерфейса работать в режиме высокой контрастности? Все современные операционные системы поддерживают режим высокой контрастности. High Contrast - это расширение для Chrome, которое может помочь здесь.

Собственные элементы управления (такие как