WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Role of Filters for Ordered List

for

From: Lynn Holdsworth
Date: Jun 15, 2015 12:29PM

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