WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: search results not being announced

for

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

From: Angela French
Date: Mon, Jul 31 2017 2:13PM
Subject: search results not being announced
No previous message | Next message →

Hello,
I'm hoping someone out there in this helpful community and help us figure out why the search results are not being announced on this page<http://devapps.sbctc.edu/TechPrepV2/SearchArticulations>;. There are four form elements to create the query, but just using the Search button will bring back guaranteed results. However they aren't announced. We are trying both area-live="assertive" and aria-atomic="true" and still no announcement that there are results now displayed on the page.

Any guidance appreciated.



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: Lovely, Brian (CONT)
Date: Mon, Jul 31 2017 2:21PM
Subject: Re: search results not being announced
← Previous message | Next message →

This isn't an answer to your question, but I noticed aria-labelledby is being set to a text string. Aria-label accepts a text string, aria-labelledby and aria-describedby accept space-delimited lists of IDs. ...also, aria-labelled by will cause the actual element text to not be read out. You probably want to use aria-describedby instead.

<td>

<a id="MainContent_gvResults_lnkDetails_0" class="DetailsLink" aria-labelledby="J M Weatherwax (Aberdeen)" href="javascript:__doPostBack('ctl00$MainContent$gvResults$ctl03$lnkDetails','')">HVAC</a>
</td>


Do this kind of thing instead:

<td>

<a id="MainContent_gvResults_lnkDetails_0" class="DetailsLink" describedby=" MainContent_gvResults_lblHS_0href="javascript:__doPostBack('ctl00$MainContent$gvResults$ctl03$lnkDetails','')">HVAC</a>
</td>

<td>
<span id="MainContent_gvResults_lblHS_0">J M Weatherwax (Aberdeen)</span>
</td>

...which should read out something like "link HVAC J M Weatherwax open parenthesis Aberdeen close parenthesis"



From: Lovely, Brian (CONT)
Date: Mon, Jul 31 2017 2:45PM
Subject: Re: search results not being announced
← Previous message | Next message →

...or course, one of my colleagues just pointed out that aria-label, aria-describedby, and aria-labelledby may not work on an element that is not in the focus order like a button or form element. The best way of adding screen-reader only text on a non-focusable element may be putting the text in a span and hiding it visually with CSS clipping.


<td><span>Regular cell text <span class="clipping_hidden">additional text</span></span></td>

From: Lovely, Brian (CONT)
Date: Mon, Jul 31 2017 2:54PM
Subject: Re: search results not being announced
← Previous message | Next message →

I think for aria-live to pick up a change, it has to be on an element that is part of the dom on load. So if you had a div that was part of the dom on load and it had aria-live on it, when you injected the search results table into that div it should read out.

From: Birkir R. Gunnarsson
Date: Mon, Jul 31 2017 8:10PM
Subject: Re: search results not being announced
← Previous message | Next message →

Anglea.
You are putting wayyyy too many live region attributes on the page.
Remember that a screen reader is supposed to automatically read all
the content in a live region.
You don´t want a screen reader to automatically start reading all the
search results.
There are even two nested elements on the page with aria-live="true"
and aria-atomic="true" (aria-atomic means, read the entire content of
this live region, not just the part that was updated).
I would take all aria-live attributes of the page and add them back on
the container element for the span with the number of search results.
(span with id=MainContent_LitRecordsFound).

Give that a spin and see if that is a better starting point.



On 7/31/17, Lovely, Brian (CONT) via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
> I think for aria-live to pick up a change, it has to be on an element that
> is part of the dom on load. So if you had a div that was part of the dom on
> load and it had aria-live on it, when you injected the search results table
> into that div it should read out.
>
>

From: Angela French
Date: Thu, Aug 03 2017 9:46AM
Subject: Re: search results not being announced
← Previous message | No next message

Birkir,
We edited the code to only have the aria attributes on a div that tells the user how many records were found. Still it does not announce. Frustrating. This is the major piece we need to get worked out on this application.
http://devapps.sbctc.edu/TechPrepV2/SearchArticulations

Angela French
SBCTC