Tabindex, выделяется только кнопкой табуляции

Question

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

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

Answer 1

Это не пойдет.

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

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

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

Answer 2

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

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

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

Answer 3

этот код удалит 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;
}