Keyboard accessibility
When developing your website it's important to know that not everyone navigates the web using a mouse. Colleagues may instead use a wide range of assistive input devices, such as a keyboard, their voice, a switch device, touch or gestures.
Keyboard accessibility ensures all elements of the page which can be interacted with using a mouse can also be accessed through the keyboard.
Find more information about keyboard commands used to test your content for keyboard support.
Visible focus
When tabbing through the page with the keyboard, all actionable elements should be clearly highlighted. This allows colleagues to visually track focus as they navigate a page.
Focus indicators are provided automatically by web browsers. In most browsers this is a thin blue outline. Depending on the styling of an element and the background, this outline can become lost visually. It's much better to provide your own focus outline using a focus style supplied by your designers or your company style guide that meets the colour contrast minimum.
To implement focus styles, replace the browser default :focus outline with your own styles.
Cascading Style Sheets (CSS) for creating a :focus outline on a link. This code makes an underlined link yellow when it receives keyboard focus:
a:focus,
.ds_link:focus {
outline: 2px solid #fdd522;
outline-offset: 0;
background-color: #fdd522;
box-shadow: -2px 5px #333333, 2px 5px #333333;
color: #333333;
text-decoration: none;
transition-duration: 0s; }
Focus order
When tabbing through a page with the keyboard, all elements should take focus in a logical order so people can understand the meaning of the content and can navigate it easily. A logical content and focus order can be achieved by coding content to match the visual reading order.
Only interactive elements should be focusable by a keyboard. If an element does not do anything when pressed, clicked or tapped, it should not appear in the focus order.
Managing focus
One of the strengths of Hyper Text Markup Language (HTML) is the built-in keyboard accessibility of elements such as buttons, form controls and links. Where available you should use native HTML elements rather than custom-built controls.
Occasionally, however, the Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) is needed to extend the HTML semantics. This is to build custom components such as tab panels, accordions, menus and other interactive components.
If you're using ARIA to add semantics to elements that don't have built-in keyboard behaviour, this will have to be added separately. Elements can be made focusable by adding a tabindex=0 attribute value to it. This adds the element to the list of elements that can be focused on by pressing the Tab key, in the HTML. You can use the tabindex='-1' value to make elements that are not normally focusable receive focus programmatically using JavaScript .focus(). For example, use tabindex='-1' on the container for a dialog or set focus in a text field. Move focus to it when the dialog opens using JavaScript .focus().
HTML for the focus method:
<button type='button' id='myButton'>Click Me!</button>
<p></p>
<button type='button' onclick='focusMethod()'>Click me to focus on the button!</button>
This is the JavaScript for the focus method:
focusMethod = function getFocus() {
document.getElementById('myTextField').focus();
}
Tips
Follow these tips to improve user experience:
- collaborate with designers to ensure the designs can be coded in a way that preserves the logical meaning of the page
- test the focus order of a page by tabbing through the page using the TAB key
There is a problem
Thanks for your feedback