高对比度模式下的可访问 SVG | CSS-Tricks

使您的 SVG 可访问包括在您的工作流程中添加额外的步骤，但绝对值得。通过采用干净的语义化标记并利用 CSS 一些鲜为人知的特性，您可以创建易于维护的解决方案，其中包括对弱视的考虑，这种疾病影响着相当一部分人口。

与其编写和维护复杂且脆弱的 Javascript 状态管理，不如利用现有的浏览器功能，例如媒体查询，轻松地使体验适应最广泛的浏览环境，包括高对比度模式。

SVG 与媒体查询配合良好，媒体查询是 CSS 的一项功能，允许您描述某些条件下某些内容的外观，例如最小适用浏览器视窗大小。例如，让我们看一下这个可爱的 SVG 火箭

使用 .rocket 类，我们可以告诉 SVG 在浏览器视窗宽度超过 600 像素时翻转并从红色变为蓝色，就像为任何其他 HTML 标签设置样式一样。很酷吧？

Animated example of the rocket changing color and flipping — 来自此演示。

媒体查询不仅限于视窗大小。使用 CSS 中一个相对不为人知的特性，您可以定位 Windows 的高对比度模式，这是一种操作系统设置，它会覆盖颜色和字体大小等属性，以使计算机更易于患有弱视状况的人使用。如果您使用的是 Windows，请亲自尝试一下！

定位高对比度模式的代码如下所示

/* Targets displays using any of Windows’ High Contrast Mode themes: */
@media screen and (-ms-high-contrast: active) { }

/* Targets displays using the Windows’ "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) { }

/* Targets displays using the Windows’ "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) { }

这些媒体查询之间存在某种级联关系：如果最后声明 active，它将覆盖 black-on-white 和 white-on-black。请注意，这些是供应商前缀值，因此 -ms 表示它仅适用于 Microsoft Windows（即使那样，也仅适用于 Internet Explorer 10 及更高版本和 Microsoft Edge）。

有趣的是，虽然 Windows 版 Chrome 不支持高对比度模式媒体查询，但它会提示您安装高对比度扩展，搜索深色主题，并链接到此支持文章。然而，安装扩展或主题后，它并不会遵守高对比度模式媒体查询。

还值得注意的是，Windows 允许用户创建自定义高对比度模式主题。这意味着受高对比度模式影响的内容可能会更改为在您编写 CSS 时无法确定的值。

为了避免使用在高对比度模式下对比度过低的颜色，受模式切换影响的内容类型被映射到特定的 CSS 2 系统颜色关键字

文本映射到 windowText
链接颜色应用于 <a> 标签
选定文本映射到 highlightText 和 highlight
按钮文本映射到 buttonFace
背景映射到 window

结合我们上面学到的内容，完全有可能创建动态响应此特殊模式的 SVG 图像，而无需依赖复杂的 Javascript 逻辑。

“为什么要这么做？” 您可能会问。好吧，有几个原因

如果看不见，就无法使用。

如今，大多数图标都是使用 SVG 制作的，因为它们灵活、高分辨率、显示友好且文件大小小。我们在大多数现代界面中依赖这些图标来传达功能。这可以从娱乐中获得，在这种情况下，如果意图不明确，用户只会感到不便，到医疗设备、车辆，甚至基础设施部件的控制等严重事物，这些事物的风险要高得多。

不幸的是，许多设计师和开发人员倾向于不正确标记他们的图标，这使得它们在次优条件下难以使用。在现代网页设计中，还有一种不幸的趋势，即使用低对比度调色板。

这些调色板贯穿整个应用程序使用，以传达统一感，包括图标样式。如果这些颜色在除完美观看条件之外的任何条件下都不起作用，它们将损害每个屏幕。

您可能受到影响。

包括弱视在内的视力障碍比您想象的更常见——据估计，有 2.46 亿人报告患有弱视。另外，我们也不要忘记夜盲症和突然暴露在直射阳光下等环境因素，这些因素会使人暂时丧失能力（尤其是在操作背光设备时）。请记住，即使现在您的视力没有受到影响，将来可能会有影响。

网络并非总是全彩色的。

高对比度并不意味着弱视状况始终存在。高对比度显示器并不总是与弱视状况相关联。许多访问网络的设备使用低色调或无色调显示器，而且它们也不总是“低端”电子产品。

上面的黑色背景白色文字媒体查询是电子阅读器（如 Kindle）显示内容的完美示例。请记住，最好的浏览器是您随身携带的浏览器！

Windows 仍然无处不在。

如果您正在阅读本文，那么您很有可能是一名设计师、开发人员或其他技术娴熟的人员，这意味着您很有可能在 Apple 或 Android 设备上阅读本文。

这提醒我们，Windows 仍然是一个非常流行的操作系统，运行在超过一半的桌面操作系统市场份额上。在野生版本中，支持高对比度模式媒体查询的版本占主导地位，在本文发布时，它们的市场份额约为 70%。即使它是百分比中的百分比，这仍然是一个不可忽略的数字。

很快它将不仅仅是 Windows。

尽管 Windows 的高对比度模式并没有得到广泛支持，但即将推出的亮度级别媒体特性预计将得到所有主要浏览器的支持——有效地允许开发人员定位与高对比度模式相同的条件。其他设备，尤其是运行易于访问的操作系统（如 iOS）的设备，可能会很快采用。

行之有效。

由于它在 CSS 中进行了描述，因此即使 Javascript 不起作用，对比度调整功能也能正常运行。请记住：每个网站在浏览器下载它之前，都是没有 Javascript 功能的！

使用媒体查询还意味着内容的表示属性保留在 CSS 中，它们应该在 CSS 中。它遵守关注点分离原则；所有与样式相关的开发工作的单一解决方案。如果您使用的是带有 Sass 或 Less 等 CSS 预处理器的组件部分，这将变得特别易于维护。

这是正确的事情。

除了自行车棚之外，对弱视的适应还与“真正”的响应式设计有关。它不仅仅是使设计在手机上正常工作，它还确保您的网站内容在尽可能广泛的设备和情况下都能正常工作。

除了所有巨大的好处之外，拥抱可访问性还将带来许多具体的收益。这甚至不包括您在知道自己正在帮助人们时会感受到的温暖感！

“听起来不错！我完全相信你，” 你现在会说。“我重视我的网站，也非常关心访问它的人。现在，我是否需要完全重新设计我的整个网站，以便它在高对比度模式下看起来很好？”

答案是坚决的“不。”

一些非常聪明的工程师已经让高对比度模式在为你管理这方面做得非常出色。只要你使用经过验证的语义 HTML 并使用 CSS 进行样式设置，它基本上可以保证你的内容会自动转换为对高对比度友好的内容。

更重要的是，它使高对比度呈现可预测，这对那些每天依赖它进行浏览的人来说非常重要。破坏这种可预测性就像颠倒网页上的所有字母——一种任意且令人惊讶的调整，它会毫无实际理由地使阅读变得更加困难。高对比度模式对你来说可能看起来很奇怪，但对成千上万的人来说，它完全正常。

图像，包括 SVG，是高对比度模式下不能很好地自动转换的内容类型之一——这是使你的图像可访问如此重要的众多原因之一。

顺应技术的趋势，使用高对比度媒体查询来解决高对比度模式的图像处理限制。编写一些小的、针对性的调整，以确保关键内容在视力不严重的情况下显示得当，以至于不需要使用屏幕阅读器。

在下面的示例中，我们的火箭图标已变成了一个启动按钮

这不是一个很大的跨度，并且似乎与一个非常重要的功能相关联。假设由于某种不幸的原因，你的网站样式指南使用了一种低对比度配色方案，并且设计没有使用带标签的按钮。为了本文的目的，我们还要假设你在此场景中没有协商权力来挑战这两个问题——不幸的是，这是一个非常普遍的情况。

如果没有你的启动按钮的高对比度媒体查询，它就无法被视觉访问。按钮图标的颜色在黑色背景上的高对比度模式下对比度为 2.2。这没有达到WCAG 2.0 对可接受对比度的标准

Example screenshot showing a low contrast icon in CodePen — 运行 Microsoft Edge 25 的带有高对比度主题的 Windows 10。

虽然底部边缘的白色新月对比度足够高，以至于在视觉上清晰可见，但没有足够的辅助信息来表明它是按钮的一部分。

通过最轻微的调整，无论使用何种高对比度模式主题，按钮都可以被视觉识别。

Example screenshots showing a high contrast icon in CodePen — 主题屏幕截图，从左上角顺时针方向：高对比度 1、高对比度 2、高对比度黑色、高对比度白色

如果你正在使用图标系统，并且你的图标足够简单，可以在不失去含义的情况下简化为一种颜色，你可能需要考虑将所有高对比度调整与控制所有其他图标样式的同一个不可变类关联起来。

@media screen and (-ms-high-contrast: active) {
  .button-icon {
    fill: ButtonText;
  }
}

更复杂的图标和包含多种颜色的插图应该逐个案例处理，因为笼统的样式说明可能会将它们变成无法识别的斑点，或者在没有互动的情况下传达互动性。

处理高对比度模式中的图像的另一个有趣的想法是使用CSS 过滤器来增强已经存在的内容。虽然覆盖范围并不完美，但诸如saturation()、brightness()和contrast()之类的属性可以逐步增强内容，而不会破坏原始图像。

@media screen and (-ms-high-contrast: active) {
  main .post-image {
    filter: brightness(1) contrast(1) saturate(1.5);
  }
}

“那么，我的网站上所有的小图像怎么办？你知道，我用来装饰它的纹理、装饰和插图？”

装饰性图像就是装饰性图像。使用诸如 CSS 的background-image属性和 ARIA 声明aria-hidden="true"等技术，通过语义方式否定装饰性元素来消除这些干扰。它确保高对比度模式的解析器不会卡在任何非必需的内容上。

“好吧，我仍然理解你。那么亮度媒体查询呢？我是否需要很快考虑它们？”

简单来说：不要让事情变得比必要时更困难。你需要的例外越少，维护起来就越容易。通过确保你的设计在默认查看条件下为所有组件使用足够的对比度，以及在需要的地方提供文本标签，你就可以消除处理多个版本带来的所有额外开销。此外，你还可以免费获得 WCAG 合规性。不错！