HTML无障碍性，空元素是否允许？

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>

在合适的可访问的html中，带有一个齿轮的云，由于两个空的<i>标签，是被禁止的。

那么，如何在不使用图像的情况下实现这种效果呢？我的目标是在页面中尽可能少地使用图像，只有使用字体图标才能实现。

- Antonin Cezard

---

你为什么要避免使用图片？作为背景图像或使用私有Unicode空间生成内容的图像，与img元素相比，它们有何不同？ - Quentin

只是为了澄清，那些不是空元素。真正“空”的元素的定义是，在标准下不能有任何子元素，例如<input />，<hr />等。 - BenM

@BenM 它们没有子元素，但也没有任何文本内容。就像我放置一个没有任何内容的<b></b>一样。 - Antonin Cezard

“这将导致一个以齿轮为中心的云图标。”显然，对于看不见它的人来说，任何这样的图标都是无用的，因此，如果您希望其可访问性，您将需要提供文本替代方案。如何隐藏该文本以使“看得见”的用户无法看到是一个已经广泛讨论的话题，因此请进行一些研究。（即使在这种情况下它不是图像而是字体图标，但这是同样的问题，“图像替换”将是一个有前途的关键词。） - CBroe

那么这个“中心带齿轮的云”纯粹是装饰性质的，没有任何意义吗？您不会将其用作触发某些功能的按钮或类似的东西吗？在这种情况下，作为图像，它应该作为背景图像插入，而不是通过“img”元素插入；对于一个无意义的字体图标，我在这里看不到任何可访问性问题，因为如果它是纯粹的装饰性图标，则没有任何“可访问”的内容。 - CBroe

Answer 1

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

有一个空元素是否可访问？这取决于情况。

• 它是用于什么 / 为了实现某个CSS布局？它不应该影响可访问性。
• 它是用于通过CSS添加内容吗？这取决于情况。
  
  • 这个CSS内容只是装饰吗？它不应该影响可访问性。
  • 这个CSS内容代表实际内容吗？这取决于情况。
    
    • 这个内容是否有可访问的替代品/是否多余？它不应该影响可访问性。
    • 没有替代品/不多余吗？那么它很可能会影响可访问性。

例子

如果您的页面上有一些空白空间，并且您想通过CSS添加一些齿轮图像，但它们除了好看外没有任何作用，那么添加这些图像不应影响可访问性，因为这只是装饰而已：

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

如果你有一个指向设置页面的链接，并且想通过CSS添加齿轮图标，那么它使用CSS包含图标是可访问的，因为这是多余的;相关信息（链接将引导到设置页面）已经存在于a元素的实际内容中，即文本“Settings”：

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

如果您有这个链接，但不想提供文本，只想要齿轮图标，那么它现在无法访问。现在相关的“内容”不再位于HTML中（它应该在那里），而是位于CSS中（并非每个人都可以访问）：

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

为了使此内容易于访问，您可以使用 img 元素及其 alt 属性；或通过 CSS 添加一些在视觉上隐藏的文本。

（如果必须添加空元素，则不应使用 i 元素添加图标；而是使用 span。）

- unor

Answer 2

(我不是之前回答问题的那个Adam)

你的问题有两个点：

• 使用 i 标签插入图标是否具有可访问性？

在 HTML5 中，i 标签应该被用作排版标记来标记语义上的变化（比如拉丁习语等通常斜体的内容，而不是用来强调）。因此，这种标记方式不正确，不能用于指定一个 logo。

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

• 这样做是否提供足够的语义信息？

如果你的图标只是装饰用途，如你在评论中所说，那么可以。

如果你的图标包含任何语义信息，则必须指定替代文本。

- Adam