The importance of keyboard navigation

Published March 13, 2023

The major key to digital accessibility is a user-friendly site. You want your website to be easily navigable by all people who want to use your services, buy your products, or interact with your business. In order for blind and visually impaired users to access your site with ease, a keyboard navigation option is a must.

Users who have Braille keyboards and those with motor disabilities rely on their traditional or modified keyboards to navigate websites instead of a mouse. Other assistive technologies also depend on keyboard accessibility (voice recognition software and screen readers).

When using keyboard navigation, the following keys are fundamental:

  • TAB: Navigate forward

  • SHIFT+TAB: Navigate backward

  • SPACE: Check or uncheck boxes

  • ENTER: Activate a link

  • Left, right, up, and down arrow keys: Navigate between or to options

To create an accessible keyboard experience you need the following:

Clearly defined Keyboard Focus Indicator

Keyboard focus is a visual indicator letting the user know where to tab to to activate keyboard navigation. (Links, buttons, and form controls are already accessible to keyboard users, so those don’t need an indicator.) It’s coded by default into common web browsers (usually a thin, grey dotted line or blue solid border), but some web designers remove it for appearance purposes. As we know, sites are more than aesthetics and accessibility trumps that every time.

Instead of removing the focus indicator, have your team design it in a way that’s consistent with your company’s branding. No matter what design you use, make sure it is highly visible with adequate contrast.

Accessible interactive elements

Interactive elements can add to a site’s user experience and design from quizzes to videos and more. Make sure that all drop-down menus, buttons, and other added widgets are accessible and are able to be “Tabbed” through.

Intuitive navigation order

Keyboard navigation should follow the visual flow of the page, even if users are unable to see it. The page should flow from left to right and top to bottom starting with the header first, followed by main navigation, then page navigation, and ending at the footer. This can all be done via coding on the backend of your website.

Add a “Skip Navigation” option

Tabs are used to help visually inclined users scan a web page to find the elements they want to navigate to and interact with by clicking their mouse. While it’s helpful to those who are sighted, it can be tedious for keyboard users to tab through lengthy navigation like a long list of links.

Providing a link to “Skip navigation” or “Skip to main content” makes it more user-friendly and efficient for those using keyboards.

Event: Design for Accessibility

The first event in our three-part series on Designing, Developing, and Deploying for Accessibility is on Tuesday, May 9th, at 1 PM ET.  This is a complimentary online event.  You don't want to miss industry experts sharing best practices for designing your company's accessibility strategy! Get more information about this event and register here.

The next two events in the series quickly follow. Click the links below for more information and to register for the complimentary events.

Wednesday, May 10th: Develop for Accessibility

Thursday, May 11th: Deploy for Accessibility

Vendor Directory now offers an impartial listing of digital accessibility vendors.  Search for products and services by category, subcategory, or by company name.  Check out our new Vendor Directory here.