Skip to main content
Home
Back to Guidelines

What is Focus Order?

Focus order should match the visual layout and the logical flow of content so keyboard users can move through the page in a way that feels natural and predictable.

When the sequence jumps around or skips important content, people can lose context, miss key information, and struggle to complete tasks efficiently.

  • Keep focus aligned with the visual layout.
  • Do not skip important content or jump unexpectedly.
  • Make the flow easy to understand and complete.

Good vs Bad Examples

Use the tabs to compare the accessible pattern with the example to avoid.

Good Example 1 – Logical Focus Order

Newsletter signup form with logical keyboard focus order that follows the visual layout.
html live code 
<input />
<input />
<button>Subscribe</button>
Why this is correct (developer logic):
  • Focus order follows the visual and logical sequence.
  • The form is easy and predictable to complete.
  • Keyboard users can move through the page naturally.

Good Example 2 – Meaningful Focus Order

E-commerce product page with focus moving through content in a meaningful order.
html live code 
<img alt="Chair" />
<input />
<button>Add to Cart</button>
Why this is correct (developer logic):
  • Focus follows the content hierarchy.
  • Important information is reached in a sensible sequence.
  • The experience is efficient and easy to understand.

Implementation Checklist

Progress0 / 5 completed (0%)

Knowledge Check

Answer Yes or No to test your understanding of focus order.

Score: 0 / 5 · Answered: 0 / 5

Does the good example demonstrate focus order correctly?

Is the bad example acceptable for focus order?

Should this pattern be checked with keyboard and screen reader testing?

Should focus follow the visual layout and logical sequence?

Is it acceptable for focus to skip key content or jump out of sequence?