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
...
A keyboard user typically uses the Tab key to navigate through interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item has keyboard "focus", it can be activated or manipulated with the keyboard.
A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. For example a border or outline.
Browsers will by default provide a visual border around these elements when they are in focus. Usually a blue border or dotted outline. However the default style may not provide enough color contrast between foreground and background. In other cases the outline may not be visible as the element may have already been styled with a specific border or outline or made invisible.
Apply a keyboard focus outline that has sufficient color contrast by using the following CSS attribute,
A:focus
Example:
| Code Block |
|---|
.top-box:focus {
outline-style: solid;
outline-width: 3px;
outline-color: #32a1ce;
}
<input class="top-box" value="I'll be blue when focused."> |