- Tab: Move forward from link to link or to controls
- Shift + Tab: Move backward from link to link or to controls
- Enter: Activate links, buttons, or other interactive elements
- Arrow: Navigate radio buttons and select boxes and scroll up and down a page
- Spacebar: Activate radio buttons and check boxes and buttons
Browsers add a visible focus to an element but some CSS resets add: outline: 0;
This makes it very hard to navigate a site.
No visual focus: Donald J. Trump
Add :focus where you add :hover in your CSS.
Add focus to an element:
- tabindex: 0 gives focus to items that wouldn’t normally get focus and includes them into normal tab order
- tabindex: -1 gives focus to items that wouldn’t normally get focus and/or removes items from the normal tab order
- tabindex: any positive integer gives focus and overrules normal tab order
Avoid hijacking the tabindex: it makes it very hard for keyboard users to access the menu.
In Gravity Forms
Special links to help keyboard users to jump quickly to content.
Do the sub menus show on focus?
Use focusable elements to toggle
- not a div
- no empty elements
- but use a <button>
Close with Esc!
Demo: The Incredible Accessible Modal Window by Greg Kraus (with the code also on GitHub)
Avoid a keyboard trap