哪些元素接收默认焦点样式?

What elements receive default focus styling?

在浏览默认表单元素的页面时,我注意到 buttonselect 元素没有收到与某些 input 类型相同的边框样式,textareaa 标签在获得焦点时获得。

this codepen 中,我尝试了一系列不同类型的按钮:

None 其中接收浏览器的默认焦点样式。

这些元素一直都是这样吗?我正在使用 Chrome 43.0.2357.124 但 Firefox 显示默认的蓝色框阴影边框。出于可访问性原因,我一直读到不要修改带有链接和表单元素的焦点样式,但这些元素甚至没有。使用 Tab 键浏览页面时使用这些焦点状态的人如何知道它们在该页面中的位置?我知道我可以制作自己的焦点样式,但浏览器不应该默认拥有它们吗?

这取决于浏览器。您还可以更改可聚焦的元素。例如,Safari:

By default tab-access is disabled in safari(!). To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".

回答您的其他问题:

How would someone who used those focus states while tabbing through a page know where they're located within that page? I know I can make my own focus styles but shouldn't the browser have them by default?

您可以将 tabindex 添加到您希望成为 "focusable" 在您定位的浏览器中默认无法聚焦的元素。

I've always read not to tinker with focus styles with links and form elements for accessibility reasons

那些无障碍的原因是什么?您或多或少是正确的,但您必须首先定义您对可访问性的担忧。您可以 修改焦点样式。如果你把它们搞砸到破坏可访问性目的的地步,那么是的,到那时你就搞砸了,可能不应该修改样式。

您的大部分可访问性问题都与视障人士和使用屏幕 reader 的人有关。在这种情况下,焦点样式不如关注 aria.

重要。

How would someone who used those focus states while tabbing through a page know where they're located within that page?

他们不会看到 焦点状态,除非您有视觉焦点状态。但是使用屏幕 reader 的盲人 reader 会 听到 元素已被选中,这对他们来说很重要。如果您有这些顾虑,我可能建议您查看 ChromeVox,它是 Chrome 的屏幕 reader,这样您就可以了解 tabbing/listening 的体验页面是这样的。