Какие элементы получают стиль фокусировки по умолчанию?

Question

При перемещении по страницам элементов формы по умолчанию я заметил, что элементы и select не получают одинаковый стиль оформления, который определенными типами input, textarea, и тег a получают сфокусированы.

В this codepen я попробовал ряд различных типов кнопок:

• button элемент
• button элемент с type="submit" & role="button"
• button элемент с tabindex="0"
• span элемент с role="button"
• input элемент с type="submit" value="Submit"

Ни один из которых получит по умолчанию браузера сосредоточены стили.

Эти элементы всегда были такими? Я использую Chrome 43.0.2357.124, но Firefox отображает границу тени синего поля по умолчанию. Я всегда читал, чтобы не переделывать стили фокуса со ссылками и элементами формы по причинам доступности, но эти элементы даже не имеют. Как кто-то, кто использовал эти фокусные штаты, пока табулирует через страницу, знает, где они находятся на этой странице? Я знаю, что могу создавать свои собственные стили фокуса, но не должен ли браузер иметь их по умолчанию?

Answer 1

Это зависит от браузера. Вы также можете изменить, какие элементы являются настраиваемыми. Например, Safari:

По умолчанию вкладки-доступ отключен в сафари (!). Чтобы включить его, отметьте «Настройки> Дополнительно> Нажмите вкладку, чтобы выделить каждый элемент на странице».

Чтобы ответить на другие вопросы:

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

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

Я всегда читал не возиться с фокус стилей со ссылками и образуют элементы по причинам доступности

Что доступность причины являются? Вы более или менее правильны, но сначала вам нужно определить, каковы ваши опасения относительно доступности. Вы может воблер с фокусом стилей. Если вы испортите их до такой степени, что они победят цель доступности, то да, в этот момент вы перепутались и, вероятно, не должны были переделывать стили.

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

Как мог кто-то, кто использовал эти состояния фокуса, в то время как табуляция через страницу знала, где они находятся на этой странице?

Они не видеть состояние фокусировки, если у вас есть визуальное состояние фокусировки. Но слепые читатели, использующие устройство чтения с экрана, слышат, что элемент выбран, и это важный момент для них. Если у вас возникнут такие проблемы, я могу предложить проверить ChromeVox, который является устройством для чтения с экрана для Chrome, поэтому вы можете увидеть, как выглядит табуляция/прослушивание страницы.