Accessible collapsibles

Intro

Collapsibles, or accordions, are regions of a page that can be expanded and collapsed on interaction. They are commonly used for FAQs. It is important that they are created with accessibility in mind. This means that they

  • are structured using semantic markup
  • appear in the focus order
  • expose their current state (collapsed or expanded) to users

    Example

These collapsibles are built progressively. Each collapsible is contained within a section element. A heading then describes the following content. JavaScript is then used to apply the additional HTML elements and ARIA attributes to make these collapsibles interactive. Users without JavaScript will receive the plain content. users with JavaScript available will access the enhanced content.

The aria-expanded attribute is applied, and toggled appropriately, to expose the current state of the container – collapsed or expanded – for assistive technology users.

The markup for a collapsible element, pre-JavaScript, can be seen below.

HTML before JavaScript


<section class="collapsible">
    <h3>Heading text</h3>
    <div>
        <p>Contents</p>
    </div>
</section>
            

Once the page has loaded, JavaScript is run which enhances this HTML.

Enhanced HTML


<section class="collapsible">
<button aria-expanded="false" class="collapsible">Heading text</button>
<div style="display: none;">
<p>Content.</p>
</div>
</section>

The JavaScript

The underlying JavaScript consists of two functions.

Example collapsibles

What if my robot breaks down?

Our robots are all supplied with a lifetime warranty (excludes accidental, and non-accidental) for your peace of mind.

Can I upgrade my robot?

You can simply pay the difference between your current model to upgrade to a newed model.

Am I insured if my robot goes on a rampage?

No, the terms and conditions you accepted when you purchased your robot mean that you are fully responsible for all activities of your robot.