Captivate Accessibility

Playbar

TOC

The Table of Contents comes after the slide in the reading order and does not include a navigation landmark or heading, making it difficult for screen reader users to find. (WCAG 1.3.1, 2.4.3)

The buttons are labelled "TOC" (pronounced “toc”) rather than "Table of Contents" which may be confusing. (WCAG 2.4.6)

The buttons in the TOC combine the slide title and the duration in their names, so that they are read as "title zero oh three button", which may be confusing. (WCAG 2.4.6) 

Slide Accessibility Text is read before the slide title/content and followed by the words "main region" or "main landmark", which may be confusing. With some screen readers (e.g., JAWS), Slide Accessibility Text is read again after the slide content. (WCAG 1.3.2) 

There is no way to include semantics (e.g., headings, lists) in Slide Accessibility Text. (WCAG 1.3.1)

Add Accessibility Text to all meaningful images and icons. Accessibility text should convey what an image communicates, not describe what it looks like.

• For images that show text - include the text shown in the image. Don’t add words like “image of”, “picture of,” “logo,” etc. 
• For buttons with icons - identify what the button does (e.g., “Next Slide”). Don’t include the word “button”.
• For complex images like charts or maps - explain what the image communicates; this may require lengthy accessibility text.
• For decorative images that don’t mean anything or are duplicative of text that is on screen - set “Hide from screenreader” instead of entering accessibility text.

Introduction

Title and image

See Text Blocks: Paragraph and Media Blocks: Image Grid.

Comparison

Meet the team

Character and text

See Media Blocks: Single Character.

Conversation

Some screen readers (e.g., JAWS) cannot "Click anywhere or press 'y' to continue". (WCAG 2.1.4)

The "Question" is not a heading. (WCAG 1.3.1)

Multiple choice

(See above)

When multiple answers are not allowed, Options appear as radio buttons but are marked up as checkboxes; there is no indication when only one answer is allowed. (WCAG 1.3.1, 4.1.2)

True or false

(See above)

Match the column

(See above)

Short answer

(See above)

Sequence

(See above)

Keyboard users may not recognize how to change the sequence. (WCAG 3.3.2)

Paragraph

Use Title for the slide title.

Use Subtitle for a sub-heading (if needed).

Use Body for regular text.

Use Title for the slide title.

Use Subtitle for sub-heading (if needed).

In Body, use Paragraph Spacing to add space between list items. (Do not press Enter to add blank lines between list items.)

Multi-Column Content

Titles are heading level 1 (h1).
Subtitles are heading level 2 (h2).
Bodies are not headings.

The ARIA Grid role appears to be implemented incorrectly and may trap some screen readers (e.g. JAWS) in forms mode. (WCAG 4.1.2)

Add a Paragraph block above the Multi Column block with a Title for the slide title.

Avoid using Column Titles.

Use Subtitles for column headings (if needed).

Image

Caption is a heading level 1 (h1) but comes after the Image in the reading order. (WCAG 1.3.2)

(Subtitle is not a heading.)

Add Accessibility Text to the image or, for decorative images, set "Hide from screenreader".

For meaningful images, add a Paragraph block above the Image with Title for the slide title and do not use Caption.

For decorative images, use Caption for slide title.

Use Subtitle for regular (non-heading) text.

Image Grid

Captions are heading level 1 (h1) but come after Images in the reading order. (WCAG 1.3.2)

(Subtitles are not headings.)

The ARIA Grid role appears to be implemented incorrectly and may trap some screen readers (e.g. JAWS) in forms mode. (WCAG 4.1.2)

Add Accessibility Text to images or, for decorative images, set "Hide from screenreader".

Add a Paragraph block above the Image Grid with Title for the slide title and do not use Captions.

Use Subtitles for regular (non-heading) text.

Single Character

Title is a heading level 1 (h1) but comes after the Image in the reading order. (WCAG 1.3.2)

Set image to "Hide from screenreader". (Do not use meaningful images.)

Use Title for the slide title.

Two Characters

The first image comes before the first speech bubble in the reading order; the second image comes after the second speech bubble in the reading order. (WCAG 1.3.2)

No component is a heading.

Add a Paragraph block above the Scenario block with a Title for the slide title.

Set both images to “Hide from screenreader”. (Do not use meanigful images.)

Slide Video

Slide Video plays automatically and cannot be controlled without the Playbar. (WCAG 1.4.2, 2.2.2)

Video

Titles are heading level 1 (h1) but come after Videos in the reading order. (WCAG 1.3.2)

The ARIA Grid role appears to be implemented incorrectly and may trap some screen readers (e.g. JAWS) in forms mode. (WCAG 4.1.2)

Add a Paragraph block above the Video block with a Title for the slide title, and do not use Video Titles.

Add Closed Captions to videos. See Captivate Video Guide.

Title is a heading level 1 (h1).

Use Title for title slide title.

Set Quote Start, Quote End, and Avatar images to "Hide from screenreader".

SVG

Titles are heading level 1 (h1) and Captions are heading level 2 (h2) and both come after SVGs in the reading order. (WCAG 1.3.2)

The ARIA Grid role appears to be implemented incorrectly and may trap some screen readers (e.g. JAWS) in forms mode. (WCAG 4.1.2)

Add Accessibility Text to SVGs or, for decorative images, set "Hide from screenreader".

For meaningful SVGs, add a Paragraph block above the SVG block with a Title for the slide title, and do not use SVG Titles or Captions.

Button

Make sure Button text indicates the function of the Button (e.g., “Next”, “Continue”).

Add Accessibility Text only if the Button shows only an Icon. (Do not include the word “button” in the Accessibility Text.)

Input Field

The Label is not programmatically associated with the field, but screen readers appear to guess correctly. Placeholder text is a value, not a placeholder, so it disappears after a new value is entered. (WCAG 1.3.1, 2.5.3, 4.1.2)

When using “Add Answers”, a validation error is shown only by a red outline and the field becomes unfocusable, so it is not possible to change the answer. (WCAG 1.4.1, 2.1.1)

Use Label text to indicate what should be entered in the field.

Do not put essential instructions in the placeholder.

Do not use “Add Answers”.

Radio Group

(None)

Dropdown

(None)

Use Label text to indicate what should be selected in the dropdown.

The Label is not associated with the checkbox. (WCAG 1.3.1, 4.1.2)

Checkboxes are not in a group. (WCAG 1.3.1, 4.1.2)

Use Option text to indicate the purpose of the checkbox.

Do not use multiple checkboxes in a group.

Cards

Multiple Flip Cards cause horizontal scrolling on small or magnified screens and do not have an obvious indication that scrolling is necessary. (WCAG 1.4.10)

Title is a heading level 1 (h1).

Card Titles are heading level 2 (h2) and Card Subtitles are heading level 3 (h3), but both come after Card Images in the reading order. (WCAG 1.3.2)

Flip buttons on Card Fronts do not have Accessibility Text. (WCAG 1.1.1, 4.1.2)

There are no flip buttons on Card Backs. (Card containers are focusable but do not have appropriate ARIA roles.) (WCAG 4.1.2)

Flip Card Container Accessibility Text is not read by screen readers. (WCAG 4.1.2)

Previous and Next Buttons do not have Accessibility Text. (WCAG 1.1.1, 4.1.2)

Use only one Flip Card per slide.

Use Title for the slide title. 

Add Accessibility Text to Card images, or, for decorative images, set "Hide from screenreader".

For meaningful images, do not use Card Titles or Subtitles.

For decorative images, do not use Card Subtitles without Titles.

Add Accessibility Text to flip  (“default_svg”) buttons, e.g., "Show Card 1".

Do not use content that requires flipping back to the Card Front. 

Do not use Flip Card Container Accessibility Text.

Add Accessibility Text to Previous and Next buttons, e.g., “Previous” and “Next”, or turn them off and use a Next/Back Button block.

Tabs

Tabs are very difficult to use with screen readers. 

Carousel

Carousels (which are implemented as Tabs) are very difficult to use with screen readers. 

Timeline Widget

Title is a heading level 1 (h1).

Captions are also heading level 1 (h1) but come before Images in the reading order. (WCAG 1.3.2)

(Subtitles are not headings.)

Node Accessibility Text is not read by screen readers. (WCAG 4.1.2)

Timeline Buttons do not have Accessibility Text. (WCAG 1.1.1, 4.1.2)

Use Title for slide title.

Add Accessibility Text to Timeline Buttons, e.g., "Show Event 1".

Add Accessibility Text to Images or, for decorative images, set "Hide from screenreader".

Do not use Captions.

Do not use Node Accessibility Text.

Add Accessibility Text to Previous and Next buttons, e.g., “Previous” and “Next”, or turn them off and use a Next/Back Button block.

Hotspot

Title is a heading level 1 (h1).

Callout Titles are not headings. (WCAG 1.3.1)

Hotspots do not have Accessibility Text. (WCAG 1.1.1, 4.1.2)

Hotspots do not indicate their expanded/collapsed state. (WCAG 4.1.2)

Callouts are read automatically when opened but cannot be re-read. (They are aria-hidden.) (WCAG 1.3.1)

Callout Group Accessibility Text is not read by screen readers. (WCAG 4.1.2)

Previous and Next Buttons do not have Accessibility Text. (WCAG 1.1.1, 4.1.2)

Use Title for slide title.

Add Accessibility Text to the background ("Hotspot_Widget_Image") image or, for decorative images, set "Hide from screenreader".

Add Accessibility Text to Hotspots, e.g., "Hotspot 1", "Hotspot 2", etc. (If possible, indicate what the hotspot is over on the background image.)

If Hotspots are moved from their original locations, set a logical tab order.

Add Accessibility Text to Callout Images or, for decorative images, set "Hide from screenreader".

Keep Callout text short.

Do not use Callout Group Accessibility Text.

Add Accessibility Text to Previous and Next buttons, e.g., “Previous” and “Next”, or turn them off and use a Next/Back Button block.

Click to Reveal

Some screen readers cannot click "Click to Reveal" buttons using standard keyboard commands. (The ARIA Button Pattern appears to be implemented incorrectly.) (WCAG 4.1.2)

Certificate

Title is a heading level 1 (h1).

Logo and Signature images do not have Accessibiity Text. (WCAG 1.1.1)

Use Title for slide title.

Add Accessibility Text to the Logo image, e.g., "Department of Something".

Add Accessibility Text to Signature, e.g., "Signed John Doe".

Drag and drop

Some screen readers cannot operate "Drag and Drop" comboboxes. (The ARIA Combobox Pattern appears to be implemented incorrectly.) (WCAG 4.1.2)

Button

(None)

Components other than buttons do not have ARIA roles that indicate they are interactive. (WCAG 4.1.2)

Hover and Mouse Over interactions cannot be triggered using keyboard commands. (WCAG 2.1.1)

Audio

Audio automatically plays and can conflict with screen reader speech. (WCAG 1.4.2)

Audio must have captions. (WCAG 1.2.2)

If using audio, use Interactions to mute audio (Assign Variable Project.MuteAudio to True) and add a slide at the beginning of the project with a "Continue with Audio" Button that users can click to activate audio (Assign Project.MuteAudio to False).

Add Closed Captions to all audio.

Animations

Animations may include flashing that can trigger photosensitive seizures. (WCAG 2.3.1)

Animations may be distracting. (WCAG 2.2.2) 

Do not use animations that flash more than three times in a second.

Do not use animations that last longer than five seconds, or provide a way to pause, stop, or hide them.

Demo

Simulation slides advance automatically and do not allow enough time for screen reader users to read slide content. The Playbar can be used to pause a simulation, but clicking Next or Prvious restarts automatic advancing. Adding Next and Previous Button components prevents automatic advancing, but cannot be added to slides that show dragging or scrolling. (WCAG 2.2.1)

If narrated, audio plays automatically and conflicts with screen reader speech. (WCAG 1.4.2, 2.2.2)

On small or magnified screens, simulations slides do not reflow or resize. (WCAG 1.4.10)

Use a Video block with a single video instead of a Simulation. See Captivate Video Guide. 

Training

(See above)

Hint text cannot be displayed using keyboard commands. (WCAG 2.1.1)

Hint text comes after slide content in the reading orders. (WCAG 1.3.2)

Screen readers cannot reliably interact with text fields. Pressing Enter to interact with a field does not cause the slide to advance.

Error messages are not read.

Assessment

(See above)

(See above)