Ensure keyboard focus order is efficient and logical

From the audit report...

Issue

Focus Order

Keyboard focus does not move in an efficient or logical order around the page.
Focus moves through the main content first before then navigating to the main menu and then the footer. An example of logical focus order would be starting at the main menu before then following through to the main content and finally the footer.
Fig. 0.02

Impact on users

Lack of logical order makes it very difficult for keyboard users to work out where they are on the page.

Guidelines affected

• 2.4.3 Focus Order (A)
  • If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability

Recommendation

Ensure keyboard focus is efficient and logical