All sites must be navigable by keyboard only. This means all links, including navigation and dropdown menus must be reachable by using the keyboard.

  • This can be tested by using the Tab key and tabbing through the site to ensure all navigation, including dropdown menus are reachable with the keyboard.
  • Skip links should be the first tabbed content, then the branding bar, and finally the rest of the site, including dropdown navigation and all links on the page.
  • Each link needs a focus state so the user is able to identify it as a link. You may also use the hover state styles as the focus state.


Example of tabbing through a site that has focus states:

tabbing-content.gif



CSS focus example

.nav a:focus {border:2px solid purple}