Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve aria roles for live search #656

Merged
merged 5 commits into from
Aug 12, 2014
Merged

Conversation

alicebartlett
Copy link
Contributor

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.

Alice Bartlett added 2 commits August 11, 2014 16:10
For aria-live to work, the bit that is read out needs to remain on the page (not be swapped out by the javascript). Putting a visually hidden result count that remains on the page and is then updated by the javascript means that when the result set has finished updating screen readers will read out the new result count.
So that we can call it from the @results object outside of mustache for the aria-live result count, extract this to a method.
@bradwright
Copy link
Contributor

A+++ pull request description, would read again.

} else {
liveSearch.$resultsBlock.mustache('search/_results_block', results);
liveSearch.updateAriaLiveCount();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there a need for this to be done before we create the new checkbox filters? if not could we move it after this if block and then we wouldn't need two calls in each part of the if.

Alice Bartlett added 3 commits August 11, 2014 16:35
When the results have been loaded, JS now updates an aria-live region on the page with the result count. This means screen readers will read out the new result count.
For screen readers the count appears outside of the mustache template so it is always on screen and always read out, so we can aria-hidden=true it here so it doesn't get read twice.
@rboulton
Copy link
Contributor

👍 vote for transformation of this PR description into a blog post.

@tombye
Copy link
Contributor

tombye commented Aug 11, 2014

Good explanation of a hard problem. 👍

edds added a commit that referenced this pull request Aug 12, 2014
@edds edds merged commit 993c1a0 into master Aug 12, 2014
@edds edds deleted the improve-aria-roles-for-live-search branch August 12, 2014 07:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants