Skip to main content

Front-End Development

The Importance of Web Accessibility in Site Navigation

Istock 1125857963 (1)

What is Web Accessibility? You may have heard that term a lot lately. With almost 62% of the world’s population using Internet today, it is crucial for the business to be available to all out there. The Web is designed to work for all people, regardless of their hardware, software, language, location, or ability.

Access by everyone regardless of disability is an essential aspect
Image source: https://www.w3.org/WAI/fundamentals/accessibility-intro/

People should be able to understand, navigate and interact with the Web without any impediments. It is essential that the Web is accessible in order to provide equal access and equal opportunities to people with diverse abilities.

7 Elements of an Accessible ADA-Compliant Website
Image source: https://www.netsolutions.com/insights/ecommerce-website-accessibility/

As you may know, every web page starts with the navigation menu which is the first thing people will notice when they open the website. It is important that people are able to use the navigation and to maneuver through the website.

In this article I will explain how to create a navigation that follows the W3C standards, including some best practices.

ARIA Roles

ARIA roles provide a semantic meaning to the content. They can be used to describe elements that do not exists in HTML markup. Landmark elements allow assistive technology to navigate and quickly find the content.

Landmark roles:

  • Banner: <header>
  • Complementary: <aside>
  • Content info: <footer>
  • Form: <form>
  • Main: <main>
  • Navigation: <nav>
  • Region: <section>
  • Search

 

ARIA roles provide a semantic meaning to the content

Role “navigation”

The landmark role is providing a way to identify the structure of a web page. The landmark role = “navigation” is used to identify major groups of links used for a website or page navigation. If a page has more than one navigation landmark, each landmark should have a unique identifier.

The landmark role is providing a way to identify the structure of a web page

Role “menu”

The role “menu” is a type of a composite widget that offers a list of choices to the user. The role “menu” is appropriate when a list of menu items is presented – similar to a menu on a desktop application. Submenus, also known as pop-up menus should have the role = “menu”.

The role 'menu' is a type of a composite widget that offers a list of choices to the user

Role “menuitem”

The role “menuitem” indicates the element is an option in a set of choices contained by a menu. Every menu item with role “menuitem” is focusable and  must have an accessible name.

The role 'menuitem' indicates the element is an option in a set of choices contained by a menu

Best practices

  • Use HTML5 <nav> element to define the Navigation
  • Avoid using too many landmark roles. It is difficult to understand the overall layout role
  • Include role “navigation” attribute to define a Navigation landmark
  • Include role “menu” for container elements that have menu and submenu list
  • All menu items should have role “menuitem” attribute
  • Use aria-label attribute to provide a recognizable name for landmark/object
  • Use a <button> tag for mobile navigation trigger; or ensue that you use the ARIA attribute role “button” so screen readers will know it is clickable
  • All active elements should be keyboard accessible
  • All focusable active elements should include accessible roles, states, names and descriptions
  • Hover and focus states should be defined to support both mouse and keyboard Navigation

By following W3C standards and guidelines and including landmark roles helps to make websites more accessible, usable, and inclusive for everyone.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Petar Jelic

Petar Jelic is a business analyst and has a degree in business informatics. He has also worked as a front-end developer for 8 years. Petar enjoys traveling, scuba diving, skiing, and watching movies and tv shows in his free time.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram