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 2:25PM

WAI-ARIA Support Matrix
http://pauljadam.com/demos/ariasupport.html <http://pauljadam.com/demos/ariasupport.html>;

Aria-label works with all screen readers that I'm aware of. Has been that way for a while.

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 1:29 PM, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
>
> How well do the various screenreaders deliver custom ARIA labels like
> this to Braille displays these days?
>
> On 15/06/2015, 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>
>>>>> >>>>> >>>>> >>>>> >>>>
>>>> >>>> >>>> >>>> >>> >>> >>> >>> >>
>> >> >> >> >>
> > > >