Создание вашего сайта для пользователей с клавиатурой является важной частью большей доступности. Вот несколько советов по клавиатуре, которые вы можете быстро реализовать, используя базовые HTML и CSS.
Содержание статьи
A11y С начала
Эти советы являются частью веб-доступности: полное руководство по обучению, в котором мы собрали (19459003)
Что такое доступность клавиатуры?
Клавиатура может быть основным средством для некоторых пользователей, чтобы перемещаться по веб-сайтам. В настоящее время, когда большинство веб-интерфейсов разработаны с помощью курсоров мыши и сенсорного взаимодействия, клавиатурная навигация игнорируется.
Кому нужна клавиатура?
Это основные целевые группы доступности клавиатуры:
]
- Пользователи с ограниченными физическими возможностями, которые с трудом используют мышь, используя сенсорное устройство или щелкают по мелочам.
- Слепые или слабовидящие пользователи часто предпочитают перемещаться по сайтам с помощью специальных клавиатур Брайля.
- . Ампутеи или лица с врожденной ампутацией (рождение без конечности или конечностей, особенно рук в этом случае) часто используют специальную аппаратную имитацию функциональности клавиатуры.
- Любой, у кого просто нет доступа к функциональной мыши или сенсорной панели.
1. Проверьте свой сайт на доступность клавиатуры
. Самая важная цель доступности клавиатуры — сделать каждый интерактивный элемент, такой как ссылки и элементы управления форматом, доступными с помощью клавиши Tab . Это то, как пользователи только на клавиатуре перемещаются по веб-странице. Тестирование вашего веб-сайта для доступа к клавиатуре на самом деле довольно просто: просто нажмите клавишу Tab и перейдите от верхней части страницы к нижней, выделив активные элементы во время вашего движения.
: focus
Стили
В CSS есть псевдо-класс : focus
который запускается, когда пользователь щелкает или нажимает на элемент или выбирает его с помощью Клавиша . Состояние : фокус
применимо только к фокусируемым элементам, а именно
и
Каждый браузер имеет свой собственный стиль : focus
— обычно пунктирная черная контур вокруг элемента или размытое свечение, однако многие дизайнеры находят это не по своему вкусу и полностью удаляют его. Это на самом деле ошибка номер один, которая разрушает доступность клавиатуры на веб-страницах. Если вам не нравятся стили по умолчанию, используйте что-то, что соответствует дизайну вашего сайта.
3. Использовать нецветные указатели для ссылок
Гиперссылки не следует различать только по цвету. Этот принцип обычно упоминается в отношении визуальной доступности, поскольку люди с низким зрением находят различия между определенными цветами, которые трудно различить. Однако хорошо видимые ссылки также важны для доступности клавиатуры. Пользователи, работающие только с клавиатурой, должны как можно быстрее определять ссылки. Это помогает им отсканировать страницу и выяснить, как перейти к интересующей их части.
Аналогично стилям : focus
гиперссылки также имеют стиль браузера по умолчанию — синие подчеркивают в большинстве случаев. Однако дизайнеры часто удаляют подчеркивание и используют только цвета, чтобы указать наличие ссылки.
title
а также не считайте нецветным обозначением. Например, никогда не делайте этого:
кликните сюда
Вместо этого сделайте следующее:
Важная информация
WCAG 2.0 также предупреждает о проблемах доступности атрибута title. Либо используйте его с осторожностью, либо вообще не используйте.
4. Использование элементов Native Control
Формы являются интерактивными элементами, поэтому они должны быть доступны с клавиатуры. Пользователи с клавиатурой должны иметь возможность заполнять формы, нажимать кнопки, использовать ползунки диапазона, выбирать опции и управлять элементами управления с легкостью. Если у вас есть какие-либо формы на вашем сайте, вы должны протестировать их один за другим, используя клавишу Tab . Подумайте о формах регистрации, формулах для рассылки новостей, формах регистрации, формах комментариев, тележках и т. Д.
. Лучший способ создания доступных форм — использовать встроенные элементы управления везде, где это возможно. Собственные элементы управления имеют встроенную доступность клавиатуры, что означает, что они являются настраиваемыми и реагируют на события нажатия клавиш по умолчанию. Они следующие:
Например, вы можете создать ползунок диапазона доступных клавиатур со следующим HTML:
Пользователи клавиатуры могут сначала сфокусировать его на вкладке затем переместите ползунок вверх и вниз с помощью Space .
Если вам почему-то нужно использовать нефокусный тег HTML для интерактивного элемента, вы можете сделать его сфокусированным с атрибутом tabindex = «0»
. Например, вот
Нажми на меня
Атрибут role = "button"
в приведенном выше фрагменте является ориентировочной ролью ARIA. Хотя пользователи, не использующие клавиатуру, не нуждаются в нем, это незаменимо для пользователей экрана и визуальной доступности.
Даже если неродная кнопка была сделана настраиваемой, она по-прежнему уступает ее родному аналогу с точки зрения клавиатуры доступность. Вы сразу поймете это, когда попытаетесь добавить обработчик события к кнопке. Вот как выглядит прослушиватель событий щелчка с помощью нативного
элемента:
И вот эквивалент с помощью кнопки div:
Нажми на меня
Если вы нажмете кнопки с помощью мыши или сенсорной панели, вы увидите оба предупреждающих сообщения. Однако, если вы переходите к каждой кнопке с помощью клавиши Tab и нажимаете Введите для их обработки, вы увидите только первое сообщение, принадлежащее собственной кнопке. Чтобы сделать нестандартную кнопку обработкой ввода с клавиатуры, вам также необходимо определить обработчик события нажатия клавиш отдельно:
Нажми на меня
Теперь, когда пользователи клавиатуры нажимают Enter
они также видят сообщение, принадлежащее неродной кнопке. Как вы можете видеть, гораздо проще и быстрее использовать родную версию. Итак, если у вас нет веских причин не использовать их, всегда используйте собственные элементы управления.
5. Добавить ссылку «Skip to Main Content»
Добавление Перейти к основному содержанию или Пропустить навигацию ссылка на ваши веб-страницы очень помогает пользователям только для клавиатуры. В большинстве случаев эти пользователи не захотят переходить через все навигационные ссылки, прежде чем они начнут читать содержимое. Это особенно актуально, когда они просматривают более одной страницы вашего сайта. Представьте себе, что без ссылки на навигационную навигацию они должны проходить через одни и те же навигационные ссылки на главной странице каждый раз . Это не похоже на особенно интересную деятельность.
Чтобы создать функционирующую навигационную навигационную ссылку, вам необходимо привязать ее к основному контенту с помощью id
и href
HTML-атрибутов следующим образом:
Перейти к основному содержаниюОсновное содержание
Вам также необходимо добавить атрибут tabindex = "- 1"
в контейнер основного содержимого. Это тот же самый tabindex, который мы использовали выше, чтобы сделать необязательную кнопку фокуса. Атрибут tabindex
используется для изменения порядка навигации по умолчанию. При значении 0
он делает неосновные элементы фокусируемыми. Со значением -1
он также делает элементы ориентируемыми, но они становятся недоступными с клавиатурной навигацией по умолчанию. Для некоторых браузеров, таких как Chrome и IE, требуется наличие tabindex = "- 1"
в отношении ссылки на пропустить навигацию, поэтому никогда не опускайте его.
для пользователей клавиатуры
Вы можете использовать CSS, чтобы сделать навигационную ссылку пропуска видимой только для пользователей клавиатуры. В своем состоянии по умолчанию спрячьте ссылку от обычных пользователей, разместив ее вне области просмотра. Затем раскройте его для пользователей клавиатуры, создав отдельные стили для состояния фокусировки, которые запускаются, когда пользователь нажимает клавишу Tab .
Вы можете увидеть этот эффект в действии на сайтах, таких как webaim.org, www.w3.org и (как обычно) www.gov.uk:
Когда пользователь нажимает клавишу Tab элемент .skip-main
получает свое состояние фокусировки, и на экране появляется ссылка для перехода по экрану.
Вы можете быстро проверить, как это работает, если вы нажмете на самую верхнюю часть демо ниже и нажмите клавишу Tab . Возможно, вам будет легче открыть демо ниже в полноэкранном режиме.
Следующие шаги
В этой статье я поделился некоторыми основными советами по доступности клавиатуры, которые вы можете реализовать с использованием HMTL и CSS. Есть и другие, более продвинутые вещи, которые вы могли бы сделать для доступа к клавиатуре. Например, вы могли бы:
В дополнение к этим советам, избегайте использования CAPTCHA там, где это возможно, поскольку у них есть серьезные проблемы с доступом, как для чтения с экрана, так и для пользователей с клавиатурой. Если вам все еще нужно их использовать, предоставьте более двух способов их решения, иначе пользователи с ограниченными возможностями будут пытаться обработать ваши формы. Сообщите нам, если у вас есть какие-либо подсказки для доступа к клавиатуре!