Anatomy of an Accessible Navigation Menu
- Steve Jones
Why is an Accessible Navigation Important?
- Inclusive User Experience
- Legal and Policy Requirements
- Ethical Responsibility
- It defines the structure of a website
- It avoids abandonment
If it's not accessible
it's broken!
Menu Structure
Semantic Markup
Using HTML elements for their given meaning, not just for their appearance.
Adaptive
Viewport, magnification, assistive technology
HTML Unordered
When menu items are not in specific order.
HTML Ordered
When menu items are in sequence.
Identify Menu
Use HTML5 nav element
Label Menu
- Option 1: aria-label attribute
- Option 2: aria-labelledby attribute
Indicate Current Menu Item
Use aria-current attribute
Contact Us
Rendered Example
Menu Styling
- Displayed in convential a location, such as the page header or left sidebar.
- Easily identifed as a menu through propery markup and styles
- Menu adapts to varying text and viewport sizes
- Avoid line breaks, uppercase text, and hyphens
- Adequate white space
- Generous sizes for clickable areas
Hover and Focus States
Changing hovered and focus states give uses visual guideance when navigating the menu.
nav a:hover,
nav a:focus {
color: #0d5f9d; /* blue */
background-color: #fff; /* white */
text-decoration: underline;
}
nav a:focus {
outline: solid 2px #0d5f9d; /* blue */
outline-offset: 2px;
}
Active State
Changing activated state helps users identify which menu item they've clicked.
nav a:active {
color: #072446; /* dark blue */
background-color: #F3CD1D; /* yellow */
text-decoration: underline;
}
Current state
Visually indicating the active menu item helps users identify the current page.
nav [aria-current=page] {
background-color: #F3CD1D; /* yellow */
color: #072446; /* dark blue */
border-bottom: .25em solid #072446; /* dark blue */
}
Rendered Example
Fly-out Menus
- Defines websites hierarchy
- Reduces multiple page loads
- It's helpful to repeat submenus on the parent page
Fly-out Menu HTML Markup
Fly-out menus are a nested list within the parent list item
Fly-out Functionality: Mouse Users
- When parent menu item is hovered show submenu
- Additional javascript can be used to add a close delay for imprecise mouse movement
nav > ul li ul {
display: none;
}
nav > ul li:hover ul {
display: block;
}
Fly-out Functionality: Keyboard Users
- Button toggle with aria-haspopup equal to menu
- Button toggle with aria-expanded
- Hidden screen reader text labeled with the parent menu name and 'submenu' appended
...
Shop
...
Fly-out Functionality: javascript
- Keyboard users can navigate through parent menu items without having to navigate through all submenu items
- On submenu button click or keypress, toggle submenu visibility and toggle the aria-expanded attribute
- When on submenu pressing the escape key closes submenu and set the aria-expanded attribute to false and returns focus back to the submenu button
- Only allow one submenu open at a time
Mobile Menu
- Use a button to toggle menu visibility
- Use aria-expanded attribute on menu toggle button
- Set aria-controls to the menus id attribute
Live Example
Code Example
bit.ly/a11ynavSteve Jones
Owner & CTO
@stevejonesdev
Meetup: Equalizedigital.com/events
Facebook Group: facebook.com/groups/wordpress.accessibility
Podcast: AccessibilityCraft.com