Focusable

Checklist » Accessibility

✓ Focusable

If the component is interactive, can you navigate to — and through — the component using 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.

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>.

Establishing an internal tab order for a component with multiple input elements

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