E-mail List Archives
Thread: Role of Filters for Ordered List
Number of posts in this thread: 11 (In chronological order)
From: Brian Lovely
Date: Mon, Jun 15 2015 9:30AM
Subject: Role of Filters for Ordered List
No previous message | Next message →
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 ADDRESS REMOVED =
From: Birkir R. Gunnarsson
Date: Mon, Jun 15 2015 10:42AM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> > > > >
--
Work hard. Have fun. Make history.
From: Paul J. Adam
Date: Mon, Jun 15 2015 10:45AM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> > > >
From: Brian Lovely
Date: Mon, Jun 15 2015 11:23AM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS REMOVED =
> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >> >> >
> > > >
From: Paul J. Adam
Date: Mon, Jun 15 2015 11:29AM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
>
>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>> >>> >>> >>> >>
>> >> >> >> > > > >
From: Brian Lovely
Date: Mon, Jun 15 2015 11:36AM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS REMOVED =
> On Jun 15, 2015, at 1:29 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>
>>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>>> >>>> >>>> >>>> >>>
>>> >>> >>> >>> >> >> >> >> >
> > > >
From: Lynn Holdsworth
Date: Mon, Jun 15 2015 12:29PM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>
>>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>>> >>>> >>>> >>>> >>>
>>> >>> >>> >>> >> >> >> >> >
> > > > >
From: Paul J. Adam
Date: Mon, Jun 15 2015 2:25PM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>>
>>>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>>>>> >>>>> >>>>> >>>>> >>>>
>>>> >>>> >>>> >>>> >>> >>> >>> >>> >>
>> >> >> >> >>
> > > >
From: Jim Allan
Date: Mon, Jun 15 2015 2:42PM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
what ever is spoken by the screen reader will be displayed by the braille
display.
On Mon, Jun 15, 2015 at 3:25 PM, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >>>
> >>>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >>>>> > >>>>> > >>>>> > >>>>> > >>>>
> >>>> > >>>> > >>>> > >>>> > >>> > >>> > >>> > >>> > >>
> >> > >> > >> > >> > >>
> > > > > > > > >
> > > > >
--
[image: http://www.tsbvi.edu] <http://www.tsbvi.edu>;Jim Allan,
Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Jonathan Avila
Date: Mon, Jun 15 2015 2:49PM
Subject: Re: Role of Filters for Ordered List
← Previous message | Next message →
> what ever is spoken by the screen reader will be displayed by the braille display.
Well yes for labels, but it's important to properly understand how things are rendered on a Braille display. For example, if a person were to add the role or state of checkbox to the label and not use a proper role or state programmatically this information would show up differently on a Braille display. For example, screen readers may control what shorthand notation is used for properly exposed roles or states, for example a less than followed by an x and then a greater than sign to represent a checked checkbox, etc.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Monday, June 15, 2015 4:43 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Role of Filters for Ordered List
what ever is spoken by the screen reader will be displayed by the braille display.
On Mon, Jun 15, 2015 at 3:25 PM, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >>>
> >>>> On Jun 15, 2015, at 12:45 PM, Paul J. Adam < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >>>>> > >>>>> > >>>>> archives at http://webaim.org/discussion/archives
> >>>>> > >>>>
> >>>> > >>>> > >>>> archives at http://webaim.org/discussion/archives
> >>>> > >>> > >>> > >>> archives at http://webaim.org/discussion/archives
> >>> > >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > >
> > > archives at http://webaim.org/discussion/archives
> >
--
[image: http://www.tsbvi.edu] <http://www.tsbvi.edu>;Jim Allan, Accessibility Coordinator Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964
From: Robert Fentress
Date: Thu, Jun 18 2015 7:00AM
Subject: Re: Role of Filters for Ordered List
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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