Making HTML Emojis Accessible

Emojis have been around for a little while now, with an ever-expanding list of ideograms to help us to express our complex ideas and mix into our digital content and messages.

Although emojis are normally thought of in the context of sending a message through an instant messenger or phone app, many modern web applications are trending towards using emojis in amongst their online content.

HTML supports the rendering of emojis using a hexadecimal or decimal representation of the emoji’s Unicode character. See below for an example:

🤔

This will render a 🤔 in the browser just fine. Unless you are a screen reader or other assistive technology user where the browser will completely ignore this reference in the web page.

Browsers do not expose emoji HTML references as images in the accessibility tree - and emojis are, for all intensive purposes, images that convey contextual information to the user.

There’s a lot of debate and misunderstanding online about providing context for images rendered on our web pages. Many people take the hard line of ‘you should always have an alt tag or descriptive element for every image on a webpage’. I personally disagree with this assertion, and here’s my take:

You should always have a descriptive element associated with an image IF that image conveys some helpful contextual information about the webpage or experience to the user

Here’s an example; We have an image of ‘a friendly robot’ on a webpage describing artificial intelligence coding services and the image has an alt text of ‘a friendly robot waving’.

Does breaking up the flow of information for assistive technology users and letting them know that there’s a picture of ‘a friendly robot waving’ help them in their understanding or navigation of the information on that page? Probably not.

If however, we have an infographic describing the process of developing an artificial intelligence application then there would be active benefit in providing additional context to assistive technology users.

Accessibility is about making content and information on webpages quick and easy to perceive and navigate for all users.

From years of experience providing accessibility audits for websites and applications, one of the most common shortfalls is providing too little descriptive information for assistive technology users, however, providing too much information can also have a negative impact on user experience. I like to call this ‘accessibility waffle’.

Back to emojis.

Again, Emojis are images that convey specific contextual information to users. So we should ensure we provide enough information to the web browser so it can understand what the HTML emoji reference is and how to convey that to an assistive technology user. See below:

<span role='img' aria-label=‘Thinking face emoji'>🤔</span> 

Wherever we have an HTML reference to an emoji we should wrap this in a <span> element with a role of img and a descriptive attribute aria-label with some appropriate description of the emoji.

This tells the browser that this span should be understood as an image element in the accessibility tree and that the image has a descriptive element of ‘Thinking face emoji’.

Now when an assistive technology user navigates the page, a screen reader will announce ‘Image - Thinking face emoji’ or similar.

Let’s all enjoy expressing our emojis!