Apr 18, 2018
We have two core accessibility commitments:
- Inclusive design for our current and future users by taking an empathetic
approach to a user’s scenario.
- Complying with the Americans with Disabilities Act by meeting
We believe the Design system as of writing meets level WCAG2
Apr 18, 2018
Everyone has abilities, and limits to those abilities; we are all only temporarily not disabled.
Practice inclusive design with accessibility provisions for permanent,
temporary, and situational needs.
For example, take sight:
Jan 9, 2019
- A user could be blind (permanent);
- They could have forgotten their reading glasses (temporary); or
- They might be outside in the sun causing glare off the screen (situational).
General guidance & awareness of accessibility for inclusive design.
Please make use of the UK’s Government Digital Service (GDS) accessibility posters:
You can download all the posters in the one PDF.
There are other language versions available on the Dos and Don’ts posters GitHub page.
These posters are licensed under Creative Commons BY-NC-SA.
Maintain a meaningful reading order
Webpages have three logical orders that should be kept aligned and consistent:
- Source or markup order
- Visual display order (across all responsive breakpoints)
- Tab or keyboard focus order
To maintain a meaningful flow developers should:
- Use semantic markup and structure its source order with respect to the visual design’s logic
- Test that the tab order matches the source order as close as possible
- Avoid altering the tab order from the source order.
Source order can be determined by temporarily disabling CSS.
Color is not to be used as the only visual means of conveying information.
The WCAG 2.0 level
AA compliance level requires color luminescence contrast ratios of
3:1 for text with a size of 18 points (14 points if bolded) or larger
4.5:1 for text with a size less than 18 points.
Apr 18, 2018
- Line measures (the width of a line) should not extend more than 80 characters
- Line height (leading) within paragraphs should be at least 1.5 (times the font size)
- Paragraph spacing should be at least 1.5 times larger than the line height.
Test software with actual humans, and supplement with automated testing.
Our features are more accessible because the web development and accessibility
communities share information and best practices. If you do any testing please
share your results.
We use pa11y to help test
for accessibility within the build pipeline.
In a local development setup, you can also run this yourself:
Due to technical limitations
we have disabled WCAG2 color contrast ratio compliance testing
If you need to track color contrast compliance see the
The Design system’s color setup uses this function to ensure accessible
contrast ratios between fore- and background colors.