Accessibility

Knowledgebase Docs » UberMenu 3
USEFUL? 2
UberMenu 3

UberMenu Control Panel > General Settings > Accessibility

UberMenu provides the following accessibility features, which can be enabled and disabled to your liking in the settings

Keyboard accessibility

Allows users to tab through the menu and highlight focused elements. For more information, see Keyboard Accessibility & the Blue Outline / Glow

Keyboard Submenu Control

Since UberMenu v3.8

Controls how the submenus are activated when tabbing through the menu items with the keyboard.

Enter

Enter/Return – Open the submenu if one exists. If not, follow the link. Once the submenu is open, a second stroke of the Enter/Return key will follow the link.

Tab – Enter the submenu if it is open, otherwise navigate to the next visible item

Escape – Close the submenu if it is open

Spacebar

Spacebar – Open the submenu if one exists

Enter/Return – Follow the link of the highlighted item

Tab – Enter the submenu if it is open, otherwise navigate to the next visible item

Escape – Close the submenu if it is open

Focus

Tab – Focuses the top level item and opens its submenu

Enter/Return – Follows the link

Escape – Close the submenu if it is open.

Skip navigation link

Adds a hidden skip nav link to assist those using screen readers

Collapse mobile menu with Escape key

On mobile, the menu is closed when the escape key is pressed.

tabindex

Top level anchors will be given a tabindex of 0. (Note that there is no setting associated with this attribute, it will be added automatically)

ARIA

Settings for Accessible Rich Internet Applications

role=”navigation”

Adds role attribute to the nav container (redundant if using HTML 5 nav tag)

aria-label for nav

Adds aria-label=”{menu-title}” to the nav tag. You can set the title of your menu in the Appearance > Menus screen

aria-expanded

Adds the aria-expanded attribute to activated anchors and their submenus when open.

aria-hidden [submenus]

Adds the aria-hidden attribute to hidden submenus

ARIA for responsive toggle

Adds role=”button”, aria-controls, aria-hidden, and aria-expanded attributes to responsive toggle.

aria-hidden [icons]

Adds the aria-hidden attribute to Font Awesome icons. Enable if your icons are purely decorative.