5

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.

Antonin Cezard
  • 2,011
  • 1
  • 17
  • 30
  • 1
    Why are you trying to avoid images? How is an image presented in the form of a background image or generated content using the private unicode space less of an image than an img element? – Quentin Sep 27 '15 at 20:13
  • Just to clarify, those aren't empty elements. The definition of a true 'empty' element is one that, under the standards, cannot have any child elements, such as ``, `
    `, etc.     – BenM Sep 27 '15 at 20:14
  • Well less images mean less http requests isnt it ? And, well, icons are far more useful than images (because we can use css properties, etc). – Antonin Cezard Sep 27 '15 at 20:15
  • @BenM how could I call those tags without content ? – Antonin Cezard Sep 27 '15 at 20:15
  • @topleft Technically, they're childless nodes in the DOM. – BenM Sep 27 '15 at 20:16
  • Also, who told you to avoid their use? Exactly what are the accessibility issues they raise? – BenM Sep 27 '15 at 20:17
  • 1
    @BenM they don't have children elements but they also don't have any text content.. Its like, if I put with nothing in it – Antonin Cezard Sep 27 '15 at 20:17
  • @BenM: I would argue that describing them as empty _elements_ is fine. They are not empty _tags_ which are defined as such, but the actual element (instance of the tag on the page) is empty. – Adam Sep 27 '15 at 20:18
  • @topleft Text within an element is still a node in the DOM, thus a child of its parent element. – BenM Sep 27 '15 at 20:18
  • 1
    _“which will result in a cloud with a cog at its center”_ – well any such icon is obviously useless for a person that can’t see it, so if you want this to be accessible, you will have to provide a text alternative. How to hide that text from “seeing” users is a topic that has been discussed broadly already, so do some research into that. (_Image replacement_ would be a promising keyword for that, even if in this case it is not an image but a font icon, but it is the same issue.) – CBroe Sep 27 '15 at 20:19
  • @CBroe I know every way of hiding some text, but even if this was an image, I would juste leave an empty alt="". Because an image which doesn't do anything else than decoration doesn't need alternative text if I'm not mistaken – Antonin Cezard Sep 27 '15 at 20:20
  • I think there is some confusion here, and that you have in fact asked the wrong question. Under the specifications for HTML, there is nothing forbidding the use of childless nodes. Perhaps you're actually asking how to make the common use of `` elements for icons (such as via FontAwesome or IonIcons) more accessible to screen readers, etc. – BenM Sep 27 '15 at 20:21
  • 4
    So this “cloud with a cog at its center” is purely decorative, and has no meaning at all? You are not using it as a button to trigger some functionality, or anything like that? In that case, as an image it should be inserted as a background image rather than via an `img` element in the first place; for a – meaningless – font icon I don’t see any accessibility issue here, because there _is_ nothing to “access” if it is purely decorative. – CBroe Sep 27 '15 at 20:22
  • I agree with you, it's just that I was told not to use tag for decorative purpose (font-awesome) and I was wondering if there was really anything behind that – Antonin Cezard Sep 27 '15 at 20:24

2 Answers2

9

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

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
6

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

Adam
  • 17,838
  • 32
  • 54