CSS盒子阴影与轮廓线的区别

Question

CSS盒子阴影与轮廓线的区别

cssaccessibilityoutlinebox-shadow

16

我尚未找到重复的内容，但有很多博客文章建议使用box-shadow来代替outline作为元素焦点状态的样式，因为它在样式方面更加灵活，并且它也遵循所修饰元素的border-radius，而不像outline始终保持矩形。

用box-shadow替代outline被认为是一种良好的做法吗？这样做有什么注意事项吗？

- Anton Kastritskiy

3

只要它能恰当地向用户传达当前具有焦点的元素是什么，你做什么并不重要。它甚至不一定是这两个之一 - 无数其他CSS属性都可以在不同的方式下帮助实现（颜色，背景等等），所以你选择什么完全取决于你。你唯一需要考虑的是，无论你选择什么效果，它是否足够“强”（关于注意力对比等等），即使对于可能有认知障碍的用户也是如此。这不太是编程问题，更多的是UI / UX问题。 - misorude

谢谢。我之所以特别提到这两个选项，是因为可能有些开发人员进行了UX测试，发现用户对轮廓反应更好，或者存在我不知道的其他技术限制，这就是我创建这个问题的目的。 - Anton Kastritskiy

2

即使如此，这仍然非常取决于具体情况 - 10像素宽的盒子阴影可能比1像素宽的轮廓更有效，或者反之亦然...这实际上归结于效果对用户有多明显 - 他们能否清楚地识别当前具有焦点的元素，基于您在该状态下应用的格式？这是重要的问题，而不是您用来实现它的特定属性。 - misorude

你的问题似乎假设轮廓是显示焦点状态的首选属性，但它从来不是唯一用于此目的的属性。链接可以使用文字装饰和颜色，按钮可以使用背景颜色。 - Mr Lister

1

你也应该在ux.stackexchange.com上发布。那里有很多好的设计建议。 - slugolicious

@MrLister 我并不是默认认为这样做，因为任何浏览器都会将其用于按钮/输入。我的问题是针对是否将轮廓替换为盒阴影是一个好习惯。就是这样。 - Anton Kastritskiy

2个回答

1

用box-shadow替换outline被认为是一种好的实践吗？这样做有什么注意事项吗？

WCAG对此有一个具体的失败标准：

F78：由于以一种移除或使视觉焦点指示器不可见的方式设置元素轮廓和边框而导致成功标准2.4.7失败

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

其他样式可能会使焦点指示器难以看到，即使它存在，例如与焦点轮廓相同的轮廓，或者与焦点指示器相同颜色的粗边框，因此无法在其上看到焦点指示器。

- Adam

7

将默认轮廓线移除并不会自动导致失败 F78，只有在作者没有提供有效的焦点指示器来替代它时才适用。根据F78（我强调）：“这描述了一种故障条件，当用户代理的键盘焦点的默认视觉指示被关闭或由页面上的其他样式呈现为非可见状态，而没有提供作者提供的视觉焦点指示器时发生。”然而，box-shadow 在 Windows 高对比度主题中无法使用，因此 F78 在这里是相关的。 - andrewmacpherson

1

此外，移除默认的轮廓并不能阻止用户自定义焦点样式。用户样式表优先于作者样式表，并且一些浏览器插件也提供了一种方法让用户恢复缺失的焦点指示器。 - andrewmacpherson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andrewmacpherson · Accepted Answer

在使用box-shadow作为焦点指示器时，有一个严重的注意事项——它无法在Windows高对比度主题中工作。

当启用Windows高对比度主题时，支持此主题的Web浏览器将覆盖某些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;
}