Question

简单的问题。我被告知使用，例如，这个

<span class="fa-stack fa-lg">
  <i class="fa fa-cloud fa-stack-2x"></i>
  <i class="fa fa-cog fa-stack-1x"></i>
</span>

由于两个<i>标记为空，

（这将导致云在其中心处有一个cog）被禁止使用正确的可访问html。

但是，如果不诉诸图像，你怎么能做到这一点呢？我的目标是在页面中实现尽可能少的图像，只有字体图标才能实现。

Answer 1

（我和前一个回答的人不一样）

您的问题有两点：

在HTML5中，i标签应该用作印刷标记来标记语义的变化（例如拉丁语locution或通常斜体化的东西，不用于强调）。因此，这个标记用于指定徽标是不正确的。

对于屏幕阅读器的特定情况，它将被忽略。但是屏幕阅读器是可访问性方面的一部分。

如果您的图标仅用于装饰目的，就像您在评论中所说的那样，那就没关系。

如果您的图标包含任何语义，则必须指定替代文字。

Answer 2

有一个空元素（如<span></span>）是否有效？是。

是否可以使用空元素？这取决于。

它是否用于实现某种CSS布局？它根本不应影响可访问性。
是否用于通过CSS添加内容？这取决于。
- 这个CSS内容只是装饰吗？它不应该影响可访问性。
- 此CSS内容是否代表实际内容？这取决于。
  - 这个内容是否有替代方案/它是多余的？它不应该影响可访问性。
  - 没有替代品/它不是多余的吗？这可能是无障碍问题。

如果你的页面上有一些空白区域，并且你喜欢通过CSS添加一些齿轮图像，但除了看起来不错之外它们没有任何用途，添加它们不应该影响可访问性，因为它只是装饰：

<span class="cog"></span>

如果你有一个设置页面的链接，并且你想通过CSS添加一个cog图标，可以使用CSS来访问它，因为它是多余的;相关信息（链接指向设置页面）存在于a元素的实际内容中，即文本“设置”：

<a href="/settings"><span class="cog"></span>Settings</a>

如果您有此链接，但您不想提供文本，只需提供齿轮图标，则不再需要它。现在，相关的“内容”不再出现在HTML（它所属的地方）中，而是出现在CSS中（每个人都无法访问）：

<a href="/settings"><span class="cog"></span></a>

要使其可访问，您可以使用img元素及其alt属性;或添加一些通过CSS直观隐藏的文本。

（您shouldn’t use the i element for adding icons;如果您必须添加空元素，请使用span。）