alphagov/frontend — pull request #656 by alicebartlett (2014-08-11 15:23:54+00:00)
Title: Improve aria roles for live search

The tl;dr of this PR is that now screen readers will read out the result count when the search results auto update. \o/
I've written the solution to this problem out in a bit more detail than I normally would because it's a bit of a hack and I found it difficult to find any documentation on how to do this well online.

I had to do something a bit funny to get this to work so here is a longer explanation:

Feedback from Léonie on similar features on GOV.UK is that wrapping the entire result set in an aria-live tag is _way_ to noisy for screen reader users as the whole result set is then read out. Her suggestion is that we wrap only the result count in an aria-live attribute.

This code is using nested mustache templates. I tries just wrapping the result count on the mustache template in an aria-live region but when I tested it with Voice Over, the result was that the screen reader read out "loading...", which is what the $('.result-count') changes to, and then nothing when the new result block is swapped in. I assume this is because the aria-live region tag needs to stay on the page, and swapping it out with JS breaks this. I'd be interested if anyone thinks this hypothesis is wrong, it's difficult to find information on this.

Given the aria-live region needs to stay on the page my options were: break apart the templates in order to get the aria-live bit outside of the JS updated bit or add another result-count div outside of the mustache and then use JavaScript to update the count (Thanks to @tombye for this suggestion)

I went with option 2.

So now, there is a visuallyhidden div with the result count wrapped in an aria-live tag above the mustache templates. This is updated by the JavaScript after it has finished loading in the content. The result is that as soon as the results have finished loading screen readers will read out the new result count.