WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Javascript table filtering question

for

From: Birkir R. Gunnarsson
Date: May 1, 2019 7:05AM

We've been implementing similar tables.
We do have a screen reader descrption that "typing into this field
filters the search results table".
Use aria-describedby to reference the elemen with those instructions,
you can even hide it with isplay: one; (because aria-describedby
overrides display: none;)
<label for="search">Search<label>
<input id="search" aria-describedby="srText">
<span id="srText" style="display: none;">Typing into this field
filters the search results table by title</span>

Like Jared said, you could have a visually hidden live region that
indicates how many results were found (you can use the number of
visible <tr> elements minus one (the row with the headers).

<div class="srOnly" aria-live="polite" aria-atomic="true">
<span id="resFound"> <span> titles displayed.</div>

srOnly would be a CSS class that hides text visually, you can Google
screen reader only content. This organization called WebAIM, or
something, has an article on it that isn't all awful. *grin*

aria-live="polite" tells screen read to announce the text when the
span is updated
aria-atomic="true" forces the screen reader to read the whole content
of the div (including the text), else it would only read the number
when it is updated, you can take that approach to if you prefer.



On 4/30/19, Jared Smith < <EMAIL REMOVED> > wrote:
> Jeremy Echols wrote:
>
>> Beyond ensuring that the form elements are correctly added to the page,
>> are there any accessibility issues that we might need to address?
>
> It sounds like you've considered the issues. The updating table
> shouldn't pose an issue because it can only update when they are in
> the filter text field. It may take some orientation to realize that
> the table is auto-updating - most forms would have a button to perform
> the action. I don't see this as a critical issue - especially if there
> are instructions and/or a good label ("Filter titles in the table
> below" or similar).
>
> You might consider an ARIA live region to indicate the filtering
> status ("27 titles found" or similar) after perhaps a second of
> inactivity in the search field. This would be especially helpful if
> they filter out all results - they would know this without having to
> navigate the table.
>
> Jared Smith
> WebAIM.org
> > > > >


--
Work hard. Have fun. Make history.