accessibilityscreen-readersnarrator

How to handle version numbers for screen readers?

I'm using Windows Narrator and a version number like 2.3.96 is being reader as a date "2nd March, 1996". How do I handle version numbers for screen readers? I see some answers suggested using a label and spell out the dots, like: aria-label="2 dot 3 dot 96". Is there a better way to do this?

Solution

  • Short Answer

    Use <p aria-label="Version 2 point 3 point 96">Version 2.3.96</p>, this will get parsed correctly in most popular screen readers. Make sure there are no <spans> splitting the version number from the text, use an aria-label as overkill / a backup.

    Long Answer

    Normally I would advise to never interfere with the way a screen reader pronounces things, as @QuentinC has suggested.

    However in this circumstance I would say that you do want to try and fix this problem, as hearing a date read where there should be a version number could be very confusing (was it the date the software was written, is it the date the company was formed? Who knows!).

    This is a parsing problem in the screen reader, very different from problems most people have where they don't like the way something is read, please only follow the advice below for this one example only.

    Fix one, change your markup.

    You didn't add your markup but the below explanation is based on my testing.

    This problem will actually fix itself (at least in JAWs, NVDA and VoiceOver from my testing) by simply adding 'Version' before the version number.

    My guess is you have the version number in a format similar to the following:

    <p>Version <span>2.3.96</span></p> or <p>2.3.96</p> without the word 'version'.

    By removing the <span> in the first example JAWS, NVDA and VoiceOver read the following correctly in my testing:

    <p>Version 2.3.96</p>

    Once the <span> is added around the version number the context of the numbers is lost (text within <span> elements is evaluated on it's own) so a screen reader will try and parse it on it's own, without any context, and decide it is a date.

    Surely using aria-label will fix it though?

    Also aria-label will probably not work on static elements (<div>, <span> etc.) that do not have a role that indicates they are an active element, so odds are it will not work anyway for you.

    For that reason I would not recommend trying to fix this problem with aria-label alone, however adding it for the screen readers that do take it into consideration is a step that would not hurt.

    This is the only time I have ever recommended interfering with how a screen reader talks, please do not take this as a step to solve other pronunciation problems as this is a parsing problem not a pronunciation problem.

    Taking that into account I would recommend you use the following:

    <span aria-label="Version 2 point 4 point 99">Version 2.4.99</span>

    With either a <span>, <p> or other content block surrounding it.