可访问的 SVG：屏幕阅读器用户的完美模式

已发表: 2022-03-10
快速总结 ↬在比较操作系统、浏览器和屏幕阅读器的不同组合时，发现我们应该避免哪些 SVG 模式以及哪些模式最具包容性。 Carie 还将围绕前端可访问性举办有关可访问前端模式的在线研讨会。

虽然可缩放矢量图形 (SVG) 在 90 年代后期首次推出，但由于在带宽和性能比以往任何时候都更重要的世界中，它们具有极高的灵活性、高保真度和相对轻巧，因此在过去十年中再次流行起来. JavaScript 的进步和 CSS 媒体查询（如 @prefers-color-scheme 和 @prefers-reduced-motion）的引入已经扩展了 SVG 的功能，超出了它们最初在网站上简单显示矢量图的用例。

随着 SVG 技术的进步，我们对如何设计和开发 SVG 的理解也需要提高。 该进步的一部分包括考虑此类设计和代码对实际人类（也就是我们的最终用户）的影响。

本文概述了“在野外”发现的12 种不同的 SVG 模式，以及当操作系统、浏览器和屏幕阅读器的不同组合访问时宣布的每种替代描述。

当然，以下示例并不是要详尽列出数字领域中使用的所有可能模式，但它们确实突出了您可能遇到的一些更流行或普遍存在的 SVG 模式。 继续阅读以了解您应该避免哪些 SVG 模式以及哪些模式最具包容性！

使用<img>标签的基本替代描述

第一组四个模式使用链接到 SVG 文件的<img>标记。 对于您的网站、应用程序或其他数字产品上的基本、简单的图像，这是一个不错的选择。 虽然使用此模式的缺点是您无法将许多视觉元素或动画作为内联 SVG 轻松控制，但此模式应该整体上呈现更轻、更快的图像，并允许对在多个位置使用的 SVG 进行更轻松的维护。

模式 #1： <img> + alt="[words]"

codepen 示例中显示的狐狸插图
 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

模式 #2： <img> + role="img" + alt="[words]"

codepen 示例中显示的狐狸插图
 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

模式#3： <img> + role="img" + aria-label="[words]"

codepen 示例中显示的狐狸插图
 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

模式 #4： <img> + role="img" + aria-labelledby="[ID]"

codepen 示例中显示的狐狸插图
 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

使用<svg>标签的基本替代描述

第二组四个模式使用带有内联 SVG 文件的<svg>标记。 尽管将 SVG 代码直接添加到标记中可能会使页面加载速度变慢，但通过对图像的视觉元素或动画进行更多控制，可以抵消这种轻微的低效率。 通过将 SVG 直接添加到 HTML，在向屏幕阅读器用户提供图像信息时，您还有更多选择。

模式#5： <svg> + role="img" + <title>

codepen 示例中显示的狐狸插图
 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

模式#6： <svg> + role="img" + <text>

codepen 示例中显示的狐狸插图
 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

模式 #7： <svg> + role="img" + <title> + aria-describedby="[ID]"

codepen 示例中显示的狐狸插图
 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

模式#8： <svg> + role="img" + <title> + aria-labelledby="[ID]"

codepen 示例中显示的狐狸插图
 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>
跳跃后更多！ 继续往下看↓

使用<svg>标记的扩展替代描述

最后一组四个模式使用带有内联 SVG 文件的<svg>标记，与第二组非常相似。 但是，在这种情况下，由于图像的复杂性，我们正在使用附加信息扩展简单的替代描述。

对于需要更多解释的更复杂的图像，这将是一个很好的模式选择。 但是，重要的是要记住，有些残疾人（例如认知障碍）可能会受益于在屏幕上随时提供这些额外的图像信息，而不是隐藏在 SVG 代码中。

根据您需要添加到 SVG 的信息的类型和数量，您可能会考虑完全采用不同的方法。

模式#9： <svg> + role="img" + <title> + <text>

codepen 示例中显示的狐狸插图
 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

模式 #10： <svg> + role="img" + <title> + <desc>

codepen 示例中显示的狐狸插图
 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

模式 #11： <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

codepen 示例中显示的狐狸插图
 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

模式 #12： <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

codepen 示例中显示的狐狸插图
 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

请参阅 Carie Fisher 的完整 CodePen [可访问 SVG 模式比较（Fox 版）]（https://codepen.io/smashingmag/pen/dyvvbKj）。

请参阅 Carie Fisher 撰写的完整 CodePen 可访问 SVG 模式比较（Fox 版本）。

SVG 模式的赢家和输家

通过在不同的操作系统和浏览器组合上运行各种屏幕阅读器，我们看到最终结果表中出现了明确的模式。 有一些明确的 SVG 模式的赢家和输家，加上中间某个地方的一些模式，只要您知道并且可以接受它们的限制，您就可以实施它们。 查看结果表，我们可以得出以下结论：

使用<img>标签的基本替代描述（第 1 组）

最佳展示

  • 模式 2 ： <img> + role="img" + alt="[words]"
  • 模式 3 ： <img> + role="img" + aria-label="[words]"

谨慎使用

  • 模式 4 ： <img> + role="img" + aria-labelledby="[ID]"

不建议

  • 模式 1 ： <img> + alt="[words]"

使用<svg>标签的基本替代描述（第 2 组）

最佳展示

  • 模式 5 ： <svg> + role="img" + <title>
  • 模式 8 ： <svg> + role="img" + <title> + aria-labelledby="[ID]"

谨慎使用

  • 模式 7 ： <svg> + role="img" + <title> + aria-describedby="[ID]"

不建议

  • 模式 6 ： <svg> + role="img" + <text>

使用<svg>标签的扩展替代描述（第 3 组）

最佳展示

  • 模式 11 ： <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

注意：虽然这种模式并不完美，因为它重复了替代描述，但它并没有忽略测试中的任何元素，这与“谨慎使用”模式不同。

谨慎使用

  • 模式 9 ： <svg> + role="img" + <title> + <text>
  • 模式 10 ： <svg> + role="img" + <title> + <desc>
  • 模式 12 ： <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

不建议

  • 该组中的所有模式都没有完全通过测试。

测试结果

请参阅 Carie Fisher 的 Pen [测试结果](https://codepen.io/smashingmag/pen/YzZQBwG)。

请参阅 Carie Fisher 的笔测试结果。

包起来

重要的是要注意，解释 SVG 模式测试结果的一部分是理解每个屏幕阅读器的创建者都有一个他们完全支持的推荐浏览器。 这并不意味着您不应该或不能在其他浏览器上使用屏幕阅读器，这只是意味着如果您这样做，结果可能不像您使用推荐的那样准确。

本文的模式测试确实包括一些可能属于“边缘”类别的浏览器和屏幕阅读器的组合，但也有关于建议您自己测试的操作系统、浏览器和屏幕阅读器的组合的注释。 这些测试的结果应该可以帮助您根据您的模式需求和约束做出最佳的 SVG 模式决策。

提醒您，在确定模式之前，请确保您了解如何以及何时创建可访问图像的基础知识，并且您完全了解不同图像类型所需的替代信息。

如果您在决定将哪种模式用于您的环境时需要更多帮助，请查看文章 Good, Better, Best: Untangling The Complex World Of Accessible Patterns，以帮助您在可访问模式的棘手水域中导航。 有了所有这些信息和一点点努力，您的 SVG 就正在朝着对所有人更具包容性的方向发展。

编者注：您可以在 Carie 即将举行的关于可访问前端模式的在线研讨会中学习有关可访问性的最佳实践——包括指南、测试工具、辅助技术和包容性设计模式。 在线，直播。