WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Filtering result list accessibly

for

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

From: Miriam Fukushima
Date: Thu, Jun 13 2019 7:33AM
Subject: Filtering result list accessibly
No previous message | Next message →

Dear all,


I was wondering whether anyone knows good examples on how to implement
filters for a result list on a web page.

I have a section that contains two sets of radio buttons with various
options and depending on the selection the result list below changes.

I would orient myself by this filterable list of tools:
https://www.w3.org/WAI/ER/tools/.

But I was wondering if this is a fitting example for my case and if so,
about the following points:

1. Is it enough to have aria-live around the span that contains the
amount of results that changes or wouldn't it be better to have
aria-live on the whole list?
2. Is aria-live=true (as set in the example) better than
aria-live=assertive?
3. Is aria-controls useful here? As the filter options or a possible
"Apply filter" button kind of control the list.
4. Which case is better accessibility-wise: a) Have the filter change
the list dynamically and using aria-live and maybe aria-controls or
b) Have a button "Apply filter" that triggers the change in the list
and if b is the better option, do I still need aria-live and / or
aria-controls?
5. Where should the focus be after a change of the list or after using
an "Apply filter" button?


Thank you very much for the suggestions and advice!

Miriam

From: Brian Lovely
Date: Thu, Jun 13 2019 9:26AM
Subject: Re: [External Sender] Filtering result list accessibly
← Previous message | No next message

"wouldn't it be better to have
aria-live on the whole list?" --just let the user know how many results
there are and let them decide to check them out or not. Plus they can
quickly jump through and note what is and isn't in the list instead of
having the hear the entire thing read out.

" Is aria-controls useful here? " --it's my understanding that
aria-controls isn't currently very well supported and is kind of a waste of
time. If anyone else knows otherwise, please chime in

"true (as set in the example) better than
aria-live=assertive?" --Unless it is an alert that required immediate
action, the polite option in preferred

(4) --If you simply announce the current result count when the list is
updated, either having the filters update or a button is up to you.

" Where should the focus be after a change" If this list was a subset of a
long set, like the first 10 of 100 with a "more" button, I would say at the
beginning of the added content. In this case, maybe focus should just stay
on the last applied filter and allow the user to decide where to navigate
to next.

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.