Go to page 22: The JAWS aria-label with digits bug

Some software bugs are more amusing than others. For some reason I find this one to be amusing, perhaps because I discovered it on a Friday afternoon.

My goal was to provide some context for a list of numeric links that appear at the bottom of a pager feature on a web page, for example at the bottom of a page of search results:

Typically this might be coded as a list of links, like so:

  <ul>
    <li class="thispage">1</li>
    <li><a href="page2.html">2</a></li>
    <li><a href="page3.html">3</a></li>
    <li><a href="page4.html">4</a></li>
    <li><a href="page5.html">5</a></li>
  </ul>

Screen readers will read this as “link 2”, “link 3”, “link 4”, and “link 5”, which in my opinion is not particularly intuitive and needs a bit more explanation.

With this in mind, I thought I would enhance the list with a few accessibility features:

• Wrap it in a <nav> element with role=”navigation” and aria-label=”More pages on this topic”
• Add hidden text “The current page:” as a preface to the number of the current page. This is hidden using the clip method so it’s invisible to sighted users but announced to screen reader users.
• Add aria-label to each link so that it reads “Go to page 2” rather than simply “2”.

Here’s the revised code:

<nav role="navigation" aria-label="More pages on this topic">
  <ul>
    <li class="thispage"><span class="hidden">Current page:</span>1</li>
    <li><a href="page2.html" aria-label="Go to page 2">2</a></li>
    <li><a href="page3.html" aria-label="Go to page 3">3</a></li>
    <li><a href="page4.html" aria-label="Go to page 4">4</a></li>
    <li><a href="page5.html" aria-label="Go to page 5">5</a></li>
  </ul>
</nav>

According to the Text findviagra.com Alternative Computation algorithm in the ARIA spec, the link text should be announced only if there is no value for aria-label or aria-labelledby, so aria-label should work as a replacement for existing link text.

This all works beautifully with NVDA 2014.3 in both IE11 and Firefox 32. It also works beautifully with JAWS in Firefox, but in IE11 JAWS announces both the aria-label and the link text (observed in both JAWS 15 and 16 beta). Not only that, but it concatenates them into a single label, which results in “Go to page 22” rather than “Go to page 2”. It continues on in this fashion, with “Go to page 33”, “Go to page 44”, and so on. The position of the aria-label attribute within the code has no effect.

Here’s my test page, which includes a couple of possible temporary solutions until the JAWS bug is fixed (I reported it to Freedom Scientific using the JAWS 16 Beta Report form. The ok-but-not-great solutions I came up with are:

1. Spell out the page number in aria-label (e.g., “Go to page two”). This is an improvement, but JAWS still reads both aria-label and link text so the result is “Go to page two 2”. At least that’s more accurate than “Go to page 22”, but still odd and potentially confusing.
2. Add additional text to the aria-label to serve as a separator between the two digits, for example “Go to page 2 now”. With this approach, JAWS announces “Go to page 2 now 2”. Still not perfect, but to me this seems like the best solution until the JAWS bug is fixed.