A Guide to Achieving Keyboard Accessibility

Girijesh Tripathi November 18, 2019
Despite forming such a large part of the population, the needs of people with disabilities often tend to be ignored. The gap between those with disabilities and those without was made narrower with the passing of the American with Disabilities Act in 1990. But, there still is some work to be done to ensure optimal accessibility, especially when it comes to the digital world. According to data published by Pew Research Center, Americans with disabilities are three times less likely to go online or own a smartphone, as compared to people without disability. In addition, people living with disabilities tend to less confident and comfortable in accessing online content. The digital divide can be narrowed through efforts such as keyboard accessibility.   
Why Keyboard Accessibility Matters
Online accessibility is the key to remain connected with the world at large today. One of the most important aspects of digital accessibility is keyboard accessibility. Keyboard accessibility ensures that the user is not completely dependent upon a mouse for navigation of content. Motor disabilities lead to issues with motor control, which includes difficulties with fine motor coordination of the hands. This restricts the individual from being able to use a mouse to navigate the digital world. In addition, those with visual impairment rely on keyboards, along with their screen reader, to navigate through digital content and by people who do not have hands because of a birth defect or an accident.  
Designing Content for Keyboard Accessibility
The aim of digital content should be to make it’s professional, creative and interpersonal features accessible for everyone, regardless of gender, age or ability. To make such content accessible for all, a series of guidelines have been published by the Web Accessibility Initiative of the World Wide Web Consortium, the primary internet standards organization for the online sphere. The guidelines recommend the following criteria:
  • Complete functionality of the content should be operable by means of a keyboard interface, without the need for specific timings for individual keystrokes
  • The keyboard focus will primarily allow sighted users to know which element from the webpage has focus
  • The website should not trap keyboard users. All the areas of the website must be reachable by means of the keyboard alone. If the site has features that can be reached using the keyboard but cannot be left by the same means, it amounts to being trapped
  • Online content should be accessible by keyboard, without any exception
  • If a keyboard shortcut is implemented in the content using only letters, numbers, symbol characters or punctuation, then at least one of the following must be true:
      • a mechanism is available to turn the shortcut off
      • a mechanism is available to remap the shortcut to use one or more printable keys
      • the keyboard shortcut for the user interface component is only active when the component has focus
 
Best Practices to Ensure Keyboard Accessibility 
Here’s a look at the best practices to ensure keyboard accessibility:
  • All elements need to be accessible through a keyboard interface, including interactive content.
  • All sighted users need to be able to see the keyboard focus. While this focus will vary, depending on the browser used to access content, it is best to use CSS to ensure clearly visible keyboard focus. It allows you to add background colors or any other style element to ensure that the focus is visible.
  • The “outline: none” attribute removes keyboard focus on a webpage, which means that this attribute should be avoided if you want to ensure keyboard accessibility.
  • The order of tabs on a webpage needs to follow the same structure as reading a book. This means that tabs should go from top to bottom and left to right.
  • To adjust the order of a tab, the “tab-index” attribute can be used. Here’s how:  
    • tabindex=”1″ (or any number greater than 1) defines a specific tab order.
    • tabindex=”0″ allows elements adjacent to links and form elements to accept keyboard focus. It does not change the order of the tab, instead, it places the element in the logical navigation flow, as if the tab is a link on the page
    • tabindex=”-1″ allows elements besides links and form elements not to receive focus 
    • To ensure keyboard-based navigation, you need to provide a “skip to main content” link at the top of the page. You can check the Web Accessibility Criteria Link Functionality to know more
  • You will need to ascertain that the page can be navigated and interacted with using a keyboard, completely without the use of a mouse.
  • In case a popup dialogue box appears on the page, users should be able to navigate through it or exit the dialogue box using only the keyboard.
  • Native HTML elements, custom versions of native elements- must receive keyboard focus
  • Flash only web pages should be avoided since they are not keyboard accessible
Magic EdTech is a global leader in end-to-end digital accessibility solutions. Each solution created keeps WCAG2.1, 508 and ADA standards compliance in mind. From accessibility consultancy to compliance audits, design & remediation to QA Testing, the team at Magic EdTech offers it all.  In addition, the design and testing teams include 200+ accessibility trained engineers, collaborating with differently-abled users to create solutions that are fully accessible. The aim is to ensure that regardless of the age or ability of the user, the digital content is accessible to all.  
Girijesh Tripathi

As a lead consultant for accessibility testing at Magic EdTech, Girijesh is actively engaged in testing of new class digital accessibility solutions for education.