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

时间:2015-06-11 21:01:44

标签: css html5 forms google-chrome accessibility

在浏览默认表单元素的页面时,我注意到buttonselect元素没有获得与某些input类型相同的边框样式,{{1} },textarea标记在聚焦时得到。

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

  • a元素
  • button元素button& type="submit"
  • role="button"元素与button
  • tabindex="0"元素与span
  • role="button"元素与input

其中任何一个都没有收到浏览器的默认焦点样式。

这些元素总是这样吗?我使用的是Chrome 43.0.2357.124,但Firefox会显示默认的蓝框阴影边框。为了便于访问,我一直认为不要修改带有链接和表单元素的焦点样式,但这些元素甚至没有。使用这些焦点的人如何在浏览页面时知道他们在该页面中的位置?我知道我可以制作自己的焦点样式,但浏览器默认情况下不应该这样做吗?

1 个答案:

答案 0 :(得分:1)

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

  

默认情况下,在Safari(!)中禁用了tab-access。要启用它,请检查   “偏好设置>高级>按标签突出显示页面上的每个项目”。

回答您的其他问题:

  

使用这些焦点的人如何通过标记来表达状态   页面知道他们在该页面中的位置?我知道我可以做我的   自己的焦点风格,但浏览器默认情况下不应该有它们吗?

您可以将tabindex添加到您想要“可聚焦”的元素,默认情况下,这些元素在您要定位的浏览器中无法调焦。

  

我一直认为不要修改带有链接和表单的焦点样式   无障碍原因的要素

有哪些可访问性原因?您或多或少是正确的,但您必须首先定义您对可访问性的疑虑。您可以修改焦点样式。如果你搞砸到他们打败无障碍的目的,那么是的,那时你已经搞砸了,可能不应该修改样式。

您的大多数辅助功能问题都与视力障碍者和使用屏幕阅读器有关。在这种情况下,关注样式与注意aria不太重要。

  

使用这些焦点的人如何通过标记来表达状态   页面知道他们在该页面中的位置?

除非您拥有视觉焦点状态,否则他们不会看到焦点状态。但盲人读者使用屏幕阅读器会听到元素被选中,这对他们来说非常重要。如果您有这些疑虑,我建议您查看ChromeVox,它是Chrome的屏幕阅读器,这样您就可以看到标签/收听网页的体验。