Component Library

Reading Order

Issue Description

Content is presented in a nonstandard order using the <tabindex> attribute. Present content in the order that is logical that users can easily understand.

  • Elements with a tabindex of greater than 0 create inconsistent and difficult navigation for assistive technology users.

Recommendation

Ensure that content is presented in the correct reading order, both visually and to assistive technology.

  • Set the <tabindex> of each of these elements to either -1 for elements that should not be keyboard navigable, or 0 for elements that should. If you need an element to appear earlier in the tab order, consider moving it earlier in the DOM.

https://web.dev/tabindex/