When screen readers (or other assistive technologies) encounter an emoji, depending on their specific implementation and the level of support provided, they may handle it by pronouncing it either based on a default scheme, or by using the unicode description corresponding to the emoji's Unicode code point.
However, this may not be the desired behavior in some cases where you may want to mark up emojis with accessible names that differ from the default. One such way to do so can be by using the aria-label property, which you can use to specify a text description or name for the emoji:
<p>
<!-- 😁 -->
<span aria-label="feeling happy" role="img">😁</span>
</p>
In this case, the text in the "aria-label" (i.e. "feeling happy") will be pronounced by the screen reader (or other assistive technology) instead of the default (which might have been read out as "beaming face with smiling eyes").
The role="img" attribute is important here, because according to the ARIA recommendation, accessible names cannot be applied directly to generic HTML elements (such as <div> or <span>). Therefore, by assigning the img role, the emojis are identified as images, allowing the accessible name for it to be created using the aria-label property.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.