Alpha

This is an alpha release of our documentation site. View the roadmap.

Accessibility

Accessibility and Design System

A core value of Citizens Advice is to serve people whoever they are, regardless of their accessibility needs. An accessible design system is the first step towards creating inclusive customer experiences for all users. For that reason we embarked on a journey to improve our accessibility record across our services and products.

The first step on this journey was to create a design system that will help us offer a consistent and accessible experience to all, including clients, advisers, volunteers and all staff members.

What standards do we target?

The Citizens Advice Design System has been designed, built and tested to meet the WCAG 2.1 AA standards.

Where is the design system used?

We have decided to introduce the design system to the Citizens Advice public website and AdviserNet gradually, making sure there are no disruptions to our services. So far, some sections of our public advice and internal AdviserNet tool use the design system. It is also used by our Intranet, smart meter checking tool, and referrals products.

This gradual release approach helped us test all the elements and components in actual pages and in relation to each other. This is an important step as combining accessible pieces of code doesn’t always guarantee an accessible outcome, pages still need to be tested again to make sure the components used work in an accessible way.

What do I need to be aware of when using the design system in my product?

If you are an internal Citizens Advice team using the design system you need to make sure that you are testing your product against WCAG 2.1 AA standards.

Whilst the design system components are designed to provide a solid foundation for building accessible services, how the components are used in context has a major impact on how accessible a given service is. You need to make sure that you run your own automated accessibility checks and external audits.

How is the design system tested?

Design system components are tested in three main ways:

  • Automated testing run against every design system component as part of our regular development processes
  • External audits for products using the design system
  • Usability testing for products using the design system

Recent accessibility audits

Design system components have been tested as part of the following external accessibility audits:

  • Immigration and Family sections were tested on 19 April 2021
  • The Referrals product was tested on 15th March 2022
  • The Online Scams Tool was tested on 30th June 2022

All tests were carried out by Digital Accessibility Centre (DAC). Tests were carried out in the following conditions:

  • Screen sizes: Desktop, Tablet and Mobile
  • Operating systems: Windows, Android and iOS.
  • Browsers: IE11, Firefox, Chrome, Safari, Android browser,
  • Assistive technologies:
    • JAWS 18 and 2019
    • NVDA
    • Dragon Voice Activation v15
    • Keyboard
    • Screen Magnification
    • Reflow,
    • Text Spacing,
    • System inverted colours
    • VoiceOver
    • TalkBack/Voice Assistant
    • Magnification

Contact us

If you want to get in touch about the design system or accessibility, please send us an email. We would love to hear from you! Email: designsystem@citizensadvice.org.uk