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).
Further reading
Related nav button popover entries