Tabindex, очерчивается только с помощью кнопки табуляции

goltornate спросил: 28 апреля 2018 в 08:55 в: css

Я пытаюсь установить доступность на своем сайте и управлять навигацией с помощью кнопки табуляции, я использую tabindex. Я заметил, что элементы с tabindex имеют контур, как на вкладке фокуса, так и на клике. Я бы удалил контуры при щелчке (или перетаскивании) и оставил его на вкладке.

Есть ли решение (возможно, в css) для решения этой проблемы?


3 ответа

לבני מלכה ответил: 28 апреля 2018 в 11:13

этот код удалит outline только, когда вы нажмете кнопку мыши, используйте mousedown, чтобы удалить outline и mouseup, чтобы вернуть его

<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'"  tabindex="1">try me</button><br>
<br>
<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'"  tabindex="2">try me 2</button><br>

, если вы хотите нажать Tab (на клавиатуре )
button:focus{
outline:none;
}
goltornate ответил: 28 апреля 2018 в 10:48
этот метод удаляет контур до перезагрузки
לבני מלכה ответил: 28 апреля 2018 в 11:13
Теперь вы можете увидеть мое редактирование .. set outlineColor, как вы хотите
לבני מלכה ответил: 28 апреля 2018 в 11:19
Я предлагаю не использовать outline:none цвет набора для контура
slugolicious ответил: 28 апреля 2018 в 12:13
не работает для меня. если я нажимаю кнопки, я вижу схему фокуса. это хорошо. когда я нажимаю на кнопки с помощью мыши, контур исчезает. это тоже хорошо. однако, если теперь я снова перейду к кнопкам, контур исчезнет. это плохо.
לבני מלכה ответил: 28 апреля 2018 в 03:11
@slugolicious посмотреть сейчас
Adam ответил: 28 апреля 2018 в 05:05

Когда вы нажимаете на элемент с помощью мыши, вы перемещаете фокус фокусировки и фокусировку клавиатуры.

WCAG требует, чтобы индикатор фокусировки клавиатуры всегда отображался на любом функциональном элементе клавиатуры ( независимо от того, как он был перемещен). Установив tabindex, вы сделали его доступным для клавиатуры, поэтому вы должны подчиняться этому правилу, даже если элемент был предварительно активирован с помощью мыши, заставляя туда перемещать фокус клавиатуры.

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

slugolicious ответил: 28 апреля 2018 в 05:39
пока работает стиль ": focus", вы должны быть в порядке с wcag 2.4.7. фокус мыши не требуется под wcag. я думаю, что OP только пытался удалить фокус мыши и оставить только фокус клавиатуры. с голосовым recog (например, драконом),": focus" должен по-прежнему работать.
Steven Lambert ответил: 12 мая 2018 в 06:47

В настоящий момент нет простого способа добиться этого без JavaScript, обнаруживающего различия между фокусом на клавиатуре и мыши. Тем не менее, есть новый класс pusedo CSS, называемый: focus-visible (ранее называемый :focus-ring), который решает эту проблему. Это позволяет вам настраивать индикатор фокусировки только для пользователей клавиатуры, не применяя его к пользователям мыши.

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

Дополнительный ресурс: A11ycast focus-ring