Navigation

Navigation is an important part of a website. By making sure that all visitors can navigate a website properly, they are given access to all available information.

A well built and consistent page structure and skip links help visitors to navigate the page without much effort.

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:

clearly describe the topic or purpose of the page.

change when a new page is loaded.

have the unique information in front.

are uniform with the other pages.

are concise.

are unique.

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:

In a CMS, the page title can often be set per page of the website.
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:

Read more. (unclear)

LinkedIn. (unclear)

But write:

Read more about digital accessibility.

Go to our LinkedIn page.

Tip: If you reference an e-mail address, use the full e-mail address as the link text.

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:

Note: Link texts that are expanded using CSS or the aria-label attribute are only visible to visitors using a screen reader.

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

Add skip links.

Group parts of the code.

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.

Use a heading element at the beginning of all blocks on a page.

Use ARIA landmark elements such as <header>, <main> and <footer>, but also, for example, the navigation and search function.

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

Note: This is an effective way to skip blocks of content for visitors using assistive technologies. Visitors navigating the page using only the keyboard cannot take advantage of this.

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

Print this page

E-mail this page

Back to Knowledge Base

Succescriteria

Principle 2. Operable
- Guideline 2.4 Navigable
  2.4.1 Bypass Blocks
  2.4.2 Page Titled
  2.4.4 Link Purpose (In Context)
  2.4.5 Multiple Ways
Principle 3. Understandable
- Guideline 3.2 Predictable
  3.2.3 Consistent Navigation