Focusable

Checklist » Interaction

✓ Focusable

If the component is interactive, can you navigate to/through it with Tab and Shift+Tab?

All browsers support the use of Tab to navigate the keyboard focus forward through the document's tab order (and Shift+Tab to navigate backward through that order). It is often the case that a web component will automatically pick up reasoanble support for this, but you should be aware of some complexities.

Note: This page is currently just a place for trying out the presentation of various kinds of recommendations. The topic of focusability is more complex than it seems, so the actual recommendations will take some time to pull together.

• Avoid moving focus automatically. Example: when the user has typed a certain number of digits in a phone number field, automatically moving them to the next field. This is very often more confusing to users than helpful. It makes such fields difficult to navigate through and edit later. Finally, moving the focus automatically is problematic for people relying on assistive technologies such as screen readers, who are not expecting the focus to move on its own.

Inheriting focusability

Setting tabIndex on the overall component

Polymer({

  ready: function() {
    if (this.getAttribute('tabIndex') == null) {
      // No tabIndex specified; use default value.
      this.tabIndex = 0;
    }
  }

});

Setting tabIndex on an child element

<template>
  <div tabIndex="0">
    ...
  </div>
</template>

Caution: If you're creating an element that behaves like a button, you should most likely use a real <button> element instead of creating a <div> that tries to work like a button. A real HTML button automatically exhibits a wide range of abilities, including special support in assistive devices such as screen readers. Those abilities are all lost in simple attempts to reproduce button functionality with a <div>.

Components with multiple input elements

If the component contains has multiple focusable elements of its own, can you tab through them in a reasonable order?

• Current discussion: Also see this Tab Focus Navigation Explainer.

Components with multiple input elements that present an aggregate focus

If all elements with the component are accessible with the keyboard, does the component present itself as a single focusable element?

Example: A dropdown combo box has both a text input portion and a dropdown button. These are typically independently focusable elements, but in the context of a combo box, the overall combo box should be presented as the focusable element.