Spotlight 6

Meaningful Sequence and Focus Order

(WCAG 1.3.2, 2.4.3 & 2.4.7)

This week, the highlight is meaningful sequence and focus order. 


WCAG 1.3.2 Meaningful sequence - level A and 2.4.3 Focus order - level A both relate to logical order in any content. They're similar and aim to ensure that assistive technologies don't access content in a confusing way. The difference is mainly that 1.3.2 applies to all content and is essential for screen readers so that it reads out the content in a logical and meaningful way. Whereas 2.4.3 refers to interactive items and are also important for keyboard users who don’t necessarily use screen readers but need to activate interactive items such as links, video players or search bars. Focus order ensures that for example keyboard users can tab through, access and input content in a meaningful way.


To comply, make sure to present content in a logical and intuitive way. Besides, use the authoring tool's focus order function to align the focus order with the reading order as much as possible. 

Focus order function  with the Use the default focus order option selected.
Focus order panel in Storyline 360Source: Articulate community

One more guideline that relates to focus order is WCAG 2.4.7 Focus Visible - level AA. This states that when users navigate through the keyboard, the focus indicator should be visible. This is often a colour border around or a change in the appearance of the content that is being selected by the keyboard. It is a function that is usually governed by the authoring tool, so there's nothing to do.

Resources:


Then why not try the screen reader you used in the last spotlight (Spotlight 5: Screen readers) and navigate through a website and see how they apply the meaningful sequence guideline? You can also just test out the focus order without a screen reader and use the tab button to jump around the interactive items and activate them with the space bar.

Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

When you post in the community, use the hashtag #LCASpotlightOrder

Spotlight 5: Screen readers

Spotlight 7: Captions