Designing for Accessibility
From principles to practice, we are committed to creating inclusive digital services that work for everyone. This page explains how accessibility shapes our design decisions, how we build our components and where you can learn more.
Introduction
At the British Red Cross we help anyone, anywhere in the UK and around the world, get the support they need if crisis strikes. Accessibility is essential to this work. Our design system is built to ensure that our digital products can be used by as many people as possible, regardless of ability, device, or context.
Designing an accessible design system is an ongoing process, We regularly review and improve our components to increase accessibility, usability, and consistency across all our services.
How we design
The Design System aims to meet the Web Content Accessibility Guidelines (WCAG) 2.2 AA standard. These guidelines provide a shared framework for designing inclusive experiences and ensure our components meet the needs of a wide range of users, including people who rely on assistive technologies.
Best practice
While each component has its own accessibility guidance, the following best practice applies across all design work:
- All interactive elements must be useable with a keyboard alone.
- Text, icons, and interactive elements must meet required contrast ratios.
- Content should follow a logical reading and focus order.
- Users must be able to resize text up to 200% without loss of content or functionality.
- Images, icons, and multimedia must have text alternatives.
- Changes in content or component state must be announced to screen readers.
- Interactive targets should be large enough for touch, pointer, and mobile use.
- Components should reflow clearly on small screens without horizontal scrolling.
These principles should be applied early in design and maintained throughout development
Design principles
We draw on established best practice to support inclusive and accessible design.
Recommended resources
These principles help us design services that are clear, simple and accessible to everyone.