Tuesday, 08 June 2021 00:00
Modified: Thursday, 17 June 2021 14:18
pl_flagde_flag

improved-key-nav-megamenu42Version 4.2 introduces a change to the way menus are navigated. Implemented changes are in line with the latest WAI-ARIA practices on menubar site navigation.  

The use of the tab and arrows keys is different. It's now strictly defined what happens when you press the arrows. The submenu due to this change does not appear automatically and is only opened by using the down/up arrow.

Get DJ-MegaMenu 4.2 version Pro.

Download DJ-MegaMenu 4.2 version light

Updated keyboard navigation

WAI-ARIA practices for horizontal navigation menubar and its submenu are applied to the DJ-MegaMenu module.  

Keyboard support is implemented for:

  • Horizontal Menubar that contains menu items (elements) which are:
    • Linked elements with no submenu
    • Linked elements that contain a submenu
    • Separator elements that contain a submenu
  • Child submenus that:
    • Include elements that may contain multiple vertically arranged items
    • Include submenus with other vertically arranged items
    • Include submenus divided into columns as a separate set of a vertical menu element

Tab keyboard shortcuts get you to the menubar in the standard tab sequence navigation process. (Shift + Tab allows moving back to the element in the tab sequence).

Once you get to focus on the menubar element, then you may follow keyboard support rules to use the key functions listed in the tables below:

Menubar

KeyFunction
Space
Enter
It opens the submenu and moves focus to the first item in the submenu.
Right Arrow
  • Moves focus on the next item in the menubar.
  • If the focus is on the last item, move focus to the first item.
Left Arrow
  • Moves focus on the previous item in the menubar.
  • If the focus is on the first item, move focus to the last item.
Down ArrowIt opens the submenu and moves focus to the first item in the submenu.
Up ArrowIt opens the submenu and moves focus to the last item in the submenu.
HomeMoves focus on the first item in the menubar.
EndMoves focus on the last item in the menubar.
Character
  • Moves focus to next item in the menubar having a name that starts with the typed character.
  • If none of the items have a name starting with the typed character, the focus does not move.

Submenu

KeyFunction
Space
Enter
  • Activates menu item, causing the link to be activated.
  • NOTE: the links go to dummy pages; use the browser go-back function to return to this menubar example page.
Escape
  • Closes submenu.
  • Moves focus to parent menubar item.
Right Arrow
  • If the focus is on an item with a submenu, opens the submenu and places focus on the first item.
  • If the focus is on an item that does not have a submenu:
    • Closes submenu.
    • Moves focus to next item in the menubar.
    • Opens submenu of newly focused menubar item, keeping the focus on that parent menubar item.
Left Arrow
  • Closes submenu and moves focus to parent menu item.
  • If a parent menu item is in the menubar, also:
    • moves focus to the previous item in the menubar.
    • Opens submenu of newly focused menubar item, keeping the focus on that parent menubar item.
Down Arrow
  • Moves focus on the next item in the submenu.
  • If the focus is on the last item, move focus to the first item.
Up Arrow
  • Moves focus on the previous item in the submenu.
  • If the focus is on the first item, move focus to the last item.
HomeMoves focus on the first item in the submenu.
EndMoves focus on the last item in the submenu.
Character
  • Moves focus to the next item having a name that starts with the typed character.
  • If none of the items have a name starting with the typed character, the focus does not move.

Navigation Menubar Example on www.w3.org

Note: For a key Enter in Menubar
If the menu item in the Menubar:
- It is a separator and contains child submenus. Then Enter key opens a submenu according to the keyboard support rules.
- However, if it is a linked item and contains submenus, enters key redirects to the URL applied to this item.

Other changes

The latest update also brings some performance improvements.

Check the ver 4.2 changelog

We need to remind you that the DJ-MegaMenu extension is available in two versions - premium and light.

The Light version does not require some premium features, but you can download it for free and also easily upgrade to the Mega Menu Pro version if you need it.

DOWNLOAD DJ-MEGAMENU LIGHT FOR FREE

WCAG related tutorials

Discover the list of Joomla and WordPress-related articles about WCAG recommendations of making accessible web pages.

We are pioneers in creating accessible Joomla templates and accessible WordPress themes. It means they are WCAG /ADA/ Section508 fully compatible. 

Browse premium Joomla WCAG & ADA Templates

Browse premium WordPress WCAG and ADA themes

Want to know more?

Related extensions

icon

DJ-MediaTools

Joomla extension for galleries, slideshows, sliders. Create beautiful photo and video galleries and place them anywhere at your website.

Joomla 3Joomla 4WCAG
icon

DJ-Classifieds

Joomla extension for classified ads, auctions and listing websites. Offers unlimited categories, locations, custom fields, and various payment gateways.

Joomla 3
icon

DJ-Catalog2

Simple and powerful directory/catalog and eCommerce Joomla extension. Simple to setup and provides neat, modern responsive output.

Joomla 3