I recently published an article on building accessible forms and this is kind of a sequel, OK not a sequel but it is a post you might need if you want to build accessible applications.

So I was working on my portfolio site today and I needed to add an emoji to a paragraph, I thought of using font awesome icons but I didn't want to use them because I was going to add an extra dependency to my site so the obvious option for me was to use Unicode because it has the exact icon I needed.

A lot of other times I have used Unicode in my HTML I just dumped it in the markup without even thinking of the accessibility concerns.

I was about to repeat that today until I held myself back and said this doesn't look accessible, I made some research and it actually isn't.

First of all, the emoji is an image and there is nothing that indicates that it is in the above demo. So we have to use ARIA: img role attribute to identify the element as an image. Secondly, use the aria-label attribute to give the emoji an accessible name.

Remember it is important the internet and its contents remain accessible to everyone.