Focus Order Guide

Questions answered by this guide

• ?What is Focus Order?
• ?Why is Focus Order important?
• ?How do I change Focus Order in Storyline?
• ?Does Rise support Focus Order?
• ?Which WCAG criterion covers Focus Order?
• ?How do I test Focus Order?
• ?Why does my keyboard jump around?

What you'll learn

• Focus order is the order Tab moves through a slide
• It should match what a learner sees on screen
• Storyline gives you manual control, Rise follows block layout

What's inside

Instructional designers checking focus order in any authoring tool

1. 01The concept
2. 02Why it needs to match visual order
3. 03What WCAG requires
4. 04How to check and fix it in Storyline
5. 05How to check and fix it in Rise

Why it matters

Focus order is the order a keyboard or screen reader moves through your slide. If it does not match the order things appear on screen, a learner using a keyboard or screen reader experiences your content in a confusing, out-of-order sequence, hearing a caption before the image it describes, or reaching a Next button before the content it's meant to follow. This is WCAG success criterion 2.4.3 (Focus Order, Level A): if a page can be navigated sequentially, focus must move in an order that preserves meaning and operability. A related criterion, 2.4.7 (Focus Visible, Level AA), requires that wherever focus lands, it's visibly indicated, correct order is not useful if a learner can't see where they are.

When you'll encounter this

• You add a new object to a slide, an image, a caption, a button, and it lands at the end of the tab order regardless of where it appears visually.
• A slide has a caption or label near an image, and a screen reader user needs to hear them in a sensible sequence.
• You're reviewing a course someone else built, where objects were added and rearranged visually over time without anyone checking the tab order.
• A11yCheck flags a focus order issue on a scan report.

Example

Best practices

• Build your slide so objects are already in a logical order. This is easier than fixing order later.
• Check focus order by pressing Tab and watching where focus lands each time.
• In Storyline, use the Tab Order panel to manually fix the order if it does not match the visual layout.
• In Rise, focus order follows the order blocks are laid out on the page. Rearrange blocks if the order is wrong.
• Confirm focus is visibly indicated everywhere it lands, a correct order still fails a learner who can't see where focus currently is (WCAG 2.4.7).

Common mistakes

• Adding a new object to a slide without checking where it lands in the tab order.
• A caption or label that reads before the image it describes, instead of after.
• Focus order that jumps from the top of the slide to the bottom and back.
• Navigation buttons (Next, Back) placed earlier in the tab order than the slide's actual content.

Practical checklist

• Press Tab through the slide and confirm the order matches what you would expect visually.
• Confirm labels and captions are announced in a sensible order relative to what they describe.
• Confirm nothing is skipped that should be reachable.
• Confirm nothing is reachable that should not be, like an object hidden behind another one.
• Confirm focus is visibly indicated at every stop, not just present in the right order.

Frequently asked questions

Summary

Focus order should match what a learner sees on screen. Test it by pressing Tab, and fix it directly in Storyline's Tab Order panel or by rearranging blocks in Rise. This is WCAG 2.4.3, and it works alongside 2.4.7's requirement that focus is always visible.