E-mail List Archives
Thread: should aria-multiselectable be used on accordion group?
Number of posts in this thread: 10 (In chronological order)
From: Angela French
Date: Fri, Dec 09 2016 3:03PM
Subject: should aria-multiselectable be used on accordion group?
No previous message | Next message →
Hello,
I have a group of accordion "panels" on a page where when the panel heading is clicked, content is revealed "under" it. The group of panels is in this container div: <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
I am getting an accessibility error "Invalid WAI-ARIA role, state or property " using the accessibility evaluator inside of Siteimprove.
When I look on the web for guidance about the best aria attributes to use on expanding content, I get lots of different examples.
It the proper use of aria-multiselectable only on "real" tabs?
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Steve Faulkner
Date: Fri, Dec 09 2016 3:46PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
Hi Angela,
role=tablist supports aria-multiselectable according to specification
https://www.w3.org/TR/wai-aria-1.1/#tablist
It appears that the tool you are using is providing incorrect results,
which unfortunately is not an uncommon occurrence.
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
On 9 December 2016 at 22:03, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> I have a group of accordion "panels" on a page where when the panel
> heading is clicked, content is revealed "under" it. The group of panels
> is in this container div: <div class="panel-group" id="accordian"
> role="tablist" aria-multiselectable="true">
>
> I am getting an accessibility error "Invalid WAI-ARIA role, state or
> property " using the accessibility evaluator inside of Siteimprove.
>
> When I look on the web for guidance about the best aria attributes to use
> on expanding content, I get lots of different examples.
>
> It the proper use of aria-multiselectable only on "real" tabs?
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >
From: Jonathan Avila
Date: Fri, Dec 09 2016 3:51PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
> role=tablist supports aria-multiselectable according to specification
https://www.w3.org/TR/wai-aria-1.1/#tablist
Unless you are using tabs as accordions I don't see how you could have more than one tab selected as a time and have each tab panel be expanded. However, there may be situations where you can select multiple tabs to perform actions on them such as deleting tabs, etc. For accordions we do not recommend using the tab role though as the reading order does not coincide the structure.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART GroupÂÂ
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Don't miss Trends in Accessibility & Electronic Documents on Wed 12/7!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Bryan Garaventa
Date: Fri, Dec 09 2016 4:14PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
It's important to note that the use of ARIA Tab markup on accordions is being removed from the ARIA Authoring Practices Guide 1.1 and the use of expandable buttons or links is recommended instead.
This guidance is already included in the W3C GitHub project at
https://github.com/w3c/aria-practices
Also, there is a difference between the concept of multiselectable tabs and multi-expandable tabs, which are not the same thing.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
From: Angela French
Date: Fri, Dec 09 2016 4:21PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
I'm thinking that maybe I shouldn't be using role="tablist" aria-multiselectable="true" at all on this functionality after all. Mine are series of headings that expand to reveal content . They don't function as tabs where content is, visually, all occupying the same space.
Angela French
SBCTC.edu
From: Jonathan Avila
Date: Fri, Dec 09 2016 4:32PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
> I'm thinking that maybe I shouldn't be using role="tablist" aria-multiselectable="true" at all on this functionality after all.
Correct, you should not be using role of "tablist" and "tab". Role of "button" on the interactive element to expand and collapse would be appropriate. Each region that expands and collapse would be contained in an element with role of region.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART GroupÂÂ
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Don't miss Trends in Accessibility & Electronic Documents on Wed 12/7!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Angela French
Date: Fri, Dec 09 2016 4:56PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
Yeah, my code (that a contractor made) looks like this and seems rather convoluted and code-heavy.
<div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="accordian1">
<div class="panel-heading" role="tab" id="headingaccordian1">
<h2><a data-toggle="collapse" href="#collapseaccordian1" aria-expanded="false" aria-controls="collapseaccordian1" class="collapsed" data-parent="#accordian"><span class="glyphicon glyphicon-plus-minus" aria-hidden="true"></span>Aerospace and Advanced Manufacturing</a></h2>
</div>
<div id="collapseaccordian1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingaccordian1">
<p>Everett Community College - As one of the ten statewide centers of excellence, the
<a href="http://www.coeaerospace.com/" target="_blank">Center of Excellence for Aerospace and Advanced Manufacturing</a> provides leadership and resources to support economic growth for Washington state,
focusing on aerospace and advanced manufacturing. Working strategically with our industry
partners and educational institutions, we assist in developing the talent pipeline
for the next generation of future workers within the aerospace industry sector.
</p>
</div>
</div>
<div class="panel panel-default" id="accordian2">
Angela French
From: Angela French
Date: Fri, Dec 09 2016 5:20PM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
It's frustrating because neither WAVE or AChecker flags this as an error.
Angela French
SBCTC.edu
From: Mallory
Date: Mon, Dec 12 2016 6:33AM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | Next message →
Wow, yeah, that's convoluted!
To give your vendor a break though, if they looked at most other
examples anywhere, most of them are also horribly convoluted. They
really just need, as stated earlier, a button (the clickable) and a
chunk of content it controls (and these are by default independent of
each other anyway so people can have as many or as few open as they
please). Although if you're using these because if everyone were
expanded, things are very full, you might want a master button or
checkbox someone can click to expand/close all (I like being able to
open everything so I can use my search keys... way better than manually
clicking every single thing open if there are a lot).
cheers,
On Sat, Dec 10, 2016, at 12:56 AM, Angela French wrote:
> Yeah, my code (that a contractor made) looks like this and seems rather
> convoluted and code-heavy.
>
> <div class="panel-group" id="accordian" role="tablist"
> aria-multiselectable="true">
> <div class="panel panel-default" id="accordian1">
> <div class="panel-heading" role="tab"
> id="headingaccordian1">
> <h2><a data-toggle="collapse"
> href="#collapseaccordian1"
> aria-expanded="false"
> aria-controls="collapseaccordian1"
> class="collapsed"
> data-parent="#accordian"><span
> class="glyphicon glyphicon-plus-minus"
> aria-hidden="true"></span>Aerospace and
> Advanced Manufacturing</a></h2>
> </div>
> <div id="collapseaccordian1"
> class="panel-collapse collapse"
> role="tabpanel"
> aria-labelledby="headingaccordian1">
> <p>Everett Community College - As one
> of the ten statewide centers of excellence,
> the
> <a href="http://www.coeaerospace.com/"
> target="_blank">Center of Excellence for
> Aerospace and Advanced
> Manufacturing</a> provides
> leadership and resources to support
> economic growth for Washington state,
> focusing on aerospace and advanced
> manufacturing. Working strategically
> with our industry
> partners and educational institutions,
> we assist in developing the talent
> pipeline
> for the next generation of future
> workers within the aerospace industry
> sector.
> </p>
> </div>
> </div>
> <div class="panel panel-default" id="accordian2">
>
> Angela French
>
>
>
From: Lovely, Brian (CONT)
Date: Mon, Dec 12 2016 6:55AM
Subject: Re: should aria-multiselectable be used on accordion group?
← Previous message | No next message
My recommendation for accordions is to have code in trigger-content-trigger-content order. That way, when the trigger is activated to open its associated content area, that content is the next thing the user will encounter. The triggering element should either be a button, or have role="button" and tabindex="0", and should be provided with the aria-expanded attribute that is dynamically set to reflect the current expanded state of the associated content panel.