Keyboard Navigation

Key Points to Consider

All active content must be accessible via keyboard navigation.

Many impaired users use only a keyboard to navigate pages and sites. All pages require

  • a visual indicator of the current element with an obvious keyboard focus (usually an underline or change in background)
  • a logical tabbing order
  • keyboard access to all interactive elements of a page especially forms.
  • keyboard access to all scripted elements of a page such as Carousels, lightboxes, or Pop-ups
  • opportunities to skip repeated content such as navigation

Tabbing Order

As you tab through a page, the sequence must be in a meaningful order.  Tab order can be forced through the use of a tabindex attribute overriding the document code order. Tabindexes of 1 or greater are considered to be poor practice and should be avoided.

Testing

Navigate using the keyboard

  • ENTER or SPACEBAR - to select current element (such as a link)
  • TAB and SHIFT - to move between interactive elements (such as form fields).
  • ARROW Keys - to scroll the page
  • BACKSPACE - to go back a page (CTL/CMD and Left Arrow)

Read the Guideline

  • Checklist

    chevron_right

    Key things to remember

    • Visual indicator of current element when it has focus
    • Logical sequence to page order when tabbing through content
    • Keyboard access to all interactive components
    • Keyboard access to all scripted components