Дек92019
Статьи по дизайну


        

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

Более 1 миллиарда людей живут с той или иной формой инвалидности. Возможно, вы в какой-то момент находились в громкой комнате, пытаясь услышать разговор вокруг вас, или в условиях слабого освещения, пытаясь найти что-то в темноте. Вы помните разочарование, которое вы испытали при этом обстоятельстве? Теперь представьте, было ли это временное состояние постоянным. Насколько отличается ваш опыт работы в Интернете?

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

    

    

  

    

    

  

    

    

  

    

    

  

Зрение Слух Мобильность
— Слабое зрение
— Слепые
— Слепые
— Катаракты
— Солнечные блики 		— Слуховой аппарат
— Глухой
— Шум
— Ушная инфекция 		— Сломанная рука
— Травма спинного мозга
— Ограниченная ловкость
— Полные руки
Когнитивная речь Нейронные
— Проблемы с обучаемостью
— Сонливость или отвлечение
— Мигрень
— Аутизм
— Судороги 		— Окружающий шум
— Боль в горле
— Речевые затруднения
— Невозможно говорить 		— Депрессия
— ПТСР
— Биполярное
— Тревога

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

  • Убедитесь, что для текстового содержимого соблюден минимальный порог контрастности.

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

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

Подсказка : при проверке элемента в Chrome, Edge и Firefox DevTools отображает всплывающую подсказку о свойствах CSS, которая включает быструю проверку соотношения цветового контраста.

При наведении курсора на элемент, который вы проверяете, отображается сводная информация, включая коэффициент цветовой контрастности "loading =" lazy "/> </p> <p> Я лично живу с плохим зрением, и мне стыдно сказать, что я тот человек, который всегда фокусируется на сайтах, их DevTools и терминалах. Хотя поддержка масштабирования почти никогда не стоит на первом месте, оптимизация для пользователей со слабым зрением всегда ценится … 🤓 </p> <p> <strong> Проблемы со слухом </strong> означают, что у пользователя могут быть проблемы со слухом, издаваемым на странице. </p> <ul> <li> <p> Сделать контент понятным, используя текстовые альтернативы для всего контента, который не является строго текстовым. </p> </li> <li> <p> Убедитесь, что вы проверяете, что ваши компоненты пользовательского интерфейса все еще работают без звука. </p> </li> </ul> <p> <img src= 

   / *
Если пользователь выразил предпочтение уменьшенному движению, не используйте анимацию на кнопках.
* / 
 @media   (  предпочитает уменьшенное движение  :   уменьшать  )   {
  Кнопка    {
     анимация  :   нет  ; 
  } 
}

  • Избегайте взаимодействий, основанных на времени.

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

Подсказка: Команда по доступности Gov.uk предлагает отличные цифровые плакаты, которые можно и не нужно использовать для распространения информации о лучших практиках в вашей команде:

Миниатюра плакатов о доступности "loading =" lazy "/> </p> <div id=

Содержание статьи

  
  
  Доступны ли компоненты вашего интерфейса?

  
  
  Резюме (tl; dr)

При проверке доступности компонентов пользовательского интерфейса вашей страницы спросите себя:

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

  • Можете ли вы использовать свой компонент пользовательского интерфейса с программой чтения с экрана? Предоставили ли вы текстовые альтернативы для любой информации, представленной визуально? Вы добавили семантическую информацию, используя ARIA?

  • Может ли ваш компонент пользовательского интерфейса работать без звука? Отключить динамики и просмотреть варианты использования.

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

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

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