WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role of Filters for Ordered List

for

From: Birkir R. Gunnarsson
Date: Jun 15, 2015 10:42AM

I think toggle buttons (buttons with aria-pressed attribute and a
corresponding visual indication of toggled state) are a good solution
for filters.
For filters that have a number of fixed states, such as show all
transactions between amounts a and b, c and d, e and f .. tabs are a
good solution:
<code>
<h2>Filters</h2>
<button aria-pressed="true" class="active">Checking account</button>
<button aria-pressed="false" class="inactive">Credit cards</button>
<div role="tablist">
<div role="tab" id="tab1" aria-selected="true" aria-controls="id of
table">All transactions</div>
<div id="tab2" role="tab" aria-selected="false" aria-controls="id of
table">Transactions in last 14 days</div>
</div>
</code>
(this is pseudo code, skipping a lot of accessibility stuff like
tabindecies and so on).
Cheers



On 6/15/15, 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>
> > > > >


--
Work hard. Have fun. Make history.