Geek Answers Handbook

HTML accessibility, empty elements allowed?

Simple question. I was told that using, 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 lead to the appearance of a cloud centered in the center) is not allowed for the correct html available, because the two <i> tags are empty.

But then, how can you do such things without resorting to the image? My goal is to achieve the smallest number of images available on a page using font icons only.

+1
source share
2 answers

Does it really have an empty element (e.g. <span></span> )? Yes.

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

  • Is anything / used to achieve a specific CSS layout? It should not affect accessibility at all.
  • Is it used to add content via CSS? It depends.
    • Is this just for CSS content? It should not affect accessibility.
    • Is this CSS content the actual content? It depends.
      • Is there an available alternative to this content / redundant? It should not affect accessibility.
      • Is there an alternative / not redundant? This is probably an accessibility issue.

Example

If you have an empty space on your page and you want to add some cogs images via CSS, but they do not serve any purpose, except that they look beautiful, adding that this should not affect accessibility, as its simple decoration:

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

If you have a link to the settings page and you want to add the cog icon via CSS, you can use it with CSS to include the icon, because it is redundant; relevant information (that the link leads to the settings page) is present in the actual content of element a , that is, in the text "Settings":

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

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

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

To make this available, you can use the img element and its alt attribute; or add text visually hidden using CSS.

(You should not use the i element to add icons ; use span instead if you need to add an empty element.)

+1
source

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

There are two questions in your questions:

  • Is the i tag used to insert an icon?

In HTML5, the i tag should be used as a typographic marker for marking changes in semantics (for example, for a Latin expression or what is usually italicized, which is not used for underlining). Therefore, this markup is incorrect so that it can be used to indicate the logo.

For a specific screen reader, it will be ignored. But screen readers are an integral part of accessibility.

  • Does it provide enough semantics?

If your badge is only for the purpose of decoration, as you said in the comments, then this is normal.

If your icon contains any semantics, you must specify alternate text.

+3
source

More articles:


All Articles