Question: Do Icons Need Alt Tags?

Yes, icons should ideally have alternative (alt) text (tags) if they serve a meaningful role within the content. The alt tag provides a textual description of the icon, which aids in accessibility, particularly for users who rely on screen readers or browsers that can't render images.

In HTML, an icon image could be tagged like so:

<img src="icon.png" alt="Description of Icon">

If the icon is purely decorative and doesn't add any functional or informational value to the page, it's acceptable to use an empty alt attribute:

<img src="decorative-icon.png" alt="">

This tells screen reading software that the image can be ignored.

However, many modern websites use icon fonts or SVGs for icons. These can be slightly more complex when it comes to accessibility. For example, with icon fonts you might use something like this:

<i class="fa fa-info-circle" aria-hidden="true"></i>

In these cases, you wouldn't use an alt tag but instead you would use ARIA roles and properties to ensure accessibility. The aria-hidden="true" attribute tells assistive technologies to ignore this element. If the icon needs a text equivalent, such as when it serves as a button, you could include visually hidden text with the icon:

<button>
  <i class="fa fa-info-circle" aria-hidden="true"></i>
  <span class="visually-hidden">More Information</span>
</button>

In this way, you're ensuring your icons are accessible to all users, enhancing both the usability and SEO of your site.