A simple react a11y Emoji component

May 28, 2019 📖 1 min read

Emojis are cool, right? Everyone ❤️ emojis, but screen readers have a different opinion about the subject.

For those who don’t already know, there are two attributes very useful to help screen readers:

aria-label adds a string label to an element, it’s useful in cases that the text label is not visible on the screen.

aria-hidden (From MDN):

Adding aria-hidden=“true” to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding: Purely decorative content, such as icons or images. Duplicated content, such as repeated text. Offscreen or collapsed content, such as menus.

So, these attributes seems a very good idea to our Emoji component. Let’s see it in action:

import React from "react";

const Emoji = ({ label, symbol }) => (
    aria-label={label ? label : ""}
    aria-hidden={label ? "false" : "true"}

export default Emoji;

If we don’t pass a label prop, we want to set aria-hidden to true so screen readers ignore our emoji.

And some use example:

  label="open book"
  symbol="📖" />
  {timeToRead} min read

Which renders something like this:

  aria-label="open book"
2 min read
<!-- ... ->

And this is it! Fun isn’t it? Happy ❤️☕️🐑🐧!

Cover image by JFL @Unsplash