如何使我的图标系统可访问？

这是我前几天收到的一个问题？

对于一个复杂的单页应用程序，您建议使用 图标字体 还是 内联 SVG？ 两种方式是否存在特定的可访问性问题？ 可访问性对我们来说尤为重要，因为学校使用我们的产品。 我之所以问这个问题，是因为我们目前正在统一和建立一个图标系统。

我不认为我会根据网站的“类型”来做出选择，所以让我们忽略这部分内容。

我还认为 SVG 图标系统 比图标字体更好，所以让我们假设是这样的。

可访问性问题是最有趣的部分，所以让我们来谈谈它。

有两种使用图标的方式

1. 独立：图标需要独立地传达含义
2. 装饰性：图标只是一个视觉上的装饰 – 周围的文字传达了含义。

独立图标模式

我正在根据 Heather Migliorisi 的 可访问的 SVG 进行调整

<!-- role="img" so that the SVG is not traversed by browsers that map the SVG to the "group" role -->
<!-- aria-labelledby pointing to ID's of title and desc because some browsers incorrectly don't use them unless we do -->
<!-- if you are using a <use>-based icon system, this would be a <symbol id="unique-id"> below, but otherwise the same -->
<svg role="img" viewBox="0 0 100 100" aria-labelledby="unique-title-id unique-desc-id">

  <!-- title becomes the tooltip as well as what is read to assistive technology -->
  <!-- must be the first child! -->
  <title id="unique-title-id">Short Title (e.g. Add to Cart)</title>

  <!-- longer description if needed -->
  <desc id="unique-desc-id">A friendly looking cartoon cart icon with blinking eyes.</desc>

  <!-- all the SVG drawing stuff -->
  <path d="..." />
</svg>

装饰性图标模式

请记住，装饰性图标的理念是，即使它不存在，也不会有任何影响。 因此，我们将其隐藏在 AT 中

<button>
  <svg aria-hidden="true" viewBox="0 0 100 100">
    <!-- or <use>, if using a <symbol>-based icon system -->
    <path d="..." />
  </svg> 
  Add to Cart
</button>

但是……图标可能以两种方式使用。

没错。 所以您可能应该准备您的图标，使它们能够用作独立的、有意义的图标。 然后，如果它们在装饰性上下文中使用，请在 <svg> 上添加 aria-hidden="true"。

因此，您的图标系统可能像这样体现…

<Icon icon="icon-cart.svg" standalone="true" />

或者

<?php
  $standalone = false;
  include("icon-cart.php"); // SVG with PHP logic sprinkled in
?>

或者

<%= render "icon/cart", :locals => {:standalone => true} %>

或者其他任何方式。

假设您必须使用图标字体。

事情就是这样。

许多图标字体的使用方式是这样的

<i data-icon="a"></i>

或者其他变体，比如它使用“私有使用区”作为属性值，或者为每个图标生成唯一的类名，等等

.icon-camera:before {
  content: "\e90f";
}

要制作一个独立的图标，这很容易，您只需在元素上添加 aria-hidden="true"。

如果您需要一个有意义的独立图标，这意味着需要更多 HTML。 来自 防弹图标字体，这是推荐的结构

<span class="icon-fallback-glyph">
  <span class="icon icon-hamburger" aria-hidden="true"></span>
  <span class="text">Menu</span>
</span>

现在，图标本身被隐藏了（因为它使用了一个奇怪的、没有意义的字体），但存在实际的文本，AT 可以按预期读取它。 您也可以在视觉上隐藏文本。 假设您在此处有一些功能测试，以下 CSS 可以根据需要隐藏/显示

.icon-fallback-text .icon {
  display: none;
}
supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .icon {
  display: inline-block;
}
.supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

记住链接图标！

如果图标（以任何这些方式）是链接，请确保其中存在清晰地宣布其功能的普通 HTML 文本，或者提供一个执行此功能的 aria-label

<a href="link" aria-label="See Picked Pens">
  <svg> 
    <use xlink:href="#icon-codepen"></use>
  </svg>
</a>