HTML 可访问性，是否允许空元素？答案

【问题标题】：HTML Accessibility, are empty elements allowed?HTML 可访问性，是否允许空元素？
【发布时间】：2015-09-27 20:10:47
【问题描述】：

简单的问题。有人告诉我，例如使用这个

<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> 标签是空的。

但是，如果不借助图像，你怎么能做那种事情呢？我的目标是在页面中实现尽可能少的图像，这只能通过字体图标来实现。

【问题讨论】：

您为什么要避免使用图片？与 img 元素相比，图像如何以背景图像或使用私有 unicode 空间生成的内容的形式呈现？
澄清一下，这些不是空元素。真正的“空”元素的定义是，根据标准，不能有任何子元素，例如<input />、<hr /> 等。
@BenM 他们没有子元素，但也没有任何文本内容。就像我把放在里面什么都没有
“这将导致云的中心有一个齿轮” - 任何这样的图标对于看不到它的人来说显然是无用的，所以如果你要使其可访问，您将必须提供文本替代项。如何隐藏“看到”用户的文本是一个已经广泛讨论的话题，所以对此进行一些研究。（图像替换将是一个很有前途的关键字，即使在这种情况下它不是图像而是字体图标，但它是同一个问题。）
所以这个“中间有一个齿轮的云”纯粹是装饰性的，没有任何意义吗？您没有将它用作触发某些功能或类似功能的按钮吗？在这种情况下，作为图像，它应该作为背景图像插入，而不是首先通过 img 元素插入；对于一个无意义的字体图标，我在这里看不到任何可访问性问题，因为如果它纯粹是装饰性的，那么没有可以“访问”。

【解决方案1】：

有一个空元素是否有效（如<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。）

【讨论】：

【解决方案2】：

（我和上一个答案的亚当不是同一个亚当）

你的问题有两点：

在 HTML5 中，i 标签应该用作排版标记来标记语义上的变化（例如拉丁语言或不用于强调的常用斜体）。所以这个标记不适合用来指定一个标志。

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

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

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

【讨论】：