Accessibility of the navigation menu of web application
A few years ago when I started my journey in the field of frontend engineering at that time I was not aware of what does web application accessibility means. During those days the main focus was to develop the performance efficient and responsive frontend web application. As I started developing on a public-facing web application at that time I got the real importance of web accessibility. So let’s understand what does web accessibility means.
Web accessibility is also important for people with disabilities and without disabilities. Let’s understand it by examples.
- people using mobile phones, smartwatches, smart TVs, and other devices with small screens, different input modes, etc.
- older people with changing abilities due to aging.
- people with “temporary disabilities” such as a broken arm or lost glasses.
- people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to the audio.
- people using a slow Internet connection, or who have limited or expensive bandwidth.
In today’s world, most of the developers don’t understand the importance of Accessibility. Top-notch product based companies who develop public-facing applications always care about the accessibility of their web applications. as they need to deal with a large user base and which include people with various disabilities.
For example, If you develop an Online Food delivery application with good UI design but if a disabled hungry user can’t place an order from it then it’s not good for your business as well as for company reputation.
Now let’s learn how to improve or make navigation menu accessible to users.
Importance of Accessibility of Navigation Menu:
The navigation menu is always one of the critical parts of the web application as it defines the overall structure of web applications with essential functionality. The confusing and unaccessible menu leads to the early exit of the user.
- Screen reader and keyboard users benefit from a keyboard.
- Users with fine motor difficulties and touch screen users require larger targets to click or tap on.
People with limited attention or short-term memory benefit from clear and distinct menus with easily identifiable states, such as the current page.
To make a menu accessible to users we have to concentrate on a few important factors about navigation menus like Structure, Stylings, Fly-out menus, and Application. Let’s see how they play an important role to make the menu accessible.
Structure of Menu:
- Write the menu code always inside the navigation
<nav>tag. - Wrap Menu Items in the ordered list
<ol>when you need in a specific order, otherwise use Unordered list<ul>. - Use ARIA Labels as per the use cases.
Usearia-labelledbyto refer to an existing element by its selectorid. Usearia-labelapproach if the label should not appear visually on the page. To make things clear please refer to the following 2 code snippets. See the following examples of both attributes:
4. To Indicate the current item there are 2 ways to deal with these issues:
Use Invisible Text: Use an invisible label that is read aloud to screen reader users to mark the current item, and Remove the anchor (<a>), so users cannot interact with the current item.
Use the aria-current="page": attribute to indicate the current page in the menu. This technique is useful in the scenario when removal if an anchor tag is needed.
Stylings:
While styling the menu we need to take care of the following points:
- Location: Display the menu as per user expected location for example Generally In the desktop application we display the menu horizontally and on Mobile application display it in Sidebar because of screen restrictions.
- Identification: Due to poorly design menu can lead to the early exit of the user from your navigation. First Decide menu item for your application which you need to display on top. and then their hierarchies to design sub-menu items.
- Readability: Ensure appropriate sizing of menus and menu items to fit all text. The menu size should also be adaptive to varying text sizes. Try to avoid Upper case letters, Linebreaks, hypertension as these things make the text difficult to read.
- Size: Provide sufficient white space, like padding, to support people with reduced dexterity and small touch screens on mobile devices. Also, make sure that menu items don’t overlap when screen size changes.
- States of Menu: Display the menu items state as per the user actions. Typically menu always comes in any of the following three states.
A) Hover & Focus state: Changing the color schemes of menu items on user actions like hover or on focus increases the interactivity of the menu items.
B) Active state: When you click on a menu item that time for a moment the color of that item changes that is nothing but the active state. A menu item can be activated by clicking on it or by when the user focuses on it & hit the enter key.
C) Current State: You can use 2 ways that are posted in this article for the HTML structure of the current item. In addition to this, you can invert the color scheme or use different color schemes from the already existing schemes.
Fly-out Menu (Dropdown Menus):
A) Indicate submenus:
Use fly out menus to give an overview of a web site’s page hierarchy. It allows the website to show the main category of the menus on the web site’s header and under the main category display the subcategory of the menu.
WAI-ARIA Markup to identify submenu to screenreaders:
aria-haspopup="true" -to declare that a menu item has a submenu.aria-expanded="false" -to declare that the submenu is hidden currently.
WAI-ARIA Markup to identify submenu to screenreaders
B) Fly-out functionality:
the behavior of Fly out functionality will be a little different fro Mouse user and Keyboard users. CSS and JS are more than enough to implement this functionality. Fly out functionality is not use case for touch screen device
Mouse users:
In the case of a Mouse user, we have delayed the closing of the submenu. people having reduced dexterity it is difficult to open the menu on the mouse pointer movement and close it suddenly.
Menu fly out functionality for application menu using CSS
Delay for the closing of Dropdown Menu for Mouse users Checks the following example for this functionality. For this refer the same HTML code given for Point (A) Indicate submenus. and for JS and CSS refer below two code snippets.
Keyboard Users:
Ideally, submenu should not be open automatically when the user is navigating through the main menu items, instead of that, it can open when the user perform particular action like click on the dropdown main menu item.
There are 2 approaches to deal with these situations:
A) Use the main menu item as a toggle on click action:
In this approach when the user is navigation through the keyboard on a menu item that time if he focuses on a menu item(parent menu item) which contains dropdown and after that, he hit enter key or down arrow key that time open the dropdown menu. This approach is not useful when your main menu item contains a link for any content or any other page.
B) Use button to toggle:
The drawback of Approach A is that if we need to perform a specific function on the main menu item like opening the new page when a user clicks on it (By Mouse click or pressing enter after focusing on it by tab key) then we can’t open a submenu.
So to solve the above problem we can use the button as a visual indicator which indicates the user that particular main menu item has a submenu. another advantage of using this approach is that on touch screen devices it helps the user to know that submenu is present.
Application Menu:
Following WAI-ARIA attributes and roles are needed to assign a menu for the semantics of the menu.
WAI-ARIA roles:
menubar: Denotes a menu bar.menu: Denotes a set of links. it is used for the fly-out menus.menuitem: Denotes an individual menu item.separator: Denotes a separator between two groups of menu items in a menu.
Functionality:
Adding the WAI-ARIA roles does not automatically enable the menu’s functionality or keyboard behavior.
In many cases, to provide the keyboard support we need to write additional JS. For example, as mentioned above to implement flyout functionality we need to write JS for both approaches of Keyboard users.
Following is the classical keyboard behavior which we need while navigating through the menu items and of-course to achieve this we need JavaScript too :)
Keyboard Behaviour
- Left and right keys are used to iterate through the top-level items.
2. Up and down arrows are used to navigate submenus.
3. Pressing the tab key focuses on the next item after the menu instead of the next menu item.
For a working example of Navigation menu with source code, Please Refer to this link https://www.w3.org/WAI/tutorials/menus/application-menus-code/
