0

Bootstrap and FontAwesome write it this way :

<i class="fa fa-fort-awesome"></i>

It seems to me that this should be preferred : 

<span class="fa fa-fort-awesome" aria-hidden="true"></span>

since the span element is not semantic (unlike the i tag), and the aria-hidden attribute makes the element ignored by screen readers.

But could this be this overkill, and should I just go with their syntax ?

GentleFish
  • 349
  • 3
  • 5
  • I use FontAwesome syntax and I've never had any problems but it works both ways so I guess its up to your preference. – Trug Nov 23 '15 at 19:45
  • IMO the answer should be "don't use icon fonts". I don't really like them at all (I prefer svg personally and as a user, I usually disable downloaded fonts and then the icons don't work either) and I really hate them being an `` tag. – Adam D. Ruppe Nov 23 '15 at 19:51
  • What do you mean by "proper"? Is there a specific thing you're trying to accomplish with your mark up? As is, your question sounds like you're just asking for opinions. – BSMP Nov 23 '15 at 20:11
  • Semantics vs. brevity are the main reasons for doing one over the other. – nathanhleung Nov 23 '15 at 21:16
  • @BSMP you're right, it's unclear, the real question here is more : why do they use a semantic element instead of a non-semantic one ? Is it just for brevity, or does it just doesn't matter, since the element is empty and not very important in term of structure, anyway. Also, why don't they use aria-hidden ? Also because the element is empty ? – GentleFish Nov 24 '15 at 11:15

1 Answers1

2

Short answer: just go with their syntax.

FontAwesome explicitly states that it has support for screen readers on its home page, and Bootstrap mentions support in several places in its documentation.

That being said, if you want better control over how it works with a screen reader, you can make your own <span>, and test it with a screen reader (assuming you have access to that software and/or hardware), but you'll probably get the same result.

Aeolingamenfel
  • 2,399
  • 1
  • 15
  • 22