Skip to content

Latest commit

 

History

History
23 lines (17 loc) · 803 Bytes

accessible-emoji.md

File metadata and controls

23 lines (17 loc) · 803 Bytes

accessible-emoji

Emojis have become a common way of communicating content to the end user. To a person using a screenreader, however, he/she may not be aware that this content is there at all. By wrapping the emoji in a <span>, giving it the role="img", and providing a useful description in aria-label, the screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.

Resources

  1. Léonie Watson

Rule details

This rule takes no arguments.

Succeed

<span role="img" aria-label="Snowman">&#9731;</span>
<span role="img" aria-label="Panda">🐼</span>
<span role="img" aria-labelledby="panda1">🐼</span>

Fail

<span>🐼</span>
<i role="img" aria-label="Panda">🐼</i>