Search code examples
htmlaccessibilitywai-ariavoiceover

How to make Voice0ver read dates correctly


NOTE: using Chrome on Mac with VoiceOver

If the date is "September 16th 2016", what VoiceOver reads is "September One Six T H Two Zero One Six". Is there any way to make it read correctly as "September Sixteenth Two Thousand and Sixteen". code pen link

<div tabindex="0" aria-label="September 16th 2016">16</div>

One solution could to to change the aria-label attribute to hold "September Sixteenth Two Thousand and Sixteen" text, but is there any library which can read it correctly ?


Solution

  • I suggest you do not try to change the behavior.

    You are assuming that VoiceOver users will struggle with this. It is more likely that VoiceOver users are familiar with this from all the other sites they visit that announce dates like this.

    If anything, consider getting rid of the ordinal indicator (the "th," "rd," "nd," etc). Maybe allow it to display visually, but hide it from screen readers using aria-hidden.

    Also, VoiceOver users typically do not use Chrome, they use Safari.

    I also suggest you find some VoiceOver users and get their feedback.