Marking up durations for screen readers

This post explains how to mark up durations so that they render nicely visually and for screen readers.

On we are very particular about typography when we can be.

An example is the audio durations generated by our CMS, which use prime and double prime marks for minutes and seconds respectively.
While doing some testing for some new features that are coming soon, Jonathan Mosen pointed out to me that screen readers do not render these audibly as ‘minutes’ and ‘seconds’, but by the name of the punctuation. I suppose this is because these marks can also be used for feet and inches.

A duration of 32′ 51″ (32 minutes 51 seconds) would be rendered as ’32 prime 51 double prime’.
Note that the marks slant to the right slightly? Most people use single and double quotes – they look like this: 32′ 51″. Yuk!

To fix this I made some tweaks to the underlying HTML. Firstly I hid the primes from screen readers and secondly added a visually-hidden colon ‘:’ between the minutes and seconds. It looks like this (as an image because I cannot the code to work in Blogger):

Note the hidden text and thin spaces to control the layout. This reads as ‘duration thirty-two fifty-one’. And it looks exactly the same as it did visually.

The code that generates this also disambiguates durations if they have only seconds or only minutes. In those case the words ‘minutes’ or ‘seconds’ are added as needed. And it knows to use the singular versions of the words for 1 minute too.

Why bother? Imagine having to listen to ‘prime’ and ‘double prime’ again and again as you move down through a page of 20 Morning Report itema. They aren’t needed in this context and it improves the user experience dramatically. So we do it.

EDIT: The latest iteration of this code is available as a gist.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s