在浏览默认表单元素的页面时,我注意到button
和select
元素没有获得与某些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会显示默认的蓝框阴影边框。为了便于访问,我一直认为不要修改带有链接和表单元素的焦点样式,但这些元素甚至没有。使用这些焦点的人如何在浏览页面时知道他们在该页面中的位置?我知道我可以制作自己的焦点样式,但浏览器默认情况下不应该这样做吗?
答案 0 :(得分:1)
这取决于浏览器。您还可以更改哪些元素是可聚焦的。例如,Safari:
默认情况下,在Safari(!)中禁用了tab-access。要启用它,请检查 “偏好设置>高级>按标签突出显示页面上的每个项目”。
回答您的其他问题:
使用这些焦点的人如何通过标记来表达状态 页面知道他们在该页面中的位置?我知道我可以做我的 自己的焦点风格,但浏览器默认情况下不应该有它们吗?
您可以将tabindex
添加到您想要“可聚焦”的元素,默认情况下,这些元素在您要定位的浏览器中无法调焦。
我一直认为不要修改带有链接和表单的焦点样式 无障碍原因的要素
有哪些可访问性原因?您或多或少是正确的,但您必须首先定义您对可访问性的疑虑。您可以修改焦点样式。如果你搞砸到他们打败无障碍的目的,那么是的,那时你已经搞砸了,可能不应该修改样式。
您的大多数辅助功能问题都与视力障碍者和使用屏幕阅读器有关。在这种情况下,关注样式与注意aria
不太重要。
使用这些焦点的人如何通过标记来表达状态 页面知道他们在该页面中的位置?
除非您拥有视觉焦点状态,否则他们不会看到焦点状态。但盲人读者使用屏幕阅读器会听到元素被选中,这对他们来说非常重要。如果您有这些疑虑,我建议您查看ChromeVox,它是Chrome的屏幕阅读器,这样您就可以看到标签/收听网页的体验。