Lorenzo Billie 
Accessibility Compliance with Proper Navigation – AccessiBe Insights
Navigation is the way how the users find different information on the websites and applications. So, it is important that the navigation is made accessible. The links should be built properly so that the keyboard users and the screen readers can rightly interpret those. If the navigation is tied with links, the screen readers can easily find the same. The concept of navigation becomes even more complicated when we move to tablets or mobile devices. As a general practice, nowadays, all the navigation content used to be hidden under the ‘Menu’ icon. We need all the types of users to understand the purpose of the menu and what they need to expect upon clicking it.
Best practices in accessible navigation – AccessiBe
In the mobile-based navigation along with the desktop version, it is important to consider how it behaves on different devices. The primary rule is that you may quote the navigation with links. You should also put the links within an ordered list structure. With these, screen readers can read out the links in the list and give the most information possible to visually impaired people about navigation content. It is also crucial for the screen readers to interpret the ARIA attributes. AccessiBe points out that it is important to add the label attributes to navigation in order to give the special users support and provide more information, not the assistive technology tools.
Mobile triggers
- You may use the button tag for triggering mobile navigation. If you use any other HTML element, one should ensure to measure the use of the ARIA attribute so that the screen readers also will know the clickable links.
- If the button only has an image, link text, or icon, you must put the ARIA label on the trigger. On seeing an ARIA label, the screen readers may read the text-only for the understanding of people with disabilities.
- Also, if you want to be specific, toggle the button text between close and open menus by using JavaScript.
- You can also add expanded attributes by letting the users know whether the button controls are expanded.
Navigation list
- It should follow the characteristics of the menu as specified above. It includes the semantic ‘Navi’ tag, which consists of a list of links with the role attribute and also uses the ARIA label to describe the purpose.
- If there is navigation hidden on the mobile view, the screen readers may not be able to read it well. If you are using an ARIA attribute, you must toggle its property by showing or hiding the navigation. Also, you may use the ARIA attribute to ensure that screen readers may not be reading the hidden content, even though it is not always necessary.
AccessiBe now offers many accessibility tools to ensure that your website is compliant with the WCAG standards of web application and mobile application navigation. For mobile navigation, hidden ARIA attributes are not commonly accepted. You need to follow a different set of instructions for mobile app navigation which we will discuss in detail in another article of this series.
