E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Bossley, Peter A.
Date: Fri, Dec 02 2016 5:15PM
Subject: Best acccessible accordion widget example
No previous message | Next message →

Greetings,
Wondering what folks are pointing developers to for Accordions that work well on desktop and mobile web browsers / screen readers. Obviously we want keyboard accessible as well.
I like the Assets Framework but was wondering if there is a better example out there.
Best,

From: Birkir R. Gunnarsson
Date: Fri, Dec 02 2016 6:44PM
Subject: Re: Best acccessible accordion widget example
← Previous message | Next message →

Deque University has a few
https://dequeuniversity.com/library/aria/tabpanels-accordions/
(I worked on about half of them).

I honestly think that any link or button with aria-expanded attribute
properly toggled is sufficient.
-B


On 12/2/16, Bossley, Peter A. < = EMAIL ADDRESS REMOVED = > wrote:
> Greetings,
> Wondering what folks are pointing developers to for Accordions that work
> well on desktop and mobile web browsers / screen readers. Obviously we want
> keyboard accessible as well.
> I like the Assets Framework but was wondering if there is a better example
> out there.
> Best,
>
>
> > > > >


--
Work hard. Have fun. Make history.

From: Paul J. Adam
Date: Fri, Dec 02 2016 10:16PM
Subject: Re: Best acccessible accordion widget example
← Previous message | Next message →

Yes aria-expanded on a button is really all you need. Here's a demo http://pauljadam.com/demos/aria-expanded.html <http://pauljadam.com/demos/aria-expanded.html>;

Bootstrap includes an accessible accordion, http://v4-alpha.getbootstrap.com/components/collapse/ <http://v4-alpha.getbootstrap.com/components/collapse/>;.

Paul J. Adam
Accessibility Evangelist
www.deque.com

> On Dec 2, 2016, at 7:44 PM, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Deque University has a few
> https://dequeuniversity.com/library/aria/tabpanels-accordions/
> (I worked on about half of them).
>
> I honestly think that any link or button with aria-expanded attribute
> properly toggled is sufficient.
> -B
>
>
> On 12/2/16, Bossley, Peter A. < = EMAIL ADDRESS REMOVED = > wrote:
>> Greetings,
>> Wondering what folks are pointing developers to for Accordions that work
>> well on desktop and mobile web browsers / screen readers. Obviously we want
>> keyboard accessible as well.
>> I like the Assets Framework but was wondering if there is a better example
>> out there.
>> Best,
>>
>>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >

From: Lovely, Brian (CONT)
Date: Mon, Dec 05 2016 6:43AM
Subject: Re: Best acccessible accordion widget example
← Previous message | Next message →

:" aria-expanded on a button is really all you need" ...with maybe the caveat that the content panel should be just after the triggering element, so that the expanded content is the next thing the user encounters.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Paul J. Adam
Sent: Saturday, December 03, 2016 12:17 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Best acccessible accordion widget example

Yes aria-expanded on a button is really all you need. Here's a demo http://pauljadam.com/demos/aria-expanded.html <http://pauljadam.com/demos/aria-expanded.html>;

Bootstrap includes an accessible accordion, http://v4-alpha.getbootstrap.com/components/collapse/ <http://v4-alpha.getbootstrap.com/components/collapse/>;.

Paul J. Adam
Accessibility Evangelist
www.deque.com

> On Dec 2, 2016, at 7:44 PM, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Deque University has a few
> https://dequeuniversity.com/library/aria/tabpanels-accordions/
> (I worked on about half of them).
>
> I honestly think that any link or button with aria-expanded attribute
> properly toggled is sufficient.
> -B
>
>
> On 12/2/16, Bossley, Peter A. < = EMAIL ADDRESS REMOVED = > wrote:
>> Greetings,
>> Wondering what folks are pointing developers to for Accordions that
>> work well on desktop and mobile web browsers / screen readers.
>> Obviously we want keyboard accessible as well.
>> I like the Assets Framework but was wondering if there is a better
>> example out there.
>> Best,
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Birkir R. Gunnarsson
Date: Mon, Dec 05 2016 7:43AM
Subject: Re: Best acccessible accordion widget example
← Previous message | No next message

Good point.
Ifthe content isnotimmadiately after the triggeringelement,
aria-controls should be used on the trigger to pointtothe content.
<buttonaria-expanded="true" aria-controls="cpanel1">text</button>
....somestuff goeshere...

<div id="cpanel1">content of panel goes here</div>
1. For this setup it is better to use an aria-labelledby on the
content panel pointing back to the button.
2.Screen reader support for aria-controls is nearly non-existent (Jaws
with FF and Narrator last time I checked, nothing else), so the
aria-labelledby implementation is marginally better.
Feel free to file bugs so wecankeep pushingthis issue with thevendors.



On 12/5/16, Lovely, Brian (CONT) < = EMAIL ADDRESS REMOVED = > wrote:
> :" aria-expanded on a button is really all you need" ...with maybe the
> caveat that the content panel should be just after the triggering element,
> so that the expanded content is the next thing the user encounters.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Paul J. Adam
> Sent: Saturday, December 03, 2016 12:17 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Best acccessible accordion widget example
>
> Yes aria-expanded on a button is really all you need. Here's a demo
> http://pauljadam.com/demos/aria-expanded.html
> <http://pauljadam.com/demos/aria-expanded.html>;
>
> Bootstrap includes an accessible accordion,
> http://v4-alpha.getbootstrap.com/components/collapse/
> <http://v4-alpha.getbootstrap.com/components/collapse/>;.
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
>> On Dec 2, 2016, at 7:44 PM, Birkir R. Gunnarsson
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Deque University has a few
>> https://dequeuniversity.com/library/aria/tabpanels-accordions/
>> (I worked on about half of them).
>>
>> I honestly think that any link or button with aria-expanded attribute
>> properly toggled is sufficient.
>> -B
>>
>>
>> On 12/2/16, Bossley, Peter A. < = EMAIL ADDRESS REMOVED = > wrote:
>>> Greetings,
>>> Wondering what folks are pointing developers to for Accordions that
>>> work well on desktop and mobile web browsers / screen readers.
>>> Obviously we want keyboard accessible as well.
>>> I like the Assets Framework but was wondering if there is a better
>>> example out there.
>>> Best,
>>>
>>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> archives at http://webaim.org/discussion/archives
>> >
> > > http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >


--
Work hard. Have fun. Make history.