突出焦点

CSS 播客 - 018:专注

在网页上 您点击某个链接后,用户会跳转到网站的主要内容。 这些链接通常称为跳转链接或锚链接。 当您通过键盘打开该链接时,可以按 TabEnter 键, 主内容容器周围有一个聚焦环。这是为什么?

这是因为 <main> 具有 tabindex="-1" 属性值, 这意味着可以通过编程方式聚焦。 定位 <main> 时 - 由于 #main-contentid 匹配 - 它会获得程序化焦点。 在这些情况下,很容易移除焦点样式, 但适当并细心地处理焦点有助于创造 打造无障碍体验 也可以用来增加互动的兴趣。

为什么专注力很重要?

作为一名 Web 开发者 您的职责就是打造一个人人都能访问、具有包容性的网站。 使用 CSS 创建可访问的焦点状态就是此职责的一部分。

焦点样式可为使用键盘或设备等设备的用户提供帮助 开关控制 来浏览网站并与之互动 如果某个元素获得焦点,但没有显示可见指示, 用户可能无法跟踪焦点内容。 在以下情况下,这可能会造成导航问题并导致不必要的行为: 例如,跟踪的链接有误。

元素如何获得焦点

某些元素会自动获得焦点; 这些是接受互动和输入的元素,例如 <a><button><input><select>。 简而言之,就是所有表单元素、按钮和链接。 您通常可以使用 tab 键在页面上前进,使用 shift + tab 键后退,您可以浏览网站的可聚焦元素。

此外,还有一个名为 tabindex 的 HTML 属性,可用于更改标签页导航索引,即 元素聚焦的顺序(每当用户按下 Tab 键时), 或焦点随着网址中的哈希值变化或 JavaScript 事件而转移。 如果将 HTML 元素的 tabindex 设为 0, 它可以通过 Tab 键获得焦点,并且遵循全局 Tab 索引, 由文档来源顺序定义

如果将 tabindex 设置为 -1,它就只能以程序化方式接收焦点, 也就是说,只有在 JavaScript 事件发生时 或哈希值变化(匹配网址中该元素的 id)。 如果您将 tabindex 设置为高于 0 的任何值, 将从全局标签页索引中移除; 由文档来源顺序定义。 现在, Tab 键顺序将由 tabindex 的值定义, 因此,举例来说,具有 tabindex="1" 的元素将在具有 tabindex="2" 的元素之前获得焦点。

设置焦点样式

某个元素获得焦点时的默认浏览器行为是呈现焦点环。 此对焦环因浏览器和操作系统而异。

可以通过 CSS 更改这种行为 使用 :focus:focus-within:focus-visible 伪类, 伪类课程。 请务必设置与元素的默认样式具有对比度的焦点样式。 例如,一种常见的方法是利用 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>
🎉

以下哪种输入设备可以设置焦点?

游戏手柄
游戏手柄通常会在用户按下按钮时发送键盘事件。
键盘
当用于浏览网页时,确实会导致焦点。
老鼠
鼠标需要视觉,在使用时不再将焦点放在元素上。过去,所有浏览器在点击后都会将焦点放在按钮等内容上,但现在这种情况发生了变化。
辅助技术(屏幕阅读器、开关等)
当用于浏览网页时,确实会导致焦点。
一颗土豆
抱歉,尽管土豆可以用作触摸屏上的指针,但它在与屏幕输入交互后不会引起焦点。