HTML Accessibility, are empty elements allowed?

Question

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.

Answer 1

(I'm not the same Adam as the one who gave the previous answer)

There is two points in your questions:

• Does using an i tag to insert an icon is something accessible?

In HTML5, the i tag should be used as a typographic marker to markup a change in the semantic (like a latin locution for instance or something commonly italicized which is not used to emphasize). So this markup is not correct to be used to specify a logo.

For the specific case of screen readers, it will be ignored. But screen readers are one part of the accessibility aspects.

• Does it provide enough semantic?

If your icon is just for decoration purpose, like you said in comments, then it's ok.

If your icon had any semantic included then you must specify an alternative text.

Answer 2

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