辅助功能 可视焦点
为什么
可视焦点对于所有依赖键盘和开关设备的用户至关重要。
什么
当我们讨论链接状态时，您已经了解了一些关于可视焦点的知识。让我们更深入地探讨一下。可视焦点有时被称为键盘焦点或Tab键焦点。它是交互式组件上具有键盘焦点的视觉指示器。效果通常是边框或轮廓。
如何
您将学习不要移除焦点，以及两种设置焦点样式的选项。
不要移除或隐藏焦点
这是本模块最重要的收获。无论您做什么，都不要移除焦点。以下CSS代码行会破坏许多人的辅助功能
outline: 0;
另一种隐藏焦点的常见方法是父元素太小而无法显示它，并结合
overflow: hidden;
大多数浏览器使用outline属性来显示交互式元素的可视焦点。我们有两个选项。保留它或自定义它。移除它不是一个选项。
在这个Airbnb的示例中，目的地Ålesund是聚焦的元素。但是，无法判断。原因是父<div>具有overflow: hidden;
选项1：使用默认值
处理可视焦点的最简单方法是将其留给浏览器处理。这有很多好处
- 依赖可视焦点的用户可以轻松识别它。
- 您无需编写任何代码。
- 用户不会遇到任何意外情况。
移除overflow: hidden;显示默认的焦点样式。Chrome浏览器在移动模式下使用橙色轮廓。您可能认为键盘焦点在移动设备上并不重要。这是一个误解。人们在移动设备上也使用键盘和其他辅助技术。
选项2：自定义可视焦点
我们也面临着默认焦点的某些挑战。
- 默认样式可能与网站的颜色调色板不一致。
- 默认样式与网站的颜色调色板相似。
- 默认样式在所有浏览器中都不够明显。
旅行网站Momondo拥有鲜艳的色彩调色板。他们可以选择调色板中的颜色作为可视焦点。
这是Momondo网站的修改版本，显示了带有粉色和白色轮廓的焦点链接“行程”。粉色来自其调色板，与搜索按钮相同。
顺便说一句，搜索按钮在与白色文本一起使用时颜色对比不足。对比度比率仅为3.33。但是，作为深紫色背景上的可视焦点使用时，对比度更好，比率为5.47。
CSS轮廓
为了更好地创建自定义可视焦点，您需要了解不同的CSS轮廓属性。访问W3Schools了解轮廓样式、颜色、宽度和偏移量。现在您已准备好创建键盘可访问的界面。
