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

问题描述

简单的问题。例如，我被告知，使用这个

 < 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> 
  

（这将导致云中心为cog），禁止正确访问html ，因为这两个< i> 标签都是空的。

然后，你怎么能做到这样的没有诉诸图像的东西？我的目标是在一个页面中实现尽可能少的图像，它只能通过字体图标实现。 解决方案

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

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

• 它是否被用于任何/用于实现某个CSS布局？它根本不应该影响可访问性。



• 是否用于通过CSS添加内容？这取决于。
  
  
  
  
  • 这个CSS内容只是装饰吗？它不应该影响辅助功能。
  
  
  • 这个CSS内容是否代表实际内容？这取决于。
    
    
    
    
    • 是否有这种内容的替代方案/它是多余的？它不应该影响可访问性。
    
    
    • 是否有其他选择/它不是多余的？这可能是可访问性的问题。
    
    
    
    
    
  
  
  
  
  

示例

如果页面上有空白空间，你很想通过CSS添加一些齿轮图像，但除了看起来不错之外，它们没有任何其他用途，添加它们不应该影响可访问性，因为它只是装饰：

 < span class =cog>< / span> 
  

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

 < a href =/ settings>< span class =cog>< /跨度>设置< / A> 
  

如果您有此链接，但您不想提供文本，只需输入cog图标，它不再可用了。现在相关的内容不再位于HTML中（它所属的位置），而是位于CSS中（不能被所有人访问）：

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

为了使其可以访问，您可以使用 img 元素和它的 alt 属性;或添加一些通过CSS隐藏的文字。

（您不应该使用 i 元素添加图标;如果必须添加空元素，请使用 span 。 ）

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>

(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.

解决方案

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

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

• Is it used for nothing / for achieving a certain CSS layout? It shouldn’t affect accessibility at all.
• Is it used for adding content via CSS? It depends.
  • Is this CSS content only decoration? It shouldn’t affect accessibility.
  • Is this CSS content representing actual content? It depends.
    • Is there an acessible alternative for this content / is it redundant? It shouldn’t affect accessibility.
    • Is there no alternative / it’s not redundant? It’s likely a problem for accessibility.

Example

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>

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>

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>

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

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

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