1. A more accessible
ACC
ORD
I O N

2. The anatomy of an accordion
Header
Content panel
Closed Open

3. Two different UI patterns
Accordion Collapsible section (Show/hide)

4. Why use an accordion or show/hide?
Large amounts of content - Shortens the page initially
Content ‘options’ - Pay by debit card, credit card or cash
Comparisons between content - Burgers or pizzas
Comparisons don’t work unless content sections are adjacent
‘On load’ content may not be relevant to the user
Reliant on Javascript for the functionality

5. What do we currently have?
Bespoke accordion
scripts
4
Bespoke hide/show
script
1&
* that I have found so far

6. What do we want?
accessible, flexible,
robust script
to rule them all
1

7. What’s wrong with the current scripts?
The Foundation 5 accordion script is very basic
Duplicate functionality but in different ways
Lag behind the current accessibility standards

8. Viewing accordions with assistive technology
How do screen-readers like JAWS deal with accordion content?
If we haven’t considered accessibility then either…
The user gets *EVERYTHING* The user gets *NOTHING*

9. Why change the scripts?
We have a commitment to support *all* our users
This means working to meet WCAG2 standards
(Web Content Accessibility Guidelines)

10. How to (start) fixing things
Judicious application of WAI-ARIA roles & attributes
Web Accessibility Initiative - Accessible Rich Applications Suite
WAI-ARIA, the Accessible Rich Internet Applications
Suite, defines a way to make Web content and Web
applications more accessible to people with
disabilities. It especially helps with dynamic content
and advanced user interface controls developed with
Ajax, HTML, JavaScript, and related technologies.
http://www.w3.org/WAI/intro/aria

11. How to (start) fixing things
HTML
<div id="showhide" role="tablist">
<h1 id="showhide-header-0" role="tab" tabindex=“-1">Header One</h1>
<div aria-labelledby=“showhide-header-0">This is content…</div>
<h1 id="showhide-header-1" role="tab" tabindex="-1">Header Two</h1>
<div aria-labelledby="showhide-header-1">This is content…</div>
<h1 id="showhide-header-2" role="tab" tabindex="-1">Header Three</h1>
<div aria-labelledby="showhide-header-2">This is content…</div>
<h1 id="showhide-header-3" role="tab" tabindex="-1">Header Four</h1>
<div aria-labelledby="showhide-header-3">This is content…</div>
</div>

12. To be applied to the active/selected header element
aria-controls="header-id"
aria-selected="true"
To be applied to all unselected header elements
aria-selected="false"
Javascript
How to (start) fixing things

13. Beyond the script
Visual affordance Animation Consistent patterns
Well documented
Easy to implement
Macro/shortcode
[+] [-]

14. Fin