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

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

\n\n

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

\n\n

\n\n
• 它是无用的/用于实现某种 CSS 布局吗？它根本不应该影响可访问性。
\n\n
• 它用于通过 CSS 添加内容吗？这取决于。\n\n
  \n
  • 这个 CSS 内容只是装饰吗？它不应该\xe2\x80\x99 影响可访问性。
  \n
  • 此 CSS 内容代表实际内容吗？这取决于。\n\n
    \n
    • 此内容是否有可用的替代方案/是否多余？它不应该\xe2\x80\x99 影响可访问性。
    \n
    • 难道没有替代方案/it\xe2\x80\x99s不多余吗？它\xe2\x80\x99 可能是可访问性的问题。
    \n
    \n\n
  \n
  \n\n
\n\n

\n\n

例子

\n\n

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

\n\n

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

\n\n

如果您有指向设置页面的链接，并且想要通过 CSS 添加齿轮图标，则可以使用 CSS 访问该图标以包含该图标，因为它是多余的；相关信息（链接指向设置页面）存在于元素的实际内容中a，即文本“设置”：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

（您不应该\xe2\x80\x99 使用该i元素来添加图标；span如果必须添加空元素，请改为使用。）

\n

Answer 2

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

你的问题有两点：

• 使用i标签插入图标是否可以访问？

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

对于屏幕阅读器的特定情况，它将被忽略。但屏幕阅读器是辅助功能方面的一部分。

• 它提供了足够的语义吗？

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

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