Keyboard is used by all users and in particular, users who cannot use the mouse effectively. It includes people
with visual impairments, motor disabilities, and so on. Hence, it is important that the webpages are as
accessible with a keyboard as they are with a mouse.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
Interactive elements MUST be navigable using “Tab” and “Shift +
Tab” keys with Keyboard alone.
All interactive elements MUST be reachable and operable through keyboard alone.
Native HTML elements MUST be used to code the interactive elements to make them
keyboard accessible as HTML provides support by default.
If custom components are used to code interactive elements, ensure that the below is true.
Provide tabindex="0" to the neutral element containing the
interactive element to make it keyboard focusable. Note: DO NOT use “tabindex” attribute with
positive values like 1, 2, 3, and so on as it affects tabbing order of the elements on the
page.
Provide required event handlers to make the custom interactive elements keyboard operable.
All interactive elements SHOULD have a clearly visible focus indicator. For more
information refer to Focus Indicator component.
The reading order SHOULD be logical while navigating the content using keyboard
along with screen reader running. Note: This can be achieved by placing the code in the DOM order that matches the
visual order or the context of the content.