Controlling Tab Order and Tab Focus for Accessibility

Easily set the sequence and what on-page elements should be accessed by screen readers or keyboard users

When creating elearning content it's critical to all learners can successfully navigate and comprehend the content.

Not everyone uses a mouse to navigate. Learners with visual impairments often use screen reader tools to navigate web-based content. Some learners may use keyboard controls due to physical challenges in using and controlling a mouse.

Both of these types of users rely on well-set up Tab Order and Tab Focus in your pages.

In dominKnow | ONE you can easily:

Understand tab order in Flow pages
Understand and set the tab order in Claro pages
Understand how screen readers and keyboard users can navigate multi-part elements such as tab sets, content carousels or images with elements layered over them
Control whether on-page elements should be focusable for screen readers or learners using keyboard controls
See what elements are tab-focusable as you preview or review a Project

Understanding the tab order in Flow pages

For Flow Pages, the tab order is determined by the page structure, which makes Flow content very screen reader and keyboard-user friendly almost automatically.

You can see the order on the Page Structure panel.

The tab order in Flow pages starts at the top and continues down through the structure.

The tab order only includes Elements on the page.

For this example page, a screen reader user or someone navigating using the Tab key will be taken to the Header Text element first, then the Body Text element then the next Body Text and so on.

Groups, Rows and Sections are not included in the tab order. Background images set on Sections or Elements are also excluded automatically since these are typically decorative in nature.

Understanding and setting the tab order in Claro pages

For Claro Pages, the tab order matches the element or stacking order on the Page Layers panel, from the bottom to the top.

For this example page, a screen reader user or someone navigating using keyboard controls will be taken to the Heading Text element first, then the Subheading Text element then the Laptop Image and lastly the Body Text element.

If you have added Layers to the page to group elements together, the bottom-to-top order still applies. Selecting See All on the Layers drop-down will show you the tab order for the page as a whole.

By default, the stacking order on the Layers tab is set by the order in which you add elements.

To optimize the tab order you can re-order the element stacking by drag and drop.

Tab order and showing elements on a Page

If you have actions on a page that show other elements, the tab order will adjust when the action has been fired.

For example, a Claro page has a button that shows a text element. If the Learner tabs to the button and clicks Enter/Return, the text element is shown the page. The next use of the tab key will take the learner to the now-shown text element. If the button isn't triggered by clicking Enter/Return then the tab order will take the learner to the next element in the tab order.

Tab order and keyboard navigation within multi-part elements

Tab sets, content carousels, timeline elements and other similar Engage elements are more than just a single element on the page - they contain sub-elements with information your learners will need. You can also set layered content over Image and Video elements which your learners will need to also navigate.

When you select one of these elements on a page, you can go to the Accessibility tab below the Stage which describes how a screen reader or keyboard user can navigate the content within these elements.

A recommended practice is to add navigation instructions to the Screen Reader Text field. This will be read to a screen reader user when they arrive at the element, so they can understand how to move forward and navigate within the element.

Controlling whether an element is Focusable for tab order

Typically, decorative or non-informational elements should be excluded from the screen reader or Tab-key navigation.

You can control this by using the Focusable setting checkbox on the Accessibility tab.

Some typically-decorative elements in dominKnow | ONE such as Shapes are set to not be focusable by default, to save having to remember to undo this setting each time you add one. Some Shapes do support text, though, so if you add text you'll need to make sure the Shape is set to Focusable.

Confirming Tab Focus during Previews and Reviews

During a Full Project Preview or when a Reviewer is reviewing a Project, there is a Tab Focus option at the top of the window.

When this is toggled on, all focusable on-page elements will be shown in a box so you can easily confirm that all expected or require elements are correctly set as Focusable.