WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role of Filters for Ordered List

for

From: Paul J. Adam
Date: Jun 15, 2015 10:45AM

You could give the filtering panel a navigation role with an aria-label to make the container unique. To give the filtering buttons unique "link purpose" text you could use aria-labelledby pointing to the id values of multiple strings ordered in how you'd want the SR to speak them. Or you can just use an aria-label to make the accessible name unique and purposeful.

<nav aria-label="Transaction Filters">
<button aria-label="Filter by dollar amount range">Amount Range</button>
</nav>

Something along those lines with the basic idea of giving each element and navigation container a unique and helpful accessible name.

Hope that helps!

Paul J. Adam
Accessibility Evangelist
www.deque.com

Join us at our Mobile Accessibility "Bootcamp!"
August 6-7 in Austin Texas
https://dequeuniversity.com/events/2015/mobile
Topics include responsive web design, native apps, & more

> On Jun 15, 2015, at 10:30 AM, Brian Lovely < <EMAIL REMOVED> > wrote:
>
>
> Assuming a list of transactions that can be ordered by column header: date, id, type, dollar amount, etc. if there is also a panel of filters that can constrain the transactions that can appear in the list: dollar amount range, specific type, etc. What is the role of this filtering panel and what ARIA properties should be used to communicate the relationship between the list and the filters
>
>
> Brian Lovely
> <EMAIL REMOVED>
> > > >