Accessibility Navigation Menus

Background

Our navigation is handled by the theme (Generate Press), and it does take measures like applying HTML5 Semantic Elements like <nav> to content areas.

Problem

Siteimprove was still dinging our accessibility compliance due to links being repeated on the same page (that is, the same text link in the menu and also on the page).

Solution

This has been fixed by adding a title attribute that is slightly different from the navigation label and then using a PHP Snippet to copy that title attribute to an aria-label attribute.

This must be done for each menu item under Dashboard > Appearance > Menus

PHP Snippet

The snippet was created within the Snippets plugin as Add aria-label to main menu.