Accordions create extra work
Design
Accordions can either hide information that needs to be split over pages for easier reading, or unncessarily hide key information that can be written concisely.
Typical example that causes barriers
This example can happen when showing information about a user that they need to check.
Contents
<span class="govuk-caption-xl">
Original version
</span>
<span class="govuk-heading-l">
Examples of complex information
</span>
<form class="form" action="/content/original-explanation" method="post">
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-1">
Writing well for the web
</span>
</h2>
</div>
<div id="accordion-default-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Writing well for the web.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-2">
Writing well for specialists
</span>
</h2>
</div>
<div id="accordion-default-content-2" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Writing well for specialists.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-3">
Know your audience
</span>
</h2>
</div>
<div id="accordion-default-content-3" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Know your audience.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-4">
How people read
</span>
</h2>
</div>
<div id="accordion-default-content-4" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for How people read.</p>
</div>
</div>
</div>
</form>
<span class="govuk-caption-xl">
Original version
</span>
<span class="govuk-heading-l">
Examples of complex information
</span>
<form class="form" action="/content/original-explanation" method="post">
{{ govukAccordion({
id: "accordion-default",
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: '<p class="govuk-body">This is the content for Writing well for the web.</p>'
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: '<p class="govuk-body">This is the content for Writing well for specialists.</p>'
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: '<p class="govuk-body">This is the content for Know your audience.</p>'
}
},
{
heading: {
text: "How people read"
},
content: {
html: '<p class="govuk-body">This is the content for How people read.</p>'
}
}
]
}) }}
</form>
Accordions hide key information that may be necessary for everyone. While there may be uses for accordions in some scenarios like caseworking systems, generally it is better to start by either no content and adding when there is a need, or all content and using headers, links and occasional details text.
Improved version
Contents
<span class="govuk-caption-xl">
Improved version
</span>
</span>
<form class="form" action="/content/accessible-explanation" method="post">
<h1 class="govuk-heading-l">Examples of complex information</h1>
<p class="govuk-body">This information is here.</p>
<h2 class="govuk-heading-m">Writing well for the web</h2>
<p class="govuk-body">This is the content for Writing well for the web.</p>
<h2 class="govuk-heading-m">Writing well for specialists</h2>
<p class="govuk-body">This is the content for Writing well for specialists.</p>
<h2 class="govuk-heading-m">Know your audience</h2>
<p class="govuk-body">This is the content for Know your audience.</p>
<h2 class="govuk-heading-m">How people read</h2>
<p class="govuk-body">This is the content for How people read.</p>
</form>
<span class="govuk-caption-xl">
Improved version
</span>
</span>
<form class="form" action="/content/accessible-explanation" method="post">
<h1 class="govuk-heading-l">Examples of complex information</h1>
<p class="govuk-body">This information is here.</p>
<h2 class="govuk-heading-m">Writing well for the web</h2>
<p class="govuk-body">This is the content for Writing well for the web.</p>
<h2 class="govuk-heading-m">Writing well for specialists</h2>
<p class="govuk-body">This is the content for Writing well for specialists.</p>
<h2 class="govuk-heading-m">Know your audience</h2>
<p class="govuk-body">This is the content for Know your audience.</p>
<h2 class="govuk-heading-m">How people read</h2>
<p class="govuk-body">This is the content for How people read.</p>
</form>
Showing information as a start helps everyone get the information - if there is too much information then the page needs to be redesigned.