Talkback not announcing dates in the correct format when in a range

Question

It seems that when using android talkback, it's not saying the date correctly when there are 2 dates in a range in format of dd/mm/yyyy - dd/mm/yyyy

If I had a simple date such as 01/06/2017, it would say it correctly as "First of June, Twenty Seventeen'. However if I had a date range such as 01/06/2017 - 01/06/2018, it would say it as "January Sixth Twenty-Seventeen to January Sixth Twenty-Eighteen", any ideas why?

I have my language set as en-AU.

This is the HTML structure:

<p>01/06/2017 - 01/06/2018</p>

However, if I put both dates in <time> elements, then it reads each date correctly, but separately, e.g. <p><time>01/06/2017</time> - <time>01/06/2018</time></p> is read as "First of june, twenty-seventeen", "dash", "first of june, twenty-eighteen", and the whole thing is fragmented so instead of reading it as a line, each element would have to be read separately. But it doesn't work if I wrap the whole thing in <time>, i.e. <p><time>01/06/2017 - 01/06/2018</time></p> won't work.

Answer 1

Date ranges are always a tricky thing as there isn't a better way than the one you are using (<p><time>01/06/2017</time> - <time>01/06/2018</time></p>)

However there is a way you can force it to say "to", with a quick caveat: If you use this method then if someone uses auto translate or you internationalise the site at some point it may result in poor translations / a lot of work converting the "to" to other languages.

With that disclaimer out of the way, the trick is to use the actual word "to": <p><time>01/06/2017</time> to <time>01/06/2018</time></p>.

But I know what you are thinking, I don't want the word "to" to be visible, I want to use a dash visually.

So now we introduce visually hidden text and aria-hidden to display one thing but read out another:

<p>
  <time>01/06/2017</time>
  <span aria-hidden="true">-</span>
  <span class="visually-hidden">to</span>
  <time>01/06/2018</time>
</p>

What we have done is hide the dash from screen readers and then provide some screen reader only text to replace it (another name for "visually hidden" is "screen reader only")

Here is a fiddle demonstrating:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<p>
  <time>01/06/2017</time>
  <span aria-hidden="true">-</span>
  <span class="visually-hidden">to</span>
  <time>01/06/2018</time>
</p>

Note: Trying to persuade a screen reader to say things a certain way is nearly always a recipe for introducing accessibility issues rather than fixing them. In this instance I think you are fine (hence why I gave an answer), but use this technique sparingly, most of the time screen reader users will be used to strange pronunciations and "fixing" them can actually be more confusing.

Although I have showed you how to "fix" this my personal opinion is that it does not need any intervention, it makes sense with "dash" being read out, but I also think you will not do any harm in this instance if you really want to try this technique out so I will leave the decision up to you.