HTML 可访问性，是否允许空元素? [英] HTML Accessibility, are empty elements allowed?

问题描述

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

Simple question. I was told that the use of, for example, this

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

(which will result in a cloud with a cog at its center), is forbidden for proper accessible html, because the two <i> tags are empty.

但是，你怎么能在不诉诸图像的情况下做那种事情呢?我的目标是在页面中实现尽可能少的图像，只有使用字体图标才能实现.

But then, how can you do that sort of stuff without resorting to an image ? My goal is to achieve the fewest images possible in a page, its only achievable with font icons.

推荐答案

有一个空元素是否有效(比如 </span>)?是的.

Is it valid to have an empty element (like <span></span>)? Yes.

是否可以访问空元素?视情况而定.

Is it accessible to have an empty element? It depends.

• 它是否无用/用于实现某种 CSS 布局?它根本不应该影响可访问性.
• 是否用于通过 CSS 添加内容?这取决于.
  • 这个 CSS 内容只是装饰吗?它不应该影响可访问性.
  • 此 CSS 内容是否代表实际内容?这取决于.
    • 此内容是否有可访问的替代方案/是否多余?它不应该影响可访问性.
    • 别无选择/它不是多余的吗?这可能是可访问性方面的问题.

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

    If you have some empty space on your page, and you’d love to add some images of cogs via CSS, but they don’t serve any purpose besides looking nice, adding these should not affect accessibility, as it’s just decoration:

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

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

    If you have a link to a settings page, and you want to add a cog icon via CSS, it’s accessible using CSS for including the icon because it’s redundant; the relevant information (that the link is leading to the settings page) is present in the actual content of the a element, i.e., the text "Settings":

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

    如果您有此链接，但不想提供文本，而只想提供齿轮图标，则无法再访问该链接.现在相关的内容"不再在 HTML(它所属的地方)中，而是在 CSS(并非所有人都可以访问)中:

    If you have this link, but you don’t want to provide text, just the cog icon, it’s not acessible anymore. Now the relevant "content" is no longer in the HTML (where it belongs) but in the CSS (which is not accessible to everyone):

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

    要使其可访问，您可以使用 img 元素及其 alt 属性；或者添加一些通过 CSS 视觉隐藏的文本.

    To make this accessible, you could use the img element and its alt attribute; or add some text that’s visually hidden via CSS.

    (您不应使用 i 元素添加图标；使用 span 而不是如果您必须添加一个空元素.)

    (You shouldn’t use the i element for adding icons; use span instead if you have to add an empty element.)

    这篇关于HTML 可访问性，是否允许空元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！