CSS 播客 - 018:专注
您点击自己的网页上的链接后,会跳转到网站的主要内容。 这些链接通常称为跳转链接或锚链接。 当该链接被键盘激活时,使用 Tab 键和 Enter 键,主内容容器周围会出现一个焦点环。这是为什么?
这是因为 <main>
具有 tabindex="-1"
属性值,这意味着可以通过编程方式聚焦它。当定位到 <main>
时(因为浏览器网址栏中的 #main-content
与 id
匹配),它会获得程序化焦点。在这些情况下,人们往往倾向于移除焦点样式,但适当地处理焦点有助于打造易于访问的良好用户体验。这也是激发互动兴趣的好地方。
为什么焦点很重要?
作为 Web 开发者,您的职责是打造一个方便所有人访问并包容的网站。使用 CSS 创建可访问的焦点状态是这项责任的一部分。
焦点样式可以帮助使用设备(例如键盘或开关控件)的用户浏览网站并与网站互动。如果某个元素获得焦点,但没有视觉指示,用户可能会忘记焦点所在的元素。这可能会导致导航问题,并在用户打开错误的链接等情况下引发不必要的行为。
元素如何获得焦点
某些元素可自动聚焦;这些是接受交互和输入的元素,例如 <a>
、<button>
、<input>
和 <select>
。简而言之,就是所有表单元素、按钮和链接。
通常,您可以使用 Tab 键浏览网站的可聚焦元素,在页面上前进,使用 shift + Tab 键向后移动。
此外,还有一个名为 tabindex
的 HTML 属性,每当有人按下 Tab 键或者焦点因网址的哈希更改或 JavaScript 事件而改变时,您可以通过该属性更改 Tab 键索引(即元素的聚焦顺序)。如果将 HTML 元素的 tabindex
设置为 0
,该元素可以通过 Tab 键获得焦点,并将遵循全局标签页索引(由文档源代码顺序定义)。
如果您将 tabindex
设为 -1
,它只会以编程方式接收焦点,即仅在发生 JavaScript 事件或哈希更改(与网址中元素的 id
一致)发生时。如果您将 tabindex
设为任何高于 0
的值,它将从按文档源顺序定义的全局标签页索引中移除。Tab 键顺序现在由 tabindex
的值定义,因此具有 tabindex="1"
的元素会先于具有 tabindex="2"
的元素获得焦点。
设置焦点样式
元素获得焦点时,浏览器的默认行为是显示聚焦环。此聚焦环因浏览器和操作系统而异。
您可以通过在伪类课程中了解的 :focus
、:focus-within
和 :focus-visible
伪类,通过 CSS 更改此行为。请务必设置与元素的默认样式形成对比的焦点样式。例如,一种常见的方法是利用 outline
属性。
a:focus {
outline: 2px solid slateblue;
}
outline
属性看起来可能过于靠近链接的文本,但 outline-offset
属性可以帮助做到这一点,因为它可以增添额外的视觉 padding
,而不会影响元素填充的几何图形大小。outline-offset
的正数值会向外推动轮廓,负值会将轮廓向内拉出。
目前,在某些浏览器中,如果您为元素设置了 border-radius
并使用 outline
,那么两者将无法匹配 - 轮廓会具有尖角。因此,人们倾向于使用模糊处理半径较小的 box-shadow
,因为 box-shadow
会裁剪至形状,并遵循 border-radius
,但这种样式在 Windows 高对比度模式下不会显示。这是因为 Windows 高对比度模式不应用阴影,并且大多会忽略背景图片,从而更好地支持用户的偏好设置。
总结
创建与元素的默认状态形成对比的焦点状态非常重要。默认浏览器样式已经为您执行了此操作,但如果您想更改此行为,请注意以下事项:
- 避免对可以获得键盘焦点的元素使用
outline: none
。 - 避免将
outline
样式替换为box-shadow
。 因为它们不会在 Windows 高对比度模式下显示 - 只有在绝对必要的情况下,才在 HTML 元素上为
tabindex
设置正值。 - 确保焦点状态与默认状态相比非常清晰。
检查您的掌握程度
考考你对专注力的掌握情况
以下哪些元素是自动可聚焦的元素?
<a>
<p>
<button>
<input>
<output>
<select>
以下哪些输入设备可以设置焦点?