Consistency is important for any learning content creator. Not being consistent can add to the learners’ cognitive load and even cause confusion. The same is true with regard to assistive technology users. If learners rely on screen readers or screen magnifiers, for example, consistency can help them expect certain elements in a specific location or under a specific name. If this consistency is broken, they will not be able to navigate or understand the content as easily. In this spotlight, we look at the 3 WCAG criteria that aim to ensure consistency for accessibility reasons.

What the criteria say

According to WCAG 3.2.3 Consistent Navigation (AA), navigational mechanisms should appear in the same location and order on every page/slide etc. The term “navigational mechanisms” refers to elements that are displayed throughout the learning content, such as the home icon, the menu options, the search function, and the skip or next buttons. 

In many cases, the position of these mechanisms is defined by the authoring tool. However, whenever the authoring tool allows you to change the position of these elements (such as creating custom back and forward buttons), it helps to use a template to achieve consistency.

WCAG 2.2 introduced a new criterion, 3.2.6 Consistent Help (A) that is concerned with the placement (and focus order) of help options. If you make a help option available (help icon, info icon, or contact information), this guideline requires you to place it in the same location and order and make sure it’s available on every slide or page. 

While the previously mentioned guidelines are concerned with the location and the order, criterion 3.2.4 Consistent Identification (AA) relates to the naming convention of recurring elements. It requires that components that have the same functionality are labelled consistently. 

One common example is a search bar that content designers label either with text that reads “Search” or “Find”, or even with just a magnifying glass icon. Consistency means using only one of these methods throughout the content. This also applies to text, buttons, links and icons. So for example, an icon that is used throughout the course should have the same alt text. Equally,  a link that is mentioned a few times but takes users to the same page should have the same link text. Another example is a button that submits answers to quiz questions. It should have the same text instead of using “Submit” or “Check” interchangeably. 

The reverse is also true. This means that for example if a checkmark icon is used for different purposes in the course, the labelling should reflect that.  If it’s used to indicate a correct answer, the alt text should say something like “Checkmark icon for correct answer”, but if it’s used in a table to show that the data has been verified, the alt text should say something like “ Checkmark to indicate verified data”. 

Resources:

• Read the full criteria for WCAG 3.2.3: WCAG 3.2.3 Consistent navigation (w3.org)

• Read the full criteria for WCAG 3.2.4: WCAG 3.2.4 Consistent identification (w3.org)

• Read the full criteria for WCAG 3.2.6: WCAG 3.2.6 Consistent help (w3.org)

Discussion questions:

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

• Is consistent navigation something that you need to ensure yourself with your authoring tool? 

• Do you have more examples of inconsistent navigation or identification?

• What other things should learning content creators be consistent with?

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