2.4.3 Focus Order Level 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.

[View on W3C.org]

Testing & Remediation

How to test Open up your website in your browser of choice and begin to navigate the page with just the keyboard (using the Tab key to move from one element to the next). As you are navigating the page, ensure that the order the elements receives focus is in a logical order. It's important to confirm that the focus order when keyboard navigating matches the order of what a sighted user is presented with the visual layout. If your site has alerts, modal dialog boxes, etc, you must make sure that the focus is managed corrected. The focus must move to the relevant container when it is opened and be maintained in that container so that users don't accidentally move out of it. When the alert, dialogue box, etc is closed, the focus must return to the most logical place in the page. How to remediate: There are a number of techniques that can be deployed in order to pass this Success Criterion. Techniques include using the tabIndex property to specify the logical order, making the DOM order match the visual order, etc. Please see the W3C link above to explore the different techniques (these are under the "Sufficient Techniques" section of the W3C page).

Questions and Answers

How do I navigate a website with my keyboard?

I've been reading about how I need to make sure my site can be navigated with a keyboard. Honestly, I'm not even sure where to start because I don't know what button I would hit on my keyboard. How do I navigate a website with...

What are the best accessible wordpress sliders?

I see a lot of WordPress websites (and websites in generally really) using sliders for images and information. I can see how it would be really easy to make an accessible slider. Are there any 'out of the box' accessible WordPress sliders?