Programmers

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.

Forms should have an error check built in. The error check automatically analyses whether a required field has been left empty or whether an input field has been filled in incorrectly. If an error is found, the error message should be displayed in text. This text can be supplemented with other visual clues, such as a different colour or an icon.

In the text of the error message, state the name of the field that was entered incorrectly and state exactly what the error is. Do not write:

But instead write:

It can also be indicated in the code which field has been filled in incorrectly. To do this, use the aria-invalid attribute. In addition, the error message in the code should be linked to the corresponding input field. This prevents confusion for visitors using assistive technologies. An error message can be linked in a number of ways such as with an aria-describedby attribute.

It looks like this in the code:

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:

Changes to the content of a page are indicated by a status message. A status message adds new information to the page. For example, it provides the visitor with information about the results of an action, about the progress of a loading time or a warning about possible errors in a form. This information is important for everyone. It must therefore also be made available to a visitor who uses assistive technology.

Assistive technology continuously synchronizes with the DOM and therefore notices the change, but the visitor who uses it is not informed about it. The aria-live attribute makes a live region out of a block. This information should be formatted in the code so that it gets the attention of the assistive technology in a way that does not unnecessarily interrupt the visitor.

By default, the assistive technology will only read the changed text. If it is needed that the whole block is read, add aria-atomic="true".

If by submitting a form an irreversible action that can have major consequences is taken, it should be possible to cancel, review or confirm the submission of the form.

Visitors with a functional impairment often run a higher risk of making mistakes. People with dyslexia can flip letters and numbers around and people with motor disabilities can accidentally hit keys. In fact, all visitors benefit from the possibility of avoiding serious mistakes.

For a form that involves a legal or financial transaction, you can use one of the following techniques:

With a form that allows the visitor to change or delete data, such as profile data on a website, you can use one of the following techniques:

With a form that allows the visitor to answer questions from a test or an exam, you can use one of the following techniques:

Do not allow a major event to occur when a visitor fills in an input field, clicks a check box or radio button, or chooses a value from a drop-down list, unless the visitor has been informed beforehand. For many visitors, an unexpected event can be confusing. Visually impaired visitors may not be able to see the change. As a result, visitors who only navigate with the keyboard may have difficulty operating the website. Therefore, let the visitor click on a button to trigger the event.

Major events are called context changes. The context changes are for example:

There should also be no change of context by changing the focus.

Sometimes forms have to be completed within a certain time or a login session expires after a certain period of time. Such a time limit is not useful to visitors who need more time. For example, because they use the assistive technology or because they need more time to read the text due to a cognitive disability. Therefore, make sure that no time limit is used. If there really is no other way, give visitors the option to adjust the time limit. This can be done in one of the following ways:

Not all time limits require that they can be turned off, adjusted or extended. There are a few exceptions:

Forms often require information that is also requested in many other forms. This applies to frequently requested data such as name, e-mail address and telephone number.

The purpose of an input field can be defined in the code. This allows browsers to understand what data is being requested. A browser can then already (partly) automatically fill in the form itself. This is useful for all visitors, but it is even more important for visitors with a motor disability. Filling out a form can take them a lot of time.

To do this, use the autocomplete attribute in the code, adding the input field’s purpose to the <​input> element.

It looks like this in the code:

Images that convey information are necessary for the understanding of the text. These images add extra information to the page. They must have a text alternative that accurately describes what is shown in the image. The content of the text alternative depends on the context and may differ per situation for the same image.

In a CMS, a text alternative can usually be added in the media library.

It looks like this in the code:

The text alternative must be a good substitute for an image. When writing the text alternative, always think about the purpose of the image. Keep a text alternative useful and concise.

Sometimes it is not possible to fully describe an image in a short text alternative. For example, when it comes to an extensive infographic or a graph. These types of complex images should also be fully described in a text alternative. In that case, in addition to a concise description in the alt attribute, also provide a longer description in the surrounding text.

A longer description may also be placed on a separate page. In that case, place a link with the reference to that other page immediately before or after the image.

The surrounding text should also be linked to the image. This is not mandatory, but very useful. It can be done with the aria-describedby attribute. Use the ID of the element where the complex image is described. This information should also be visible to the visitors who are able see.

There are cases when instead of text only an image is used as a link. These images are called functional images. These can be images that refer to another page or website, but also images that perform an action on the page.

These images must have a text alternative that describes the purpose of the link, or describes what happens when the image is clicked. Reading software uses the text alternative as link text. That is why it is more important to describe the purpose of the link, rather than what is in the image.

If there is also text on a functional image, then both the text on the image and the purpose of the link must be included in the text alternative. As a result, visitors who work with speech recognition can also easily reach the link.

Images placed on the page for purely decorative purposes should not have a text alternative. For example, these are images that do not convey information and are not necessary for the understanding of the text. These images should be ignored by assistive technologies. Decorative graphics are best placed using CSS.

If it is not possible to place a decorative image with CSS, then the alt attribute in the <​img> element should be left empty. The alt attribute must be present, but without any text.

Do not use images of text to convey information. Images of text are not suitable for all the visitors. Often the font size in an image does not scale well. The visitors cannot also adjust the embedded text to their own style preferences.

Use ‘real’ text. Text that actually appears as text on the page can be styled with CSS. For example, this can be used to adjust the colour, font, font size, line height and letter spacing. It is also possible to place text on an image with CSS.

Make sure that any moving, scrolling, or flashing content that starts automatically and lasts longer than 5 seconds can be paused, stopped, or turned off. This includes carousels, on-page animations, moving ads, etc. It may distract visitors with cognitive impairments. This can also be distracting for visitors who use a screen reader.

These rules also apply to all auto-refreshing content, where it is also crucial that the frequency of the updates can be adjusted.

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.

All images must have a text alternative. A text alternative can be added in a number of ways:

Text alternative for an <img> element

A text alternative is given to an <​img> element using the alt attribute.

It looks like this in the code:

Text alternative for an <svg> element

A text alternative for an <​svg> element is provided using the title element in the <​svg>. Also add an aria attribute role=“image” to ensure that as many of the assistive technologies as possible can recognize the <​svg> element as an image.

It looks like this in the code:

Text alternative for images placed with CSS

An image placed with CSS can be given a text alternative with an aria-label.

It looks like this in the code:

Filling in the Text Alternative

The content of a text alternative is determined by the function of an image. An image often conveys information. In that case, describe in the text alternative what can be seen in the image. If an image is also a link, describe the purpose of the link in the text alternative. If an image doesn’t add any information to the page, it’s better not to give it a text alternative at all, so it can be ignored by the assistive technology.

Make sure that any moving, scrolling, or flashing content that starts automatically and lasts longer than 5 seconds can be paused, stopped, or turned off. This includes carousels, on-page animations, moving ads, etc. It may distract visitors with cognitive impairments. This can also be distracting for visitors who use a screen reader.

These rules also apply to all auto-refreshing content, where it is also crucial that the frequency of the updates can be adjusted.

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 allow the sound to play automatically after a page loads, or at least make sure that the sound does not last for more than 3 seconds. It can be distracting for the visitors using reading software if the sound starts playing automatically. Then they can no longer properly hear the voice of the reading software. It can also distract visitors who have trouble concentrating.

The sound that starts playing automatically should be easy to pause, stop, or be turned down. Make sure there is a pause or stop button and a volume control for the sound. A skip link can also be provided to make these controls easier to reach.

Many websites contain blocks of content that are repeated on each page. For example, the logo, the navigation menu, the search field, etc. Visitors who use a screen reader, such as reading software or a braille display, and visitors who navigate with the keyboard, start at the top every time they come to a page. These components are always read in full before they can reach the content of the page. Navigating this way takes a long time.

Therefore, make sure that visitors can skip repetitive blocks. This can be achieved in 2 ways:

Adding skip links

A skip link is an anchor link that points to a section situated lower on the page. It gives visitors the opportunity to get faster to a part of the page. Skip links are usually not immediately visible. They only become visible once you navigate with the keyboard over the page.

It looks like this in the code:

Skip links should be the first element on a page. Put them on the top of the code and use them on every page that contains repeating blocks.

Grouping parts of the code

You can also skip repeating blocks by grouping them in the code. There are several techniques available. Grouping these components makes it easier for visitors using assistive technology to navigate the page. For example, these visitors can use a list of all headings or navigate directly to a landmark.

This must be applied in the same way on every page.

Also make sure all <​iframe> elements are named so they can be easily skipped. Use the title attribute for this. Make sure that this accessible name describes the subject or purpose of the video.

It looks like this in the code:

It must be possible to find web pages in more than one way. Some visitors may have difficulty understanding the navigation of a website, or may find a particular navigation method easier or faster.

Therefore, provide more than one way to find a page on a website. For example, offer a search function in addition to navigation, or publish a page with a sitemap.

Give links on a web page a link text from which the purpose of the link can be easily understood. A descriptive link text is clear to everyone. Make sure that the link text is formulated in such a way that the visitors immediately know what the link refers to.

Do not write:

But write:

Visitors using a screen reader can use a list of all links to navigate the page.

If there really is no other option, then the context of the link may also be used to describe the purpose of the link. For example, the same sentence, paragraph, or in the same table cell. The link text can also be extended in the code with the aria- label attribute or with the title attribute.

It looks like this in the code:

Wat ook kan is het verbergen van een deel van de linktekst met CSS:

A link text should never be left empty. Without a link text it is impossible to determine where the link refers to. An empty link may not be visible on the page, but these links will appear in the focus order. Screen readers will notice these links as well.

In cases where not only text but also an image is used as a link, we speak of functional images. Give images that are also a link a text alternative that describes what the link points to. If an image and a text are used with both the same link purpose, it is better to combine them into one link. For visitors who use assistive technologies, it can be distracting if the same link is read twice in a row.

The page title should describe the topic or purpose of the page. A descriptive page title makes it easier for everyone to navigate the website. Page titles are displayed in the browser window or in a tab. A good page title helps visitors to easily find the page when, for example, several tabs are open in the browser.

Good page titles:

Page titles are used by the assistive technology to identify the web page. This is the first information that is presented when a page is opened.

Use the title element in the <​head> element in the page’s code. In this element, describe the topic or purpose of the page.

It looks like this in the code:

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.

Actions triggered by tilting or shaking a device are not easily accessible to some visitors. For example, visitors with a motor impairment can perform these actions unintentionally. There are also visitors who cannot operate it, or cannot operate it properly, because the device is attached to a wheelchair in a fixed position. Gestures to a camera that can interpret the movements also fall under motion activation.

For this reason, let the visitors disable the motion activation, or ensure that actions that can be activated with motion activation can also be activated with an alternative control.

All functions on a website must be accessible and usable with only the keyboard. Some visitors cannot use a mouse, for example due to a visual or motor impairment. If all functionality can be operated with the keyboard, then it also works with a large number of assistive technologies. Therefore, make sure that components such as links, buttons, navigation, input fields, check boxes, radio buttons, list boxes, and all other interactive features can receive keyboard focus and be used.

Standard HTML elements for links, buttons and form elements on the website are easily accessible with the keyboard.

The default keyboard navigation is as follows:

Visitors using the keyboard use the TAB key to navigate through a website. The TAB key moves the keyboard focus to the next focusable item.

If visitors can navigate to an item on the page with their keyboard, but cannot navigate away from it, it is called a keyboard trap. To get out of a keyboard trap, it is often needed to use the mouse (or other pointing device) or to completely reload the page. This is not an option for visitors who cannot use the mouse. A keyboard trap can be caused by plugins.

Make sure it is possible to use the keyboard to navigate all around the page.

Some websites allow visitors to use keyboard shortcuts. Keyboard shortcuts make it easier for visitors to perform functions or navigate to a page. This works well for many visitors who use the keyboard but may conflict with some assistive technologies. This can cause shortcuts to be activated unintentionally. This applies, for example, to visitors who use speech recognition software.

Therefore, make sure that single-character keyboard shortcuts can be customized, disabled, or enabled only when the item has keyboard focus.

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.

Give links on a web page a link text from which the purpose of the link can be easily understood. A descriptive link text is clear to everyone. Make sure that the link text is formulated in such a way that the visitors immediately know what the link refers to.

Do not write:

But write:

Visitors using a screen reader can use a list of all links to navigate the page.

If there really is no other option, then the context of the link may also be used to describe the purpose of the link. For example, the same sentence, paragraph, or in the same table cell. The link text can also be extended in the code with the aria- label attribute or with the title attribute.

It looks like this in the code:

Wat ook kan is het verbergen van een deel van de linktekst met CSS:

A link text should never be left empty. Without a link text it is impossible to determine where the link refers to. An empty link may not be visible on the page, but these links will appear in the focus order. Screen readers will notice these links as well.

In cases where not only text but also an image is used as a link, we speak of functional images. Give images that are also a link a text alternative that describes what the link points to. If an image and a text are used with both the same link purpose, it is better to combine them into one link. For visitors who use assistive technologies, it can be distracting if the same link is read twice in a row.

The page title should describe the topic or purpose of the page. A descriptive page title makes it easier for everyone to navigate the website. Page titles are displayed in the browser window or in a tab. A good page title helps visitors to easily find the page when, for example, several tabs are open in the browser.

Good page titles:

Page titles are used by the assistive technology to identify the web page. This is the first information that is presented when a page is opened.

Use the title element in the <​head> element in the page’s code. In this element, describe the topic or purpose of the page.

It looks like this in the code:

Specify the default language of a web page in the code. For example, software can determine the language of the web page. If there are several languages on a page, use the language that is most common.

Reading software reads a web page. The pronunciation of the words depends on the language of the page. If no language or a wrong one is specified in the code, reading software may read the content incorrectly or unclearly. The default language of the browser is then used and it does not always match the language of the content.

Add the lang attribute to the html element to set the language of a web page. Use the correct language code in this attribute. A language code consists of a two letters.

It looks like this in the code:

Each language has its own designation. For Dutch it is ‘nl’ (lang=”nl”), for English it is ‘en’ (lang=”en”), for German it is ‘de’ (lang=”de”). View all language codes on IANA Language Subtag Registry.

If a sentence or paragraph in the content is written in a language other than the default language, this must be indicated in the code. This way software can determine the language of the web page. This obligation only applies to sentences and paragraphs, not to individual words.

Reading software reads a web page. The pronunciation of the words depends on the language of the page. If no language or a wrong one is specified in the code, reading software may read the content incorrectly or unclearly. The default language of the browser is then used and it does not always match the language of the content.

Add the lang attribute to the elements with a different language. Give this attribute a value that consists of a two-letter code that represents a language. The lang attribute can be used at the block level (<​div>, <​p>, <​table>, etc.) but also on inline elements (<​span>, <​a>, <​strong>, etc.).

It looks like this in the code:

There are exceptions for proper nouns, technical terms, words of an indefinite language, and words or phrases that have become part of the vernacular of the surrounding text.

View all language codes on IANA Language Subtag Registry.