WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: preferred method for alerting user that results are displayed after search

for

Number of posts in this thread: 3 (In chronological order)

From: Angela French
Date: Wed, Jul 26 2017 5:28PM
Subject: preferred method for alerting user that results are displayed after search
No previous message | Next message →

Hello,
We have a web form that creates a query to a database. After the screen reader user (I'm using NVDA to test) clicks "search" the results show on the page, but NVDA doesn't announce them. The same goes on our login form if the user doesn't enter a valid username. We have tried using aria-alert="assertive" but it is not announced. In a Google search I'm reading from a few years ago that screen reader support for these live regions is spotty. Is that still true? What is a fool proof method for alerting users that the results are now displayed on the page? If the results have a link in them, then tabbing seems to work, but not so on our user error message.

Thank you



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Birkir R. Gunnarsson
Date: Wed, Jul 26 2017 8:47PM
Subject: Re: preferred method for alerting user that results are displayed after search
← Previous message | Next message →

aria-alert is not a valid attribute.
What you are looking for is aria-live="assertive".
I would simply impliment a visually hidden live region that is
populated when results are visible.
<div aria-live="assertive" id=sr" class="sr-only"> </div>
(the class name is whatever you have for visually hidden content).
When the JavaScript is done updating page with search results it
should add an alert to this region.

document.getElementById("sr").textContent="Search results are available".
You could also move focus to the top of the search results (if the
search is initiated by clicking a button).


On 7/26/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> We have a web form that creates a query to a database. After the screen
> reader user (I'm using NVDA to test) clicks "search" the results show on the
> page, but NVDA doesn't announce them. The same goes on our login form if
> the user doesn't enter a valid username. We have tried using
> aria-alert="assertive" but it is not announced. In a Google search I'm
> reading from a few years ago that screen reader support for these live
> regions is spotty. Is that still true? What is a fool proof method for
> alerting users that the results are now displayed on the page? If the
> results have a link in them, then tabbing seems to work, but not so on our
> user error message.
>
> Thank you
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >


--
Work hard. Have fun. Make history.

From: Graham Armfield
Date: Thu, Jul 27 2017 4:35AM
Subject: Re: preferred method for alerting user that results are displayed after search
← Previous message | No next message

Also 'assertive' is probably too strong here since it will break into
whatever the screen reader is currently announcing. Using 'polite' will (in
theory) cause the screen reader to wait until it's finished voicing
something else.

This page at Digital Brighton and Hove (
https://digitalbrightonandhove.org.uk/internet-access/) does what you
describe (I think). It does (AJAX) searches on demand without refreshing
the entire page. Note there is an aria-live status area at the bottom of
the page which tells user when searches are done. Focus is also placed onto
the search results container. Possible Brighton postcodes to use are: BN1
3TJ, BN2 9QE, BN3 8LD

Regards
Graham Armfield