search

6️⃣Navigation , menus and sub menu

This page will provide a step-by-step guide on fixing site and mobile navigation with Flowy Builder. The guide will first address fixing accessibility issues for the different types of site navigation. This includes the main types of navigation, namely: Horizontal Navigation, Vertical Navigation, Hamburger Menu, and Mega Menu.

hashtag

Navigation menus or navbars play a crucial role on websites as they facilitate seamless access from one web page to another throughout a site. An inaccessible navigation bar can hinder people relying on assistive technologies from finding content on a website.

hashtag
Overall Best Practices on Creating Accessible Navigation.

  • The navigation elements must be links.

  • Put your links within an unordered list structure so that a screen reader will read out how many list items are there.

  • Use the semantic <nav> tag around your unordered list and links with an ARIA role='navigation' attribute.

  • Use ARIA role="navigation" if semantic <nav> was not used on the wrapper for the primary navigation component.

  • If there are multiple navigation <nav> items on your page, use 'aria-label' to provide a differentiating title for each item.

  • If you have your navigation hidden use CSS: {display: none;}

  • On mobile view, implement a 'button' element or implement ARIA 'role="button" to inform assistive technologies that it is an interactive element.

  • If graphics were only used, provide an alt text to the element.

  • Ensure that 'aria-expanded' and 'aria-controls' attributes are implemented on the button to indicate the expanded and collapsed states of the navigation to assistive technologies, and what element is controlled by the button trigger respectively.

  • If using an aria-hidden attribute, you should toggle this property upon showing and hiding the navigation.

Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Hamburger Navigation

https://youtu.be/6geqGQmH_eo?rel=0youtu.bechevron-right
PreviousCreating custom ARIA widgetsNextHow to conduct an audit with Flowy Audit

Last updated