Focusable controls

Most HTML documents contain interactive elements such as links, buttons, forms and custom controls. These interactive elements act as controls during the user experience. To ensure a good user experience for all users, interaction controls also need to function when using alternative inputs such as a keyboard, switch devices or voice.

Recommendations

When creating controls for JavaScript enhanced interactions, use the elements <a>, <button> or <input>[type=checkbox color date datetime-local email file month number password radio range search tel text time url week], especially if that is the only mechanism for controlling such interactions.

Include a href attribute with <a> elements used for interaction controls.

Do not add interaction controls that have no purpose without JavaScript into a page until the associated code is available and capable of running.

Why it matters

Using natively focusable elements, with click, keydown and focus events, will ensure user interactions are accessible to keyboard and assistive technology users as well as pointing device users.

In general, use <a> elements when there is a URL change associated with the interaction, and <button> elements for interactions that don鈥檛 have an associated URL change.

Although <a> elements without a href attribute may provide an anchor point to jump to, they are not keyboard accessible and therefore not suitable to use for interaction controls.

When there is no core interaction (without JavaScript), then don鈥檛 add a perceivable interaction control to the document before the associated JavaScript is capable of running. Doing so would lead to interaction controls that apparently do nothing, potentially causing confusion to users. Interaction controls added with JavaScript should still use suitable natively focusable elements.

Interaction controls that are only available to some users, such as touch gestures, may be used so long as an alternative method of controlling a feature is also provided, such as a button or checkbox.

Examples

Recommended:

<button type="button">Open panel</button>

<ul>
    <li><a href="#newstab">News</a></li>
    <li><a href="#sport``tab``">Sport</a></li>
    <li><a href="#entertainmenttab">Entertainment</a></li>
</ul>

Not recommended:

<a href="#">Open panel</a>

<ul>
    <li><a>News</a></li>
    <li><a>Sport</a></li>
    <li><a>Entertainment</a></li>
</ul>

Testing

Identify which elements are focusable, using a tool such as or . Check that all interaction controls are included in the identified focusable elements. Check that all identified focusable elements are natively focusable, i.e. <a href="">, <button> or <input>, and/or can be controlled using alternative inputs such as the keyboard.

Note: to enable tabbing through all the elements in a page, you may need to adjust some OS and browser鈥檚 settings (see ).