How to design
a
nav button popover
A
nav button popover
must meet WCAG principles:
1
Perceivable
-
Color is not used as the only means of conveying meaning - 1.4.1 A
-
Text can resize up to 200% with no loss of information - 1.4.4 AA
-
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA
2
Operable
-
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
-
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
-
The focus indication is visible (in some way) 2.4.7 AA
-
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
-
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
-
Keyboard action is documented - 2.1.1 A
4
Robust
-
Name, role, state is documented 4.1.2 A
-
Meets criteria across platforms, devices and viewports 4.0.0 AA
A
nav button popover
must work for people with disabilities:
✓ Motor
-
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
-
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
-
The focus indication is visible (in some way) 2.4.7 AA
-
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
-
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
-
Keyboard action is documented - 2.1.1 A
✓ Blindness
-
Name, role, state is documented 4.1.2 A
-
Meets criteria across platforms, devices and viewports 4.0.0 AA
Usage
Menu popup buttons come in several forms: from a simple dropdown of links to more expansive mega-nav menus.
- Current support
- This simple example uses the popover API which has the most support in Chrome (Safari and Firefox may not yet support this).
button for the launch buttonlist for the popover surfacelink or button depending on the function of items
Don’t overcomplicate this
- Do not add
role="menu" or role="option" to the markup.
- These roles imply additional keyboard functionality will be present
- Unless you’re building actual Web based software like Gmail, this is unnecessary
Further reading
Related nav button popover entries