CSS框阴影与轮廓

CSS框阴影与轮廓,css,accessibility,outline,box-shadow,Css,Accessibility,Outline,Box Shadow,我还没有找到一个副本,你可以找到一堆博客文章,建议使用框影作为元素的焦点状态,而不是轮廓,因为它在样式方面更灵活,而且它还遵循你正在设置样式的元素的边界半径,而不像轮廓那样始终保持矩形 将大纲替换为框阴影是否被认为是一种良好的做法?这样做有什么警告吗 用方框阴影替换轮廓是否被认为是一种良好的做法?这样做有什么警告吗 WCAG有一个特定的故障: 请注意,用户可能希望根据自己的特殊性(更好的对比度、特定的颜色、大小等)定制自己的轮廓指示器。因此,通过将其移除并替换为框影,您不会让它们自己的设置优先

我还没有找到一个副本,你可以找到一堆博客文章,建议使用
框影
作为元素的焦点状态,而不是
轮廓
,因为它在样式方面更灵活,而且它还遵循你正在设置样式的元素的
边界半径
,而不像
轮廓
那样始终保持矩形

大纲
替换为
框阴影
是否被认为是一种良好的做法?这样做有什么警告吗

用方框阴影替换轮廓是否被认为是一种良好的做法?这样做有什么警告吗

WCAG有一个特定的故障:


请注意,用户可能希望根据自己的特殊性(更好的对比度、特定的颜色、大小等)定制自己的轮廓指示器。因此,通过将其移除并替换为
框影
,您不会让它们自己的设置优先于您的设置。

使用
框影
作为焦点指示器有一个严重的警告。它在Windows高对比度主题中不起作用

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

  • 前景色被覆盖,以匹配Windows主题。这适用于文本、边框和轮廓。
    • 请注意,CSS
      transparent
      关键字是一个颜色值,在这里它也被覆盖。透明的边框变得可见
  • 背景色被覆盖,以匹配Windows主题
  • 在IE和Firefox中删除背景图像(包括CSS渐变)。
    • 边缘保留背景图像,但将纯色背景应用于文本。因此,部分背景图像可能看不到
  • box shadow
    未应用,因此它不能用作焦点指示器
当Windows高对比度主题生效时,将看不到以下焦点样式:

a:焦点{
盒影:0px 0px 5px 5px rgba(0,0255,1);
大纲:无;
}
然而,有一种方法是可行的。不要完全删除轮廓,而是在保留轮廓样式和宽度的同时使其透明。当Windows高对比度主题生效时,不会显示框阴影,但会显示轮廓,因为透明颜色被覆盖

a:焦点{
/*在全彩色空间中可见*/
盒影:0px 0px 5px 5px rgba(0,0255,1);
/*在Windows高对比度主题中可见*/
轮廓颜色:透明;
轮廓宽度:2倍;
轮廓样式:虚线;
}

只要它正确地向用户传达当前有焦点的元素,你做什么并不重要。它甚至不必是这两个属性中的一个–无数其他CSS属性可以通过不同的方式(颜色、背景等,pp)帮助实现这一点,所以具体的选择取决于您自己。你应该考虑的唯一一件事是,你所追求的任何效果是否“足够强”(关于注意能力对比等),即使对于可能有认知障碍的用户也是如此。少一点编程,多一点UI/UX问题。谢谢。我只在上面特别提到这两个的原因是,可能一些开发人员进行了UX测试,他们发现用户对大纲的反应更好,或者如果有一些我不知道的其他技术限制,这就是我创建这个问题的目的,即使在那时,这也将在很大程度上取决于细节-10px宽度的方框阴影可能比1px宽度的轮廓效果更好,反之亦然…实际上,这一切都取决于效果对用户的显著程度-他们能否清楚地识别当前具有焦点的元素,基于在该状态下应用于它的格式?这是一个重要的问题,而不是您使用什么特定属性来实现它。您的问题似乎假设大纲是用于显示焦点状态的go-to属性,但它从来不是用于此目的的唯一属性。链接的文字装饰和颜色如何?或者按钮的背景色?您也应该在ux.stackexchange.com上发布。这里有很多很好的设计建议。删除默认大纲不会自动导致F78失败,它只适用于作者没有提供有效的焦点指示器来替换它的情况。来自F78(emphasis mine):“这描述了当用户代理的默认键盘焦点视觉指示被关闭或页面上的其他样式显示为不可见,而不提供作者提供的视觉焦点指示器时发生的故障情况。”但是,框阴影在Windows高对比度主题中不起作用,因此F78在这里是相关的。此外,删除默认轮廓不会阻止用户自定义焦点样式。用户样式表胜过作者样式表,还有一些浏览器插件也为用户提供了一种恢复丢失的焦点指示器的方法。哇,这是一个很棒的答案,也是一个保持兼容的伟大解决方案!非常有帮助,谢谢!