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

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

Answer 1

（我和上一个回答的亚当不一样）

你的问题有两点：

在 HTML5 中，i 标签应该用作印刷标记来标记语义的变化（例如拉丁语用语或通常不用于强调的斜体字） ).因此，此标记不适用于指定徽标。

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

如果你的图标只是为了装饰目的，就像你在评论中说的那样，那没关系。

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

Answer 2

空元素有效吗（比如<span></span>）？是的

是否可以访问空元素？这取决于。

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

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

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

如果你有一个 link 到设置页面，并且你想通过 CSS 添加一个齿轮图标，可以使用 CSS 来包含图标，因为它是多余的；相关信息（link 指向设置页面）存在于 a 元素的实际内容中，即文本 "Settings":

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

如果你有这个 link，但你不想提供文本，只是齿轮图标，它就不再可用了。现在相关的 "content" 不再在 HTML（它所属的位置）中，而是在 CSS（并非所有人都可以访问）中：

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

要使其可访问，您可以使用 img 元素及其 alt 属性；或者通过 CSS.

添加一些视觉上隐藏的文本

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

HTML Accessibility, are empty elements allowed?