停止移除焦点

您知道网页上交互项周围的边框吗？链接、表单组件（复选框、按钮、文本字段）、标签、分页。这些边框会根据您使用和测试的浏览器而有所不同。设计师讨厌的“丑陋”轮廓？

最近，我看到很多网站取消了焦点指示，却完全没有考虑到这会对可访问性造成的影响。我们必须停止这种做法，因为它有害，我会告诉你原因。

为什么它不好

不管它:focus{ outline: none; }是否真的让无障碍人士血压升高，* { outline: 0; }持续忽略焦点样式和指标对于无障碍来说都是有害的。就是这样。

停止移除焦点的理由

Joshua Hoehne在Unsplash上拍摄的照片

1. 有视觉问题的用户在使用键盘进行导航时将看不到他们在网页上的位置。
2. 视力正常的用户（比如我自己）也会使用键盘来浏览交互项目。
3. 许多盲人和视障人士使用键盘交互来使用屏幕阅读器。
4. 当一个元素获得焦点时，意味着该元素已准备好进行交互。您将无法与该元素进行视觉交互。
5. 视觉指示器可以帮助患有执行功能障碍和其他视觉或处理相关问题（光敏感、偏头痛等）的人，因为它可以一次将注意力吸引到一件事上，从而有助于减轻认知负荷。

你是在创造障碍，而不是在消除障碍。

CSS 重置

许多 CSS 重置文件中都包含了outline:0，例如Eric Meyer 的 CSS Reset。它适用outline:0于所有页面元素。Eric 明确指出，焦点样式应该重新实现；

 remember to define focus styles! */
:focus {
outline: 0;
} 

不要忘记重新添加焦点样式并使其具有高对比度（至少 10:1）。

浏览器默认设置

如果用户由于年龄、视力退化、青光眼、散光、其他黄斑/视力退化等原因而无法看清轮廓，则大多数情况下默认轮廓都不够好。

再次让它们可见！

跟我重复...

不要移除焦点指示器！

标题图片由Stefan Cosma在Unsplash上拍摄