Keyboard Usage

# Keyboard Usage of ARIA Role Mapped Controls

## Overview

Mouse users can interact with any visible element on a page directly by clicking on it. To interact with an element, keyboard users need to move the focus sequentially through all interactive elements on a page until they reach the desired element.

Navigating through a website with a keyboard uses the TAB key to move forward and the SHIFT+TAB combination to move backwards. These keys move you only between elements of the page that are focusable. If an element can be focused using the keyboard, then it should be interactive. That is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

## Tabindex

HTML Elements like buttons, links, inputs and others, can receive focus.

However, the button described using ARIA roles will not receive focus.

    <div role="button">Save</div>

Press Tab

As you can see the div with role button does not accept focus, so you need the attribute tabindex for this case. The tabindex global attribute indicates that the element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

    <div role="button" tabindex="0">Save</div>

Press Tab

Now the button is focusable. A negative value of the tabindex, means that the element is not reachable via sequential keyboard navigation. In this case it's useful to create accessible widgets with JavaScript.

    <div role="button" tabindex="-1">Save</div>

Press Tab

The button is no longer focusable.