WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role of Filters for Ordered List

for

From: Brian Lovely
Date: Jun 15, 2015 11:36AM

Ah, good point, Paul. Much of the default behavior of the inputs will be used, therefor anything that attempts to usurp that native functionality should be avoided. Thanks for the heads under

Brian Lovely
<EMAIL REMOVED>

> On Jun 15, 2015, at 1:29 PM, Paul J. Adam < <EMAIL REMOVED> > wrote:
>
> Don't use role=application unless you plan to take over keyboard shortcut keys for ever single action on your custom web application. It disables the screen reader's default quick navigation commands like H for heading B for button, data table navigation is disabled. This affects NVDA/JAWS not VoiceOver.
>
> There's no reason to use role=application unless you really are building a google docs or yahoo mail type web app. So basically, be careful with role=application most people say avoid it.
>
> Use aria-labelledby or aria-label to modify the accessible names of all your controls so they sound good to the screen reader user.
>
> 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 12:23 PM, Brian Lovely < <EMAIL REMOVED> > wrote:
>>
>> I have to admit I should have said sortable instead of ordered, if that makes any difference. Right now there is a calendar widget for date, a low text input and a high text input for dollar amount range, and a set of checkboxes, one for each kind of transaction,
>>
>> I was thinking the whole thing, filters and list, as a role=application, but I find it difficult to decide how best to deal with the filters
>>
>> Brian Lovely
>> <EMAIL REMOVED>
>>
>>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < <EMAIL REMOVED> > wrote:
>>>
>>> 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>
>>>> >>>> >>>> >>>> >>>
>>> >>> >>> >>> >> >> >> >> >
> > > >