HTML5 i tag validity with icons

Question

I have been using Bootstrap to build my site, but in doing so and researching SEO, I\'ve discovered that using the i tags with glyphicons is not technically \"v

Answer 1

Don’t use i.

The i element has a meaning which isn’t appropriate for general icons:

[…] a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

Reasons why some people use(d) i as hook for showing icons (via CSS) might be:

• The term "icon" starts with i.
• The element name is short.

Use span instead, which is a meaningless element.

---

If the icon is relevant content (important for understanding/using your page), consider using the img element instead, which allows you to use the alt attribute.

You should use CSS for decorative icons only. If that’s not possible:

If you link this icon and the link doesn’t contain any content (no text, no img, …), i.e. it only contains an empty element, then you should provide some content in the HTML. Otherwise, visitors without CSS support, screen reader users, etc. won’t be able to use your link. If you don’t want to include content for design reasons, hide it visually. More details in my related answer.

Answer 2

You can use something like <span class="sr-only">Your Text</span> to improve the accessibility.

.sr-only is a built-in Bootstrap class to make it easier to provide useful text to screen readers when you also do not want that text to appear visually on the screen.