使用内联雪碧图创建可访问的 SVG 图标

这是一篇关于 Marco Hengstenberg 编写的可访问 SVG 标记模式的优秀文章。以下是理想示例

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/>
    </svg>
</button>

笔记

• 并非 <svg> 本身具有交互性，而是它被包裹在一个 <button> 中以实现交互。
• .svg-icon 类包含一些巧妙的技巧，例如基于 em 的大小调整以匹配其旁边的文本大小，以及 currentColor 以匹配颜色。
• 由于旁边有真实的文本，因此可以通过 aria-hidden="true" 安全地忽略图标。如果您需要一个仅包含图标的按钮，则可以将该文本包装在一个可访问的 .visually-hidden 类中。
• focusable="false" 属性解决了 IE 11 的一个 bug。

此外，一个方便的 CodePen 用于参考所有模式。

直接链接 →