Improve aria roles for live search #656
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
|
A+++ pull request description, would read again. |
| } else { | ||
| liveSearch.$resultsBlock.mustache('search/_results_block', results); | ||
| liveSearch.updateAriaLiveCount(); |
There was a problem hiding this comment.
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.
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.
|
👍 vote for transformation of this PR description into a blog post. |
|
Good explanation of a hard problem. 👍 |
edds
added a commit
that referenced
this pull request
Aug 12, 2014
Improve aria roles for live search
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.