2.4.3 – Focus Order (Level A)

Pages work in a logical order

Your users need to find their way around your website in a sequential and meaningful order. You can control this with the ‘focus order’ of your website.

‘Focus order’ is the sequence in which a user accesses elements on your website. For example, some users can’t use a mouse and will ‘tab’ through your website – they must access elements in an order that makes sense. This order is as simple as a bit of logic, such as going from your header to your menu to your page content.

What to do

  • A well-made HTML website will often comply with this guideline.
  • Unplug your mouse and verify that you can use the ‘Tab’ key to navigate to every part of your website and use every function, including search boxes and forms – make sure each page has a sensible focus order.

Tips

If you have complied with Guideline 2.1.1, you may have already covered elements of this guideline.

Exceptions

  • Complex items like tree diagrams do not have to be exactly programmed to a specific order, as long as your users can reach every element.
  • You don’t need to set a focus order if your page doesn’t need to be navigated in a particular sequence to be understood. For example, a random collage of links or images.

See also

  • A logical focus order is even more important if the focus indicator is not visible for some or all focus areas on a page. Whilst users can add a focus indicator through a user stylesheet, the vast majority probably wouldn’t even know that was possible, let alone how to do it.

    • Spot on Richard, without the visible indicator it’s something of a guessing game. I can’t understand why the requirement to make it visible isn’t introduced until 2.4.7 at Level AA – I’d merge the two guidelines together and have them at Level A.

  • Michelangelo

    Yeah, invisible – or barely visible – focus is such a widespread design mistake, and so easily fixed, since most designers are careful about including hover styles…

  • Андрей

    Hi Luke,

    While I was reading this article I did what you suggesting I started tabbing through this page. I’ve noticed that border doesn’t appear for the elements on the site.

    I’m using Safari 7.0 on OS X 10.9.1 as my primary browser. I have setting “Press Tab to highlight each item on a webpage” turned on in Accessibility settings turned on.

    I’ve checked this in Chrome and see the same problem. If firefox, though, I don’t see border but at leas get cursor set at the beginning of each item on the pigs while I’m tabbing through the page,

    Is there is something wrong with the way my browsers set up or it’s a bug on your site?

    Thanks

    Andrew

    • Hi Andrew, that’s a new bug on the site.

      Thanks for spotting it!

      • Андрей

        Sure, glad to help.

        You have a great blog thanks for doing all this job.

        Your book is great too, btw.