Accessibility
Readability of navigation items
The white text on a black background in this component means that some people, especially those with astigmatism, will experience a “halation” effect where letter shapes have fuzzy edges or appear to “glow”. This effect is more pronounced with bold text, so navigation items in the “Header with navigation” version of the component use normal weight text rather than bold.
When colours are inverted
However, some users who prefer to invert their display's colours – so that this component has black text on a white background – report that navigation items are then too faint or too small to read easily.
We think changing to bold text to address this would be a mistake, as it would make existing halation effects worse for users viewing the component with standard colours. Instead we are looking at ways to follow user accessibility settings in the browser or operating system, presenting the component in the best way for each user.
JavaScript use on smaller viewports
At smaller viewport sizes the menu is hidden and revealed using a JavaScript button. This method is used in the GOV.UK Design System Service Navigation component.
When a link item is selected aria-current is set to true: this tells a screen reader which item is selected.
WCAG success criteria
When testing, pay particular attention to the following WCAG success criteria:
For more about building accessible services see the DWP Accessibility Manual.
Get support
Need help implementing this in a prototype or production build? Get support from the Design System team.
Give feedback
We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.
Could we improve this page?
Send questions, comments or suggestions to the DWP Design System team.
Last updated: