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.

 

Closed Captioning Services - Free Online Event!

Join us on Tuesday, February 27th, at 1 PM ET for a free online event to explore how to evaluate and select a closed captioning vendor for your business. Click here to learn more about this event and to register.

Click here to see our Events Calendar.

Accessibility.com's 2024 events will utilize the Zoom Events platform, offering a virtual expo hall for attendees to meet with prospective vendors. If your company is interested in being part of the expo hall, don't hesitate to get in touch with Amanda@Accessibility.com.

Vendor Directory

Accessibility.com 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.

Comments