CSS box-shadow vs 轮廓答案

【问题标题】：CSS box-shadow vs outlineCSS box-shadow vs 轮廓
【发布时间】：2019-03-06 11:05:02
【问题描述】：

我找不到重复的，你可以找到一堆博客文章，建议使用 box-shadow 代替 outline 作为元素的焦点状态，因为它在样式方面更灵活，而且它也遵循您正在设置样式的元素的 border-radius 与始终保持矩形的 outline 不同。

将outline 替换为box-shadow 是否被认为是一种好习惯？这样做有什么注意事项吗？

【问题讨论】：

只要它正确地向用户传达当前哪个元素具有焦点，你做什么并不重要。它甚至不必是这两个之一 - 无数其他 CSS 属性可以通过不同的方式（颜色、背景等）帮助实现这一点，所以你选择什么完全取决于你。您应该考虑的唯一一件事是您所追求的任何效果是否足够“强大”（关于注意能力对比等），即使对于可能有认知障碍的用户也是如此。更少的编程，更多的 UI/UX 问题。
谢谢。我在上面只特别提到这两个的原因是，也许一些开发人员进行了 UX 测试，他们发现用户对大纲的反应更好，或者如果还有一些我不知道的其他技术限制，那么它的目的是我创建了问题
即便如此，它在很大程度上取决于具体情况 - 10px 宽度的框阴影可能比 1px 宽度的轮廓效果更好，反之亦然……这一切都归结为效果的明显程度对于用户 - 他们能否根据您在该状态下应用的格式清楚地识别当前具有焦点的元素？这是一个重要的问题，而不是您使用什么特定属性来实现它。
您的问题似乎假设大纲是显示焦点状态的首选属性，但它从来都不是用于此目的的唯一属性。链接的文本装饰和颜色怎么样？还是按钮的背景色？
您还应该在 ux.stackexchange.com 上发帖。那里有很多好的设计建议。

标签： css accessibility outline box-shadow

【解决方案1】：

使用box-shadow 作为焦点指示器有一个严重的警告。它不适用于 Windows 高对比度主题。

当打开 Windows 高对比度主题时，支持它的网络浏览器将覆盖某些 CSS 属性。 Firefox、IE 和 Edge 可以做到这一点，但基于 Chromium 的浏览器还没有（目前）。

前景色被覆盖，以匹配 Windows 主题。这适用于文本、边框和轮廓。
- 注意，CSS transparent 关键字是一个颜色值，这里也被覆盖了。透明边框变得可见。
背景颜色被覆盖，以匹配 Windows 主题。
在 IE 和 Firefox 中删除了背景图像（包括 CSS 渐变）。
- Edge 保留背景图像，但对文本应用纯色背景色。因此可能看不到部分背景图片。
box-shadow 未应用，因此不能用作焦点指示器。

当 Windows 高对比度主题生效时，将不会看到以下焦点样式：

a:focus {
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);
  outline: none;
}

有一种方法可以奏效。与其完全删除轮廓，不如让它透明，同时保留轮廓样式和宽度。当 Windows 高对比度主题生效时，不会出现框阴影，但会出现轮廓，因为透明颜色已被覆盖。

a:focus {

  /* Visible in the full-colour space */
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);

  /* Visible in Windows high-contrast themes */
  outline-color: transparent;
  outline-width: 2px;
  outline-style: dotted;
}

【讨论】：

哇，很棒的答案和保持合规的绝佳解决方案！

【解决方案2】：

用 box-shadow 替换轮廓是否被认为是一种好习惯？这样做有什么注意事项吗？

WCAG 对此有一个特定的失败：

F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

请注意，用户可能希望根据自己的特殊性（更好的对比度、特定颜色、大小...）自定义自己的轮廓指示器。因此，通过删除它并用 box-shadow 替换它，您不会让他们自己的设置优先于您的设置。

【讨论】：

删除默认轮廓不会自动导致F78失败，它只适用于作者没有提供有效的焦点指示器来替换它的情况。来自 F78（强调我的）：“这描述了当用户代理的键盘焦点的默认视觉指示被关闭或被页面上的其他样式呈现为不可见时发生的故障情况没有提供作者-提供了视觉焦点指示器。" 但是 box-shadow 在 Windows 高对比度主题中不起作用，因此 F78 在这里是相关的。
此外，删除默认轮廓不会阻止用户自己自定义焦点样式。用户样式表胜过作者样式表，一些浏览器插件也为用户提供了一种恢复缺失焦点指示符的方法。