图标是内容吗？

Edd Morgan 在文章中写道

显然我们都同意标记应该只包含内容，不包含装饰性元素。但是图标属于哪一类呢？它们不是装饰性的，因此不应该存在于标记中，而应该完全在 CSS 中定义吗？

我相信我们可以想象一个“装饰性”图标。我敢打赌，这是最常见的一种类型。它作为设计的一部分，伴随某个单词或短语。我没有科学论文可以引用，但我认为它们会告诉我们，它可以使某件事更容易记忆、更容易找到、更容易区分或跨文化相关，等等。

这里有一个例子

让我们像 Ed 的问题中的引述那样构建它：“因此不应该存在于标记中，而应该完全在 CSS 中定义”。

<button class="button button-follow">
  Follow
</button>

.button-follow {
  padding-left: 70px; /* Normal left padding plus space for icon */
  background: url(/images/icons/icon-follow.svg) no-repeat left center;
}

HTML 中没有关于图标的任何特定内容。纯粹的装饰性。即使该图像加载失败，或者即使 CSS 加载失败，它仍然是一个按钮，并且它肯定不依赖于任何 JavaScript。如果我们在这里是完美的渐进增强公民，我们将确保<button> 包裹在 <form action="/do/the/right/thing"> 中，或者将其设为 <a href="/go/to/right/place"> 以确保其功能本身保持完整。

或者我们可以这样做

.button-follow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  background: url(/images/icons/icon-follow.svg);
  background-size: cover;
}

HTML 没有变化。

字体图标也是同一种东西

.button::before {
  font-family: "icon-font";
}
.button-follow::before {
  content: "\e901";
}

尽管即使使用“专用使用区域”，伪元素也会被屏幕阅读器读取，这对于图标来说可能非常尴尬。更不用说 字体图标的其他问题了。

包含在标记中……

如果您追求的是 字体图标的最佳实践，您可能会最终至少得到

<span class="icon icon-hamburger" aria-hidden="true"></span>

如果没有围绕它添加一个包装元素。所以现在我们在 HTML 中有了“装饰性”的东西。您是否应该为此感到难过？不。

我更喜欢 SVG 图标系统，它可能为我们提供更类似于以下的标记

<button class="button button-follow">
  <svg class="icon icon-follow" aria-hidden="true">
    <use xlink:href="#icon-follow" />
  </svg>
  Follow
</button>

… 并且该 <use> 可能也引用了 HTML 中某处的 <symbol>。

我对此感到难过吗？不。

然后还有没有任何支持文本的图标

对于这种情况，我们 可能会这样做

<button aria-label="Save Now" class="button button-save">
  <svg class="icon icon-save">
    <use xlink:href="#icon-save" />
  </svg>
</button>

它略有不同，但总的来说，非常相似。我们没有颠覆世界，因为这个图标是“内容”，而其他图标是“装饰性”的。

它只是 HTML

诀窍在于良好地管理它，而不是教条式地坚持“属于那里”和“不属于那里”的东西。

HTML 充满了各种东西。我的 favicon 在里面，那不是装饰性的吗？我的 Google Analytics 脚本在下面，这根本不像内容。我必须使用额外的 <div> 来给自己一个相对定位的上下文。它没有任何危害。

我更担心 垃圾入侵数据库。

但我明白

拥有某些规则很有帮助。宣扬对 Web 有益而非有害的概念很有帮助。您可能不应该使用 <img> 来完成 background-image 的工作。

我喜欢在使用标记时考虑其含义的想法。它是否完成了您需要它完成的工作？它是否有助于或损害可访问性？性能？可维护性将如何？