Accessible Navigation – How to Design Your Website to Be Inclusive
What is for some users just navigation in the header menu of a website can be an obstacle course for others. Accessible navigation or an accessible website is an important part of the digital infrastructure – and essential for many users. If you reach everyone over digital channels, you communicate in an inclusive, accessible and sustainable way.
A logical structure of the menu and visual delimiters should be a given in a navigation solution. But have you ever heard about keyboard navigation, screen reader compatibility or ARIA attributes? These types of “digital wheelchair ramps” are crucial for website users with disabilities or temporary bodily impairments.
According to the Federal Statistical Office, a total of 7.9 million people in Germany are living with a major disability. This figure includes, for instance, approximately 300,000 people with a visual impairment. Accessible navigation is therefore not just a “nice to have” on a website, but actually represents an important step in the direction of digital inclusion. That will become all the more apparent when the BFSG comes into effect in June 2025.
Table of contents
- Basic elements of website navigation
- Requirements and legal framework
- Accessible navigation starts with the structure of your website
- This is how accessible navigation looks like – an overview
- Conclusion – Accessible navigation is not only inclusive, but also the smart way to go!
Basic elements of website navigation
Before addressing accessible navigation, we should first look at what the basic elements of website navigation actually are – in other words, those elements that help users to find their way around the website.
- Main navigation: The main menu, usually in the header, with links to the most important subpages.
- Secondary navigation: Additional menus, for instance submenus in the header that provide access to additional content.
- Breadcrumbs: They indicate the current page hierarchy and make it easier to get back to previous levels.
- Page search: A search field that allows users to find specific content – especially helpful for sites with many subpages.
- Internal links: Links inside blocks of texts or modules that lead to additional content.
- Buttons and call-to-actions: Allow users to navigate to specific actions or desired destinations (e.g., contact, product page, newsletter).
- Table of contents: A structured overview of the website – often found at the top of the page or at the start of a sub-topic.
Other navigational elements include:
- Pagination/page navigation functions: They allow users to navigate through several pages of an article or product presentation.
- Filtering and sorting functions: Above all in stores or catalogs –used to structure content and help with targeted selection.
- Mobile navigation (e.g., hamburger menus): Navigational elements optimized for mobile devices – usually minimalist and compact.
Requirements and legal framework in Germany – According to the WCAG 2.1, the BITV 2.0 and the BFSG
Let’s start with the crucial question: Who is actually required to implement accessible navigation? Accessible navigation is part of an accessible website:
According to BITV 2.0, public authorities have been required to maintain an accessible website ever since May 2019.
According to the BFSG, certain private companies will also be required to do it starting in June 2025. At this point it is worth mentioning that not all private companies are subject to this obligation.
However, if they fall under this legal obligation, the same standards – as per WCAG 2.1 – apply to website navigation in both cases. Some of the criteria are listed under “Navigable” for conformance levels A and AA.
The WCAG 2.1 success criteria for accessible navigation
2.4.1 “Bypass Blocks” (Level A): The intention is to allow users to easily skip areas that are repeated on all pages, such as menus or footers.
2.4.2 “Page Titled” (Level A): Subpages need to have an appropriate title that reflects their content.
2.4.3 “Focus Order” (Level A): If you navigate sequentially through a website using the keyboard, the components that can be focused on should be selectable in a logical order that preserves their meaning and usability.
2.4.4 “Link Purpose” (Level A): The target of a link should be clear from the link text and in the right context.
2.4.5 “Multiple Ways” (Level AA): A specific subpage should be accessible in several different ways.
2.4.6 “Headings and Labels” (Level AA): Headings and labels should always describe the topic or the purpose of a function/application.
2.4.7 “Focus Visible” (Level AA): All user interfaces that can be operated using the keyboard should provide visual feedback when selected/focused using the keyboard.
WCAG 2.1 contains additional guidelines relating to accessible navigation, either directly or indirectly. Listing them all, however, would go beyond the scope of this blog post. You can find a list of all the WCAG 2.1 criteria on its official website.
Accessible navigation starts with the structure of your website
How easy it is for someone to navigate through a page depends to a large extent on how it is structured. As a rule, the first elements to appear on a website are the logo, the navigation menu in the header, and different call-to-actions or banner sliders.
It’s easy if you use a mouse and have good eyesight: A quick glance is enough to find the content you’re looking for. Those who use a keyboard or screen reader, on the other hand, don’t have this advantage. They have to work their way through every single element before they get to the main content.
A website generally has some 30 to 40 subpages. Now imagine that most of these subpages are itemized in the navigation section of the website header. But now you depend on using a screen reader. Every single time you try to navigate the website, up to 40 items are read out to you – pretty annoying, right? It can also be physically challenging for people with impaired motor skills.
This is why we, as an agency for accessible websites, purposefulle use the metaphor of a “digital wheelchair ramp.”
What this means in practice:
An orderly navigation menu and sensibly structured website content save a lot of time for people both with and without disabilities. Topic-based landing pages help to avoid unnecessary navigation steps and enable physically impaired users to reach more quickly the content they are actually interested in.
Different subject areas should be grouped on landing pages before entering deeper navigation levels. In this way, the navigation in the header (and thereby the access order for screen readers and keyboards) remains straightforward and accessible.
This is how accessible navigation looks like – an overview
Assuming a clean website structure allows for it, the following control elements and technical features are essential for an accessible navigation:
Keyboard operation:
The page can be accessed in its entirety without using the mouse – e.g., elements such as buttons, links and navigation fields can be selected from left to right using the Tab key ( or from right to left using Shift + Tab). The Enter key is used to confirm the selection or to open drop-down menus.
Visual accessibility:
A sufficient contrast ratio (at least 3:1), clearly visible focus states when navigating via the keyboard and sufficiently large clicking areas (at least 24x24px) improve the usability for navigation and buttons, links, etc.
Clearly structured menu navigation:
The menu structure is straightforward, logical and consistent. This means that you have a uniform headline structure (consistent ordering from H1 to H6 if necessary), distinct page titles and comprehensible menu navigation from left to right or from top to bottom in drop-down menus.
Screen-reader compatibility:
Blind or visually impaired persons can use screen readers (programs that read aloud) as guides for navigation, to have text content and image descriptions read aloud and to get an explanation of button functions.
Some website elements are, from a technical standpoint, only containers but look like, say, buttons or dialog boxes. A screen reader will not automatically recognize them as such.
→ By using the “role=button” attribute, the screen reader will recognize the button function instead of just reading aloud the text “Learn more.” Additional context regarding the function of the button can be added using the ARIA attribute “aria-label”.
This also applies to images and graphics. Visual content can be made “readable” for screen readers by means of descriptive alternative texts. If no alternative texts are provided, in the best case only the title of the picture will be read out loud.
Technically sound implementation:
HTML elements such as ARIA attributes are useful for assistive technologies to recognize the structure. In the absence of ARIA, complex web content such as accordions, tabs, modal windows or dynamic contents can be impossible to understand or operate for people using screen readers.
For instance, the “aria-label” attribute enables screen readers to determine the function of a button.
→ All that can be seen is an e-mail icon that refers to the Send e-mail function. At best, a screen reader would only be able to recognize and read out the text “Button”.
→ By using the aria-label=“Send e-mail”, the screen reader will also read out the text “Send e-mail”, even though it isn’t visible.
Conclusion – Accessible navigation is not only inclusive, but also the smart way to go!
Just by navigating through a website you can already see that digital roadblocks are not as far removed from physical roadblocks as you might first assume. Navigation through a poorly structured website with no support for assistive devices is not only annoying, but also mentally and physically taxing.
As an agency for accessible websites, we try to avoid statements with threatening undertones such as: “DIGITAL ACCESSIBILITY IS MANDATORY AND YOU FACE HEAVY PENALTIES IF YOU DON’T IMPLEMENT THIS, THAT, AND THE OTHER.”
We would like to encourage you to expand your target group by being inclusive and to design for the best possible user experience for all users of your website.
If you would like to implement accessible navigation or if you plan to implement other digital accessibility measures such as Easy Read Texts, please send us an e-mail using the contact form below. We would be happy to arrange an appointment for a subsequent discussion – whether by telephone, video call or a face-to-face meeting on site.
