Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

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

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

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

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

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

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

contentinfo
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

...

There may be times when the functionality of the Web page restricts the focus to a subsection of the content. When this is the case, keyboard users should be provided with a mechanism to leave that state and "untrap" the focus by using only the keyboard.

Ensure that Keyboard Interactions and Functionality are Predictable

When a user interface component receives keyboard focus, it should not initiate or trigger a change of context.

For example:

  • forms should not automatically be submitted when a form element receives keyboard focus;

  • new windows or popups should not be launched when a component receives keyboard focus;

  • focus should not unexpectedly be changed to another component when that component receives keyboard focus;

Users should be provided with a mechanism to initiate the change of context.

Testing for Keyboard Accessibility

...