Окт292018
Статьи по дизайну


Создание вашего сайта для пользователей с клавиатурой является важной частью большей доступности. Вот несколько советов по клавиатуре, которые вы можете быстро реализовать, используя базовые HTML и CSS.

A11y С начала

Эти советы являются частью веб-доступности: полное руководство по обучению, в котором мы собрали (19459003)

Что такое доступность клавиатуры?

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

Кому нужна клавиатура?

Это основные целевые группы доступности клавиатуры:

]

  • Пользователи с ограниченными физическими возможностями, которые с трудом используют мышь, используя сенсорное устройство или щелкают по мелочам.
  • Слепые или слабовидящие пользователи часто предпочитают перемещаться по сайтам с помощью специальных клавиатур Брайля.
  • . Ампутеи или лица с врожденной ампутацией (рождение без конечности или конечностей, особенно рук в этом случае) часто используют специальную аппаратную имитацию функциональности клавиатуры.
  • Любой, у кого просто нет доступа к функциональной мыши или сенсорной панели.

1. Проверьте свой сайт на доступность клавиатуры

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

Навигация быстрых ссылок в нижнем колонтитуле Tuts с помощью клавиши «src =« https://cms-assets.tutsplus.com/uploads/users/30/posts/31966/image/keyboard-3.gif »/> <figcaption> Навигация быстрых ссылок в нижнем колонтитуле Tuts + с помощью вкладки <strong> Tab </strong> </figcaption></figure> <p> Обратите внимание, как легко или сложно попасть в основное содержимое, щелкнуть пункт меню, заполнить форму, работать с ползунком или следить за текущей позицией на странице. Вы также можете протестировать обратное направление, используя комбинацию клавиш <strong> Shift + Tab </strong>. </p> <h2><span id= 2. Create Noteable : focus Стили

В CSS есть псевдо-класс : focus который запускается, когда пользователь щелкает или нажимает на элемент или выбирает его с помощью Клавиша . Состояние : фокус применимо только к фокусируемым элементам, а именно