WCAG 2.1 & eLearning

Overview

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape unless a specific display orientation is essential.

Key messages

• Devices can be used in any orientation.
• Supported platforms: Articulate Storyline, Articulate Rise 360, Adobe Captivate Classic, Adobe Captivate 2023.

How to implement

• Don't lock content to either portrait or landscape presentation.
• Use show/hide controls to ensure content is accessible in various orientations. Use responsive design function in authoring tools.

How to test

• Computer Browser: Open the website or app on a computer browser. Resize the browser window. Take note of any content that becomes invisible or confusing due to resizing.
• Tablet: Open the website or app on a tablet and check if the same issues are present as on the computer.
• Mobile Phone: Open the website or app on a mobile phone. Rotate the phone to view it in both portrait and landscape modes. Make note of issues.

Reminder: If smaller devices are unavailable, resizing the browser on a computer can still provide valuable insights into the touch device interactions.

Examples of design failure and design success

Criteria failure: When the phone is flipped into portrait mode the video player stays locked in that orientation, displaying at a 90-degree angle to the user.

Criteria success: When the phone is flipped into portrait mode the video player also changes to orientate to the user’s perspective.

Testing tools

• Browser and software platform zoom

References

• What is Responsive E-Learning and Why Does it Matter?
• Storyline 360: Restricting Which Mobile Device Orientations Learners Can Use
• Storyline 3: Responsive Player FAQs
• Responsive Project Design with Adobe Captivate Classic
• Adobe Captivate Classic - Create Your First Responsive Project

Overview

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

• Vertical scrolling content at a width equivalent to 320 CSS pixels.
• Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content that require a two-dimensional layout for usage or meaning.

• Examples of content that require a two-dimensional layout (and two-dimensional scrolling is acceptable to use) are images needed for understanding context (such as maps and diagrams), video, presentations, and data tables (not individual cells). It is acceptable to provide two-dimensional scrolling for such parts of the content.

Key messages

• This success criterion intends to enable to support people with low vision who need to enlarge text and read it in a single column, without scrolling to find content that is hidden off-screen.
• Supported platforms: Articulate Storyline, Articulate Rise 360,
• Partially supported platforms: Adobe Captivate Classic*, Adobe Captivate 2023*

Barriers

Content authors will find that their ability to enable content reflow is limited by default application or website behavior and is largely out of their ability to control.

How to implement

• Make text reflow within the width of the viewport.
• Use the responsive web design approach to allow users to zoom to 400%. Provide options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.
• Avoid horizontal scrolling when writing in most languages. People are used to reading text vertically in columns. So, when your content gets larger, reflow it into a single vertical column.

How to test

• Enable your authoring tool’s player setting to include the Accessible Text option, if applicable Zoom in by 400%.
• For content read horizontally, check that all content and functionality is available without horizontal scrolling.
• For content read vertically, check that all content and functionality is available without vertical scrolling.
• If the browser can not zoom to 400%, you can reduce the width or height of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960 pixels wide.

Examples of design failure and design success

Criteria failure: Enlarging text causes text to expand outside the viewport resulting in horizontal and vertical scroll bars.

Criteria success: Enlarging text causes text to remain within the horizontal confines of the viewport. The user only needs to scroll vertically to easily view all the text.

Testing tools

• Browser or software program zoom

Overview

The visual presentation of the following has a contrast ratio of at least 3:1 against adjacent color(s):

• User Interface Components - Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author.
• Graphical Objects - Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Key messages and examples

• This success criterion ensures that important visual information meets the same minimum contrast required for larger text, achieving a 3:1 contrast ratio with the background.
• W3 describes the term "graphical object" as applying to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram, such as each line in a graph.
• For simple graphics, such as single-color icons, the entire image is a graphical object.
• Only graphical objects necessary for user understanding need to contrast with their surroundings.
• Supported platforms: Articulate Storyline, Articulate Rise 360, Adobe Captivate Classic, Adobe Captivate 2023

Exceptions

SC 1.4.11 is not a requirement when:

• The graphic is part of a logo or logotype, which is considered essential to its presentation.

Examples of exempt images

Exceptions to this rule apply when changing the color alters the meaning. For instance, modifying the colors in flags, photography, and heatmaps would change the meaning, so they are exempt.

How to implement

Ensure meaningful visual cues achieve 3:1 against the background.

User Interface Component contrast

• Use an author-supplied, highly visible focus indicator

Graphics with sufficient contrast

• Ensure that a contrast ratio of 3:1 is provided for icons.
• Provide sufficient contrast at the boundaries between adjoining colors.

Text in or over graphics

• Include labels and values with the graphic.
• Ensure that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text.
• Provide a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast.

How to test

Examples of design failure and design success

Criteria failure: This example fails the 3:1 contrast requirement against the white background. It is difficult to distinguish the various sections of the chart and the key is difficult to read.

Criteria success: Adjusting the pie chart colors and adding a black border to both the chart and the key increased readability.

Criteria failure: The first example fails the Use of color criterion due to relying on yellow and white hues. The second example fails the Non-text contrast criterion due to the yellow (#FFF000) to white contrast ratio of 1.2:1.

Criteria success: Two examples which pass this success criterion, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill.

Criteria failure: Buttons do not meet contrast ratio minimum of 3:1 against white background. The white text color of the 2nd button also does not have the necessary 3:1 color contrast against green background.

Criteria success: Buttons meet criteria by addition of black border that meets the 3:1 color ratio against the background. Other examples also meet the criteria. Buttons do not need text or borders if contrast ratios are met and there is some indication of its function.

Testing tools

• WebAIM Contrast Checker or Colour Contrast Analyser
• Colblindor’s Coblis Color Blindness Simulator

Training

• Office of Accessibility’s WCAG 2.1 and Content Authoring training page
• Office of Accessibility’s Word eLearning Module 3: Working with Colors
• W3C Schools: Understanding non-text contrast

References

• Understanding 1.4.11 Non-Text Contrast (AA)
• Keep Minnesota Bright: Understanding WCAG 2.1, 1.4.11 Color contrast for non-text items
• How to Improve Non-text Contrast: Color Schemes and Interface Components (Understanding Success Criteria 1.4.11 Non-text Contrast)
• More Attractive, Engaging, Accessible: How To Use Color With Intention
• WebAIM Contrast and Color Accessibility: Understanding WCAG 2 Contrast and Color Requirements

Overview

For content implemented using markup languages that support the following text style properties, setting all of the following without changing any other style property ensures no loss of content or functionality:

• Line height (line spacing) to at least 1.5 times the font size.
• Spacing subsequent paragraphs to at least 2 times the font size.
• Letter spacing (tracking) to at least 0.12 times the font size.
• Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not utilize certain text style properties in written text can conform by using only the applicable properties for that specific language and script combination.

Key messages

• Users can adjust text spacing to make it easier to read.
• Supported platforms: Articulate Storyline, Adobe Captivate Classic, Adobe Captivate 2023.
• Partially supported platforms: Articulate Rise 360.

How to implement

• Ensure content adapts to user-defined text settings.

User Interface Component contrast:

• Allowing for text spacing override.
• Allowing for text spacing without wrapping.

How to test

The goal is to ensure text remains easily readable in a variety of conditions.

• Assess text styles: Examine the text styles related to colors, width, alignment, and line spacing (leading).
• Zoom controls: Use the browser’s zoom controls to magnify the content up to 200 percent. Take note if any horizontal scrolling is necessary to read the text.
• Accessibility testing: To gauge readability, conduct tests with individuals who have visual disabilities including blind and visually impaired people with functional sight, as well as dyslexic individuals.

For elements which contain text that is intended to wrap:

• Set zoom level to 100%.
• Use a tool or another mechanism to apply the text spacing metrics (line height, paragraph, letter, and word spacing), such as the Text Spacing bookmarklet or a user-style browser plugin.
• Check that all content and functionality is available (e.g., text in containers is not truncated and does not overlap other content).

Examples of design failure and design success

Criteria failure: Text overlaps when user overrides spacing because it was not designed to the metrics specified in this Success Criterion.

Criteria failure: Text gets cut off when user overrides spacing because it was not designed to the metrics specified in this Success Criterion.

Criteria success: Author designed the metrics specified in this Success Criterion so that text overlap doesn't occur when overriding the spacing.

Criteria success: Author designed the metrics specified in this Success Criterion so that text cut-off does not occur when overriding the spacing.

Testing tools

• Browser or software program zoom

Overview

When pointer hover or keyboard focus causes additional content to appear and disappear, ensure the following conditions are met:

• Dismissible - A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content.
• Hoverable - If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing.
• Persistent - The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and not modified by the author.

Key messages

• More users can perceive and dismiss non-persistent content.
• Supported platforms: Articulate Rise 360, Adobe Captivate Classic, Adobe Captivate 2023.
• Partially supported platforms: Articulate Storyline.

How to implement

• If hover or focus causes content changes, ensure the interaction is predictable.
• Make content on focus or hover hoverable, dismissible, and persistent.

How to test

Mouse hover test:

• Move your mouse around and observe if any elements appear or disappear when you hover over them.
• Ensure that the content that appears on hover is dismissible and remains visible if you continue hovering over it.

Keyboard focus test:

• Tab through all the elements on the page.
• Note any content that appears or disappears when focused on specific elements.
• Verify that there is a way to dismiss the content if it appears and that it remains persistent when focused.

Reminder: Test hover and focus interactions thoroughly to ensure a seamless user experience.

Examples of design failure and design success

Criteria failure: When the mouse hovers over the menu button it opens a list of pages. When hovering the mouse over the list, the list disappears.

Criteria success: When the mouse hovers over the menu button it opens a list of pages. When hovering the mouse over the list, it remains visible.

Testing tools

• WebAIM Contrast Checker or Colour Contrast Analyser

References

In most authoring platforms this success criteria will be achieved by customizing the state of hoverable objects.

• Storyline 360: Adding and Editing States
• How to create hover state button in Adobe Captivate 2019
• States in Adobe Captivate (2023)

Overview

If a keyboard shortcut is implemented in content using only letters (including upper- and lower-case letters), punctuation, numbers, or symbol characters, then at least one of the following is true:

• Ability to turn off - A mechanism to disable the shortcut is available.
• Remappable - A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt).
• Active only on focus - The keyboard shortcut for a user interface component is only active when that component has focus.

Key messages

• Reduce accidental activation of keyboard shortcuts.
• Ensure character-only shortcut keys can be turned off or modified.
• Easy to discover available keyboard shortcuts.
• Supported platforms: Articulate Storyline, Adobe Captivate Classic, Adobe Captivate 2023
• Platforms N/A: Articulate Rise 360

How to implement

Ensure character-only shortcut keys can be turned off or modified.

• Provide a mechanism to allow users to remap or turn off character key shortcuts.

How to test

• Become familiar with the functions of your authoring tool. Not all authoring tools will allow you to design with all three options. Remember – you only need to design with one (Turn off, Remap, or Active only on focus) to meet the Success Criteria.
• Test across different devices and assistive technologies to ensure you can’t accidentally trigger a keyboard shortcut that is not intended.
• If you cannot meet the Success Criteria with your authoring tool, best practice dictates that you should not include keyboard shortcuts in your course design.

Examples of design failure and design success

Criteria failure: The author has not enabled Accessibility controls in the Player so the user cannot turn Keyboard Shortcuts off.

Criteria success: The author has enabled Accessibility Controls in the Player so the user can toggle Keyboard Shortcuts on/off as they wish.

Testing tools

• Keyboard only for every character

References

• Storyline 360: Accessible Player Controls
• Accessibility and Keyboard Shortcuts in Adobe Captivate Classic

Overview

All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture unless a multipoint or path-based gesture is essential.

This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).

Key messages

• Let users operate touchscreens with one finger and reduced gestures.
• Supported platforms: Articulate Storyline, Adobe Captivate Classic, Adobe Captivate 2023.
• Platforms N/A: Articulate Rise 360.

How to implement

Provide single-point operation for all functions.

• Provide controls to achieve the same result as path-based or multipoint gestures.
• Provide single-point activation for a control slider.

How to test

• Take time to manually interact with your website or app to test features.
• Be aware of interactions that require path-based gestures and offer no single-pointer alternative, even if they aren’t deployed on a touch screen device.
• Example: Can sliders be moved with a keyboard or only by clicking and dragging a mouse?

Examples of design failure and design success

Criteria failure: Only offering the option of using a path-based “pinch to zoom” gesture to change the map view.

Criteria success: Offering a single-pointer option in addition to the “pinch to zoom” gesture method of changing the map view.

References

• Use single-pointer gestures (instead of path-based gestures)

Overview

For functionality that can be operated using a single pointer, at least one of the following is true:

• No Down-Event: The down-event of the pointer is not used to execute any part of the function.
• Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion.
• Up Reversal: The up-event reverses any outcome of the preceding down-event.
• Essential: Completing the function on the down-event is essential.

Functions that emulate a keyboard or numeric keypad key press are considered essential.

This requirement applies to web content that interprets pointer actions (i.e., this does not apply to actions that are required to operate the user agent or assistive technology).

Key messages

• Reduce accidental activation of controls.
• The technique applies to any technology that supports pointer input (e.g., supporting any or all of the following: mouse pointer, touch on the touch screen or trackpad, stylus input, or laser pointer input).
• Supported platforms: Articulate Storyline, Articulate Rise 360, Adobe Captivate Classic, Adobe Captivate 2023

How to implement

Make pointer cancellation predictable and consistent.

• Ensure that drag-and-drop actions can be cancelled.
• Use native controls to ensure functionality is triggered on the up-event.

How to test

• Take the time to manually review your course to ensure all necessary pointer cancellations are present.
• Ensure that all buttons and pointer-based interactions have an up-event execution or provide alternative execution methods.

Examples of design failure and design success

Criteria failure: The button's down event executes the function making pointer cancelation impossible.

Criteria success: The function is not executed by the up event rather than the down event allowing the pointer to be canceled by dragging the pointer off of the button.

References

In most authoring platforms this success criteria will be achieved by customizing the state of interactive objects, such as buttons, with programming for normal, hover, and down states.

• Storyline 360: Adding and Editing States
• How to create hover state button in Adobe Captivate 2019
• States in Adobe Captivate (2023)
• Prevent Accidental Pointer Input

Overview

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Key messages

• The visual label for controls is a trigger for speech activation.
• Two important principles of accessible name: 
• All interactive elements must have an accessible name. 
• An element can only have one accessible name.
• Supported platforms: Articulate Storyline, Articulate Rise 360
• Partially supported platforms: Adobe Captivate Classic, Adobe Captivate 2023

How to implement

Where practical, make the control’s text label and name match.

• Include the text of the visible label as part of the accessible name
• Match the accessible name to the visible label

How to test

• The most accurate way to test this success criteria is with a screen reader user who can also visually review the screen.
• Other automated testing tools such as Deque Axe and IBM Accessibility Checker can check for programmatic labels. It is encouraged to work with an experienced Developer with these tools.

Examples of design failure and design success

Criteria failure: The alt text tag does not match the text labeling on the object

Criteria success: The alt text tag matches the text labeling on the object.