WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role of Filters for Ordered List

for

From: Robert Fentress
Date: Jun 18, 2015 7:00AM

If I'm understanding you correctly, you may also want to include a live
region that dynamically displays the number of results. This will provide
immediate feedback on the effect the filters have on the results returned.
That way users won't have to navigate to the list every time they make a
change. Something like this:
<span class="badge bg-info" aria-live="polite"
aria-atomic="true">{{filtered.length}} Results</span>

Best,
Rob

On Mon, Jun 15, 2015 at 12:42 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> 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.
> > > > >



--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061