Designers
Design
-
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.
Forms
-
Provide labels for input fields
Labels are the most important element for an accessible form. Provide labels for all input fields or other form elements such as checkboxes, radio buttons, and comboboxes. A clear label describes exactly what needs to be entered in the field, is visible to all visitors and is located close to the input field.
The label must be linked in the code to the input field. This way you also make the input field accessible to visitors who use assistive technology. The label is the name of the input field. A label also expands the clickable area from which an input field can be selected. This is useful to visitors with a motor impairment.
Link labels in the code to an input field
Labels are placed with the
<label>
element. To link a<label>
element to a form element use afor
/id
link. To do so, give the<label>
element a for attribute and the corresponding form element an id attribute with the same value.It looks like this in the code:
There are also ways to visually hide the labels. In that case, ask yourself carefully why you would want to do that. This way the input field will lose the larger clickable area and it may become less obvious to visitors. However, if the label is visually hidden, make sure that a label is still available for assistive technology. To achieve this, use the
aria-label
,aria-labelledby
or atitle
attribute, which are not visible.It looks like this in the code:
Note: Placeholder text should not be used as the only way to add a label to an input field.
Group multiple sections of related input fields
If a form has multiple sections of related input fields, then a
<fieldset>
element is used to group them together. Give the<fieldset>
element a label by placing a<legend>
element inside the<fieldset>
element. Assistive technologies use the<legend>
element as if it were a part of the label of the elements in the<fieldset>
.The
<fieldset>
element is especially relevant for grouping checkboxes and comboboxes, but can also be used to group other input fields.It looks like this in the code:
Provide instructions for input fields
Instructions give an extra hint for the input field. The instructions in a form should indicate whether there are required fields and possibly whether there is a required input format.
Indicate that an input field is required
You can indicate a mandatory input field in text or, for example, with an asterisk (*). Make sure this tag is placed inside the
<label>
element.It looks like this in the code:
If the instructions are not clearly named for each input field, it should be indicated in text before the first input field how the mandatory fields are indicated.
It looks like this in the code:
Mark the required fields in the code as well. Preferably use the
aria-required
attribute.Indicate if there is a required input format
Also for required input formats, such as a postal code or an e-mail address, the instructions must describe what the requirements for the input are. This can be done directly in the
<label>
element.It looks like this in the code:
This can also be done with the
aria-describedby
attribute.It looks like this in the code:
Images
-
Do not use flashing content and do not allow for it to flash more than 3 times per second. Visitors with certain forms of epilepsy may experience a seizure when viewing flashing images or media.
Media
-
Do not use flashing content and do not allow for it to flash more than 3 times per second. Visitors with certain forms of epilepsy may experience a seizure when viewing flashing images or media.
Navigation
-
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.
Operation
-
Some functionality on a website can only be performed with a complex gesture. For example, gestures that require the visitor to use multiple fingers (multi-point gestures) or gestures that require the visitor to move a finger (or the pointer) in a particular path (path-based gestures). Visitors may sometimes, for various reasons, be unable to make difficult gestures with their fingers or with a pointer. For example, due to a motor disability.
Make sure that gesture-activated functionality can also be activated with a click, double-click, or click-and-hold of the mouse. This can be done by adding simplified controls.
Succescriteria
- Principle 1. Perceivable
- Guideline 1.3 Adaptable
- 1.3.1 Info and Relationships
- Guideline 1.4 Distinguishable
- 1.4.1 Use of Color
- 1.4.3 Contrast (minimum)
- 1.4.11 Non-text Contrast
- Guideline 1.3 Adaptable
- Principle 2. Operable
- Guideline 2.3 Seizures and Physical Reactions
- 2.3.1 Three Flashes or Below Threshold
- Guideline 2.4 Navigable
- 2.4.6 Headings and Labels
- 2.4.7 Focus Visible
- Guideline 2.5 Input Modalities
- 2.5.1 Pointer Gestures
- Guideline 2.3 Seizures and Physical Reactions
- Principle 3. Understandable
- Guideline 3.2 Predictable
- 3.2.3 Consistent Navigation
- 3.2.4 Consistent Identification
- Guideline 3.3 Input Assistance
- 3.3.2 Labels or Instructions
- Guideline 3.2 Predictable