Making Emojis More Accessible with MDX
Emojis have become an integral part of our online communication, adding a fun and expressive touch to our messages (who couldn't use a bit more ✨). Making emojis accessible is an important step in creating an inclusive online environment. One way to make emojis more accessible is by including alternative text descriptions for screen readers. Alternative text can describe the appearance or meaning of the emoji, allowing users who are visually impaired to understand the message being conveyed.
By adding some additional markup emojis will be announced properly across different devices and can distinguished from inline written text as images.
Before
HTML generated before setting up @fec/remark-a11y-emoji:
<p>Emojis have become an integral part of our online communication, adding a fun and expressive touch to our messages (who couldn't use a bit more ✨). </p>
After
HTML generated after setting up @fec/remark-a11y-emoji:
<p>Emojis have become an integral part of our online communication, adding a fun and expressive touch to our messages (who couldn't use a bit more <span role="img" aria-label="sparkles">✨</span>)...</p>