Accordion
Example
Markup
<div class="c-accordion js-accordion">
<h2 class="c-accordion__button-title">
<a href="#accordionPanel_37750914" id="accordionButton_37750914" class="c-accordion__button c-accordion__button--toggle" role="button" aria-controls="accordionPanel_37750914" aria-expanded="false">
<span class="c-accordion__icon c-accordion__icon--closed icon icon-border-arrow_bottom">
<span class="path"></span>
</span>
<span class="c-accordion__icon c-accordion__icon--opened icon icon-border-arrow_top">
<span class="path"></span>
</span>
Accident investigation
</a>
</h2>
<div id="accordionPanel_37750914" class="c-accordion__container" role="region" aria-labelledby="accordionButton_37750914" style="display: none;">
<div class="c-accordion__content c-rich-text">
<p>Travelling by air is extremely safe. There is an average of one fatality for every 287 million passengers carried by UK airlines. This can be compared with a one in 19 million chance of being struck and killed by lightning in the UK or a one in 17,000 chance of being killed in a road accident.</p>
<p>But like all modes of transport very occasionally there may unfortunately be an accident or incident. In the UK these are investigated by the <a href="https://www.gov.uk/government/organisations/air-accidents-investigation-branch">Air Accidents Investigation Branch</a> which is an agency of the Department for Transport.</p>
<p>Their expert investigators will use data from the flight and air traffic control and interviews with those concerned to come to a conclusion on the cause. In complex cases this may take many months. Their reports are then made publicly available.</p>
<p>In some cases those reports may make recommendations to the CAA, aircraft manufacturers or other organisations to look into issues in more detail or make changes.</p>
</div>
<a class="c-accordion__button c-accordion__button--close" href="/" role="button" aria-controls="accordionPanel_37750914">
<span class="c-accordion__icon icon icon-cross"></span>
<span class="c-accordion__button-title">Close</span>
<span class="u-visuallyhidden"> Accident investigation</span>
</a>
</div>
</div>
Guidance
- The button toggle labels the panel that it opens via application of the aria-labelledby attribute on the panel element
- The aria-controls attribute on the button toggle defines the relationship between the button and the panel
- The aria-expanded attribute communicates the state of the accordion to screen reader users
Provide page feedback
Please enter your comments below, or use our usual service contacts if a specific matter requires an answer.
Fields marked with an asterisk (*) are required.