Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on only using a keyboard to access content. Screen reader users who are blind or vision impaired will also use the keyboard to access and interact with content.  Here are some general best practices.

Users Should Have the Ability to Navigate Using Only the Keyboard

Natively-Accessible Keyboard Elements:

By default, users can navigate to links, buttons, and form controls with a keyboard. These elements are natively-accessible by using the following keystrokes.    

Keystrokes  Accessible Only Through a Screen Reader:

Landmarks and Roles

Here is an example:

<header role="banner">
   <p>Put company logo, etc. here.</p>
<nav role="navigation">
      <li>Put primary navigation here</li>
<main role="main">
   <p>Put main content here.</p>
<footer role="contentinfo">
   <p>Put copyright, and footer related content , etc. here.</p>

Common Landmarks and Roles

Provide other landmarks and roles as needed to specify areas/sections on a webpage. 


Site-orientated content, such as the name of the web site, title of the page, and/or the logo.

<header role="banner"> </header>

The main or central content of the page.
<main role="main"></main>

This section contains the search functionality for the site.
<form role=”search”></form>

Stand-alone content that makes sense out of context from the rest of the document.
<article role=”article”></article>

Supporting content for the main content. For example, related links in a sidebar.  
<aside role=”complementary”></aside>

Informational child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.
<footer role=”contentinfo”></footer>

Buttons and Role Attribute

Most HTML elements have a default role that is presented to assistive technology. For example, a button has a default role of "button" and a form has a default role of "form". 

Always use the native button role so that keyboard only users are able access/select the buttons by using the tab and enter keys. 


<form action="/action_page.php" method="get" id="form1"></form>

<button type="submit" form="form" value="Submit">Submit</button>

But there are also buttons that are created that are not using a form element, just a regular hyperlink. Add a role attribute to those types of button links to help screen reader users identify the purpose of the link and for them to quickly be able to tab to all the buttons on the page by clicking on the “B” key. 


<a href="#" role="button" onclick="" class="btn btn-primary"><span>Apply Online</span></a>


Add Keyboard Focus Indicator to Menu Items, Buttons, Links, Form Elements