Navigation is one of the most important things on a website
Surely this is one of the most obvious things to anyone – especially someone who has experienced the frustration of not being able to find their way around a web site.
Don’t use drop down menus
Specifically, these are menus designed where an additional submenu will appear when a user hovers over a menu item.
One reason this can be frustrating is due to the difference in implementation between browsers.
Additionally, styles and interactivity are not consistently applied between designers/developers.
Also, on touch-devices there is no way to indicate “hovering”. There are workarounds but these are usually even more frustrating for many users – and it just compunds on the problem of unpredictability.
Any user can’t rely on Patterned Behavior when it comes to interacting with drop down menus, but it is especially difficult for A11y challenged users.
ACTION ITEM: Remove all drop down menus. This will require heavy reworking of the site. Ideally, separate pages found under a menu item group should be combined into one page (or a couple of pages). This will dramatically rearrange the site index and, therefore, require a URL redirection map to send old URLs to the new URLs – which is important to not lose any SEO traffic history
Keyboard interactivity with Main Menu
The 3-line icon is quite familiar to most people nowadays to indicate where to open the Main Menu. This is called a Menu Drawer or Hamburger (both terms are used interchangeably in the industry).
For A11y, the Menu Drawer should be able to be opened when it is in Focus and the user presses Enter.
Likewise, the user should also be able to press Esc to close the menu.
While the Menu Drawer is open and the Menu Items are visible, the user should be able to Tab through the items (or Shift+Tab in reverse).
Additionally, tabbing through the items should loop around to the first item after the last item is reached (and the same in reverse). This is called Trapping.
ACTION ITEM: Add javascript to allow opening the Main Menu with Enter, to Trap Focus within the menu while Tabbing between items, and to close it with Esc.
We have a script for that!
Linking to the Home Page
It has become convention to link The Logo of a site in the <header> to the Home Page. But this convention is not within good standards of A11y – because it is Anti-Pattern.
Still… it is expected by a significant number of people, so it wouldn’t be “wrong” to do so.
But for A11y it is strongly recommended to have a Home link within flow of the Main Menu.
ACTION ITEM: Add a “Home” link as First Menu Item in the Main Menu. Link The Logo to the Home Page as well – if desired.
Navigating in forms
Forms can be particularly challenging in A11y terms.
There are lots of factors to explain and not within scope here, but generally speaking… a user should be able to be navigate through ALL interactive elements within a form using the tab key. All interactive elements should also have helpful speakable labels (more info on speakable items on the ARIA page).
ACTION ITEM: Review all forms to make sure they follow A11y guidelines.