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.
Top comments (5)
If I'm not mistaken, most emojis do have their own codes, the codes we use in Markdown. Maybe we can use those as the labels, prefixed with emoji.For example,
aria label='emoji-thumbs-up'. What are your thoughts?
Yeah you can use that,as long as it describes the icon or emoji
In my experience, I quite often have no idea what people's emoji mean. Even if they are technically "accessible" by having labels, my browsers and devices aren't set up to display that information, so I'm generally lost. I ignore emoji-heavy content or just close the window.
Hi
There is this example I saw on codepen that puts a tooltip over emoji's.
maybe this would help
That's better, but it still shows up one common problem, which is that the one with the tooltip "keyboard" is just a meaningles square. I'd stick my finger in the air and say that one in twenty emoji I see don't render at all, on any site, on any device - they're worse than useless.