设计稿上不想要那圈蓝色描边,样式里全局写了 outline none,键盘用户按 Tab 时页面毫无变化,不知道焦点停在哪个元素上。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,outline 被整体清掉又没有补替代样式,焦点位置只靠浏览器自带的一点差异,换成自定义按钮连这点差异也看不出来了,键盘用户全程在摸黑操作。

「焦点指示器可见」这类改动最怕改一半,回滚脚本先准备好,再动生产。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

*:focus-visible{outline:3px solid #1a73e8}
*:focus:not(:focus-visible){outline:none}

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。

具体做法是,不要在全局清掉 outline,只对确实不需要描边的元素单独重置;用 focus-visible 单独给键盘焦点加一圈看得清的描边,颜色别太淡;描边颜色和周围背景要有足够反差,别图省事用浅灰。

最后用这个标准收尾,只用键盘走一遍全站,每一步都能看清焦点落在哪个元素上。

作者 9823189