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

Question

在浏览默认表单元素页面时，我注意到button 和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:

默认情况下，在 safari(!) 中禁用选项卡访问。要启用它，请检查 “首选项 > 高级 > 按标签突出显示页面上的每个项目”。

回答您的其他问题：

使用这些焦点状态的人会如何在切换时使用这些焦点状态？ 页面知道它们在该页面中的位置吗？我知道我可以让我的 自己的焦点样式，但浏览器不应该默认拥有它们吗？

您可以将tabindex 添加到您希望“可聚焦”的元素中，而这些元素在您定位的浏览器中默认情况下是不可聚焦的。

我一直在阅读不要用链接和表单修改焦点样式 出于可访问性原因的元素

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

您对可访问性的大部分担忧都与视障人士和使用屏幕阅读器的人有关。在这种情况下，焦点样式不如关注aria 重要。

使用这些焦点状态的人会如何在切换时使用这些焦点状态？ 页面知道它们在该页面中的位置吗？

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