< Back to Demos | Learn more at PaulJAdam.com >
Dates with Screen Readers
Date split into different lines and not fully spelled out
JUN
02
*VoiceOver says "JUN" then "O two" visually "02".
*JAWS/NVDA says "JUN" then "zero two".
Above example wrapped in a span with aria-label="June 2nd" and role="text"
JUN
02
*VoiceOver says "June Second" visually "2nd".
*JAWS/NVDA/Chrome says "June Second".
*JAWS/NVDA/Firefox/IE says "JUN" then "zero two".
Conclusion
Only VoiceOver and Chrome/JAWS/NVDA support aria-label and role=text.
Date in a single tag and fully spelled out CSS width 20px
JUNE 02
*IE/Chrome/Firefox/NVDA says "JUNE zero two".
*IE/Chrome/Firefox/JAWS says "JUNE Second"
*VoiceOver says "JUNE Second"
JUL
Jul
Jul 2018