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").
role="img" attribute is important here, because according to the ARIA recommendation, accessible names cannot be applied directly to generic HTML elements (such as
<span>). Therefore, by assigning the
img role, the emojis are identified as images, allowing the accessible name for it to be created using the
Hope you found this post useful. It was published . Please show your love and support by sharing this post.