SKIP TO MAIN

Tabbing and Focus

Tab order and communicating focus are an important part of any application.

Tabbing and Tab Order

  • In any application there are several actionable items. These can be buttons, links, inputs, etc. When tabbing thru the application, these should be read out and focused on in order they appear in the application.

  • Most of the time, this is handled properly by proper mark up.

  • In some cases, you may find the need to have role=application, in this case all tabbing functionality is removed and must be handled by the developer.

  • Items such as radio groups, tab components, etc have a 'tab in, arrow around, tab out' pattern.

  • Setting an actionable item to disabled removes it from the tab order. Sometimes this is not the result you are looking for and should see if aria-disabled might be better.

Focus Indication and Management

  • When an actionable item receives focus, there should be a visual indication of focus. Most commonly this is an outline. It does not have to be this but now with CSS focus visible, it should be included. You can read more about focus visible success criteria here.

  • When opening a modal / overlay, focus should be placed on the first actionable element. This should be treated as a page itself and tabbing / focus should remain inside until the modal is closed.