Ensure Accessibility for Icons & Emojis Links

Learn about a Tailwind CSS utility and native HTML attribute to improve accessibility.
Publish date: June 9, 2024·Published in Blog
Blog image

It is often convenient to use an icon (e.g., an SVG) or an emoji for a link instead of a text. But keep in mind that this may not be accessible for all people, e.g., because they use a screen reader or simply don’t recognize it.XXXX

Let’s look at two examples and see how we can ensure accessibility. First, we have several SVG images linking to the social media profiles:

image

In the case of Tailwind CSS, we can use the sr-only class to hide an element visually without hiding it from the screen reader. Further on, it’s possible to use the title attribute of a link that appears if it’s hovered:

it’sitle="Instagram" ...> “  <span c”ss="sr-only">Instagram</span>
  <svg aria-hidden="true" ...>...</svg>
</a>

The same can be done for an emoji:

image
<a title= “Switch to Engli “h language”>
	<span class="sr-only">Switch to English language</span>
	<span aria-hidden="true" ...>🇬🇧</span>
</a>