Component Library

Focus Order

Issue Description

The focus order of focusable elements on a page receive focus in an order that is not intuitive or fails to preserve meaning and operability.

Recommendation

Specify a tab order that follows relationships in the content without following the order of the interactive elements in the code, an alternative order can be specified using the <tabindex> attribute of the interactive element.

  • To include an element in the tab order (in addition to links and form elements), specify a tabindex value of "0".
  • To hide a keyboard-accessible element from assistive technology, specify a tabindex value of "-1".

https://www.csun.edu/universal-design-center/web-accessibility-criteria-tab-order