Design system considerations
When using the GOV.UK Design System, consider the following to ensure you are designing products and websites in an accessible and inclusive way.
Forms
Things you should consider.
Labelling
Ensure all form fields have clear, descriptive labels associated with their corresponding input elements. Use the <label> element and the for attribute to explicitly link labels with form fields.
Error messages
Provide clear, concise, and specific error messages that appear both in an error summary and directly before the form input causing the error.
Fieldsets and legends
Group related fields using <fieldset> and <legend> elements to improve structure and provide context for users with screen readers.
Buttons
Things you should consider.
Size
Ensure buttons are large enough to be easily clicked or tapped.
Contrast
Ensure there is sufficient contrast between button text and background, meeting the minimum contrast ratio of 4.5:1. This ensures the button text is readable for users with visual disabilities.
State indication
Clearly indicate different button states (default, hover, active, disabled) using both visual (colour, borders) and non-visual (ARIA attributes) indicators.
Navigation
Things you should consider.
Consistency
Use consistent navigation patterns across the site to help users predict where to find information and how to navigate. This will ensure you meet WCAG 2.2 3.2.3 Consistent Navigation (Level AA).
Descriptive links
Use clear, descriptive link text that explains what the link does or where it goes, avoiding vague terms such as 'click here' or 'read more'. However, in some interfaces single words like 'view' may be appropriate. In this case, use visually hidden text to provide extra information to screen reader users.
Keyboard accessibility
Ensure all navigation elements are accessible via keyboard. Provide a visible focus indicator to help users navigate through links and buttons. You can test this by tabbing through a page and ensuring all navigation elements are accessed.
Colour contrast
Ensure that text and background combinations meet the required contrast ratios for accessibility. Use the WebAIM Colour Contrast Checker to validate compliance with standards and adjust colours as needed.
Things you should consider.
Text and background
Ensure text and background colour combinations meet the minimum contrast ratio of 4.5:1.
Non-text elements
Apply sufficient contrast to non-text elements like icons, borders, and charts to ensure they are distinguishable for users with visual disabilities.
Information about this page
- Created
- 25 November 2024
- Last reviewed
- 25 November 2024
- Last updated
- 25 November 2024
- Reason this page exists
- To help people understand what to consider to design in an inclusive way when using the GOV.UK Design System.
- Suggest a change or comment
- Issue 45