show & tell - a more accessible accordion

A more accessible

ACC ORD I O N

The anatomy of an accordion

Header

Content panel

Closed Open

Two different UI patterns

Accordion Collapsible section (Show/hide)

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

What do we currently have?

Bespoke accordion scripts

4Bespoke hide/show

script

1&

* that I have found so far

What do we want?

accessible, flexible, robust script

to rule them all

1

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

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*

Why change the scripts?

We have a commitment to support *all* our users

This means working to meet WCAG2 standards (Web Content Accessibility Guidelines)

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

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>

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

Beyond the script

Visual affordance Animation Consistent patterns

Well documented

Easy to implement

Macro/shortcode

[+] [-]

Fin