Focusable

Checklist » Accessibility

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.

Inheriting focusability

Setting tabIndex on the overall component

Polymer({

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

Setting tabIndex on an child element which isn't normally interactive

<template>
  <div tabIndex="-1">
    ...
  </div>
</template>

Focus order

If the component has multiple focusable elements, is the observed tab order reasonable?