Design
The design of a webpage is essential for accessibility. A lot of information is conveyed with colour, shape and location, but not all visitors can properly perceive the design. So make sure there is enough contrast, but also that there are other ways available to convey the same information.
By paying attention to these important points, you make sure that the design of your website is accessible as well.
-
The text colour should have enough contrast with its background. This way, the text is easily readable for all visitors. Text must have a minimum contrast ratio of:
- 4.5:1 for the text smaller than 24px or 19px bold.
- 3:1 for the text larger than 24px or 19px bold.
These contrast requirements also apply to text on images.
Note: These contrast ratios should not be rounded up. The contrast ratio between the hexadecimal colour codes #777777 (gray) and #FFFFFF (white) is 4.47:1. So this is not enough.
A contrast checker can be used to calculate a contrast ratio. For example, the contrast checker on the website of WebAIM or the Colour Contrast Analyser (software) of The Paciello Group.
There are a few exceptions for text contrast such as logos, decorative text, and elements that are inactive.
-
The focus indicator must be clearly visible. The focus indicator shows which part has the keyboard focus. So this is important for everyone who navigates with the keyboard. It is often represented by a visible border around an element.
Each browser has a default focus indicator, but its style features can also be customized. If the style features are adjusted, make sure there is enough contrast between the colour of the focus indicator and the colour of the background. The focus indicator must have a contrast ratio of at least 3:1.
A contrast checker can be used to calculate a contrast ratio. For example, the contrast checker on the website of WebAIM or the Colour Contrast Analyser (software) of The Paciello Group.
-
Colour can be used to accentuate or distinguish between different parts of content. For example, it can be used for a warning message on a page, or to distinguish between several lines in a chart. Efficient as it may be, it should not be used as the sole means of conveying information, indicating an action, provoking a response or distinguishing a visual element. Information that is only conveyed with color cannot be perceived (or not properly) by visitors who are color blind or visually impaired.
Also provide other ways like: text, text styles, icons, or patterns. For example, don’t just use a green or red dot, but a green check mark and a red cross. Or use not only a different color per line in a graph, but also place an icon on the line and provide a legend.
-
Navigation menus and items that appear on multiple web pages must be placed in the same order on each page. Make sure that this order is also the same in the design and in the code.
A consistent navigation and page structure make it easier for everyone to navigate the website and to find information on a page. Visitors who use screen readers can also find their way faster and more efficiently.
-
Make sure that components that have the same functionality are named the same throughout the website. This makes it easier for visitors to find the repeating parts. This concerns, for example:
- texts on buttons;
- labels of the input field;
- link texts;
- alternative texts of icons that have the same functionality.
By naming components in a consistent way, visitors who use screen readers can find their way faster and more efficiently.
Example:
The text on the button next to a search field is ‘search’ on all pages, and not ‘find’ on some pages.
Succescriteria
- Principle 1. Perceivable
- Guideline 1.4 Distinguishable
- 1.4.1 Use of Color
- 1.4.3 Contrast (minimum)
- 1.4.11 Non-text Contrast
- Guideline 1.4 Distinguishable
- Principle 2. Operable
- Guideline 2.4 Navigable
- 2.4.7 Focus Visible
- Guideline 2.4 Navigable
- Principle 3. Understandable
- Guideline 3.2 Predictable
- 3.2.3 Consistent Navigation
- 3.2.4 Consistent Identification
- Guideline 3.2 Predictable