Designers

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:

These contrast requirements also apply to text on images.

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.

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:

By naming components in a consistent way, visitors who use screen readers can find their way faster and more efficiently.

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 a for/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 a title attribute, which are not visible.

It looks like this in the code:

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:

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.

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 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.

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.