css - 哪些元素接收默认焦点样式？

Question

在浏览默认表单元素的页面时，我注意到 button 和 select 元素没有收到与某些 input 相同的边框样式> 类型、textarea 和 a 标签获得焦点。

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

• 按钮元素
• button 元素与 type="submit" & role="button"
• button 元素与 tabindex="0"
• span 元素与 role="button"
• input 元素 type="submit"value="Submit"

它们都不会接收浏览器的默认聚焦样式。

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

Answer 1

这取决于浏览器。您还可以更改可聚焦的元素。例如，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 添加到您希望“可聚焦”的元素中，这些元素在您所针对的浏览器中默认情况下是不可聚焦的。

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

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

您的大部分可访问性问题都与视力受损和使用屏幕阅读器的人有关。在这种情况下，关注样式不如关注 aria 重要。

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

他们不会看到焦点状态，除非您有视觉焦点状态。但是使用屏幕阅读器的盲人读者会听到该元素已被选中，这对他们来说很重要。如果您有这些顾虑，我可能建议您查看 ChromeVox ，它是 Chrome 的屏幕阅读器，因此您可以了解点击/收听页面的体验。