WebAIM - Web Accessibility In Mind

E-mail List Archives

Filtering result list accessibly

for

From: Miriam Fukushima
Date: Jun 13, 2019 7:33AM

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