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.

Introduction

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.

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.

Horizontal Navigation

Introduction

This is the most common type of navigation bar and it appears horizontally across the top of a web page. It is mainly used to accommodate top-level links or accommodate a few categories/sections to ensure easy access and navigation for users.

A sample web page with a horizontal navigation without a sub-navigation.

A sample web page with a horizontal navigation with a sub-navigation (sub-menu)

Best Practices

1. If your horizontal navigation includes sub-navigation (drop-down menu) ensure they are accessible using both keyboard and screen reader interactions.

2. Use simple and clear link titles for your navigation content.

3. On mobile view, provide an accessible close mechanism for menus, such as a "Close" button or an option to click outside the menu to close it, ensuring that users can easily dismiss the menu when needed.

4. Suitable for content with few sections/categories.

YouTube video on how to make submenu/dropdown content accessible using Flowy

How to Fix with Flowy

This sub-section addresses fixing horizontal navigation with and without a sub-navigation

How to Fix Horizontal Navigation without a sub-navigation (drop-down menu).

1. Start by checking if the <nav> landmark is present on your primary navigation. If present, skip the next step, if not proceed to the next step.

2. Determine the element/wrapper that the primary <nav> component will be applied to.

Sample Code for Implementing Horizontal Navigation

Vertical Navigation

Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Vertical Navigation

Hamburger Menu

Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Hamburger Navigation

Mega Menu

Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Mega Navigation