Inclusive Patterns

Accordion

This accordion is designed to work for both sighted and non-sighted users. Non-visual feedback is given to the user by use of aria attributes, declaring when each accordion is in an open or closed state. The accordion is also operable via the keyboard by using the tab key, return and space keys.

Focus states use bright inverted colours as well as an outline so are visually obvious. Hover states have been indicated by a change of colour as well as a text underline.

It has been designed with progressive enhancement in mind, so if javascript is turned off or doesn’t load for whatever reason, the accordions appear as expanded content with headings and paragraphs.

Accordion heading 1

Accordion content to be expanded

Accordion heading 2

Accordion content to be expanded

HTML

<div class="accordion">

  <div class="accordion-section">
    <div class="accordion-section-header">
      <h3 class="accordion-heading heading-3">Accordion title 1</h3>
    </div>
    <div class="accordion-section-body">
      <p>Accordion content to be expanded</p>
    </div>
  </div>

  <div class="accordion-section">
    <div class="accordion-section-header">
      <h3 class="accordion-heading heading-3">Accordion title 2</h3>
    </div>
    <div class="accordion-section-body">
      <p>Accordion content to be expanded</p>
    </div>
  </div>

</div>

Cards

This component has been designed as a flexible way of presenting content and works to chuck content, or provide an overview of hyperlinked content.

A hyperlink can be added to the card heading, which makes the entire card clickable through use of javascript, rather than the whole card being wrapped with anchor tags, which prevents text from being highlighted or copied by the user. The card accepts a flexible heading (h2 - h6), body text, as well as an optional image, date, and hyperlink.

If javascript is turned off or doesn’t load for whatever reason, the header is still clickable and operable using the tab key, although the rest of the card is no longer clickable.

  • Cards heading 1

    Cards content to be expanded

  • Cards heading 2

    Cards content to be expanded

HTML

<ul class="cards cards-2">

  <li class="card">
    <div class="text-box padding-double">
      <time class="coral-text">27 September 2021</time>
      <h3 class="heading-3 margin-top-0">Card 1 title</h3>
      <p class="margin-bottom-0">Card 1 paragraph text goes here.</p>
    </div>
  </li>

  <li class="card">
    <div class="text-box padding-double">
      <time class="coral-text">27 September 2021</time>
      <h3 class="heading-3 margin-top-0">Card 2 title</h3>
      <p class="margin-bottom-0">Card 2 paragraph text goes here.</p>
    </div>
  </li>

</ul>

Error summary

Error: There was a problem!

HTML

<div class="padding padding-top-0 padding-bottom-0">
  <span class="notification error">

    <h3 class="margin-bottom-2"><span class="visually-hidden">Error:</span> There was a problem!</h3>

    <ul class="list-type-none">
      <li class="menu-item">
        <a class="underline" href="">Name is required</a>
      </li>
      <li class="menu-item">
        <a class="underline" href="">Email is required</a>
      </li>
    </ul>

  </span>
</div>

Summary list

Name
John Doe
Date of birth
1 January 0001
HTML

<dl class="summary-list radius shadow"> 

  <div class="summary-list__row"> 
    <dt class="summary-list__key">Name</dt> 
    <dd class="summary-list__value">John Doe</dd> 
  </div>

  <div class="summary-list__row"> 
    <dt class="summary-list__key">Date of birth</dt> 
    <dd class="summary-list__value">1 January 0001</dd> 
  </div> 

</dl>

Table

Caption
Column 1 Column 2 Column 3
Row 1 Cell Cell
Row 2 Cell Cell
Row 3 Cell Cell
HTML

<table class="styled-table"> 

  <caption class="heading-3">Caption</caption> 
  
  <thead class="styled-table__head"> 
    <tr class="styled-table__row"> 
      <th scope="col" class="styled-table__header">Column 1</th> 
      <th scope="col" class="styled-table__header">Column 2</th> 
      <th scope="col" class="styled-table__header">Column 3</th> 
    </tr> 
  </thead> 

  <tbody class="styled-table__body">

    <tr class="styled-table__row"> 
      <th scope="row" class="styled-table__header">Row 1</th> 
      <td class="styled-table__cell">Cell</td> 
      <td class="styled-table__cell">Cell</td> 
    </tr> 
    <tr class="styled-table__row"> 
      <th scope="row" class="styled-table__header">Row 2</th> 
      <td class="styled-table__cell">Cell</td> 
      <td class="styled-table__cell">Cell</td> 
    </tr> 
    <tr class="styled-table__row"> 
      <th scope="row" class="styled-table__header">Row 3</th> 
      <td class="styled-table__cell">Cell</td> 
      <td class="styled-table__cell">Cell</td> 
    </tr>

  </tbody> 
</table>