search

ruthmoog / portfolio

👋 My personal website
https://ruthmoog.dev
0 stars 0 forks source link

Make emojis screen-reader friendly #7

Closed ruthmoog closed 1 year ago

ruthmoog commented 3 years ago

Check screen reader output for text which includes emojis.

At the moment text such as, "☕️ The main coding language I use for my job is Java.", is read by screen-readers as, "hot beverage The main coding language I use for my job is Java.".

Screen readers should pass over emojis which are used for presentation to provide visual context, but are not helpful to the text content.

It should be possible to use the span element to improve screen-reader output where relevant.

More info here: litmus.com: Special Characters, Emojis, Line Breaks: More Tricks for Optimizing Your Emails for Screen Readers

ruthmoog commented 1 year ago

emoji are wrapped with span element, with ARIA hidden: 

<span class="emoji" aria-hidden="true">🦥 </span>

and speak is set in CSS:

.emoji {
    speak: none;
}