Rise accessibility best practices

This web page is intended to assist developers in the creation of accessible Articulate Rise eCourses and reflects but does not represent the UC Information Technology Accessibility Policy (pdf) or an official effort toward policy compliance.

For general eCourse accessibility guidance and Storyline 360-specific accessibility guidance, please refer to the eCourse Accessibility Checklist (pdf).

This page was last updated: 3/26/24.

Assistive technology compatibility

Avoid blocks that do not provide an equivalent experience for users who employ common assistive technologies, including both keyboard navigation and screen readers.

For example, as of the last page update, the following blocks should likely be avoided:

  • Sorting activity interactive block: can be operated through keyboard navigation but cannot currently be operated by screen readers
  • Carousel gallery block and Quote carousel block: have certain controls that currently can only be operated with a mouse and cannot be operated through keyboard navigation or screen readers

Ensuring and enhancing focus indicator visibility

The keyboard navigation focus indicator appears around certain Rise buttons and links in a way that may not pass the WCAG SC relevant to focus indicator visibility. This can be addressed in one of two ways:

1. Use a sufficiently contrasting button color

By default, Rise uses a black (#000000) focus indicator, so if the button color is one that achieves at least 3:1 contrast with black, the focus indicator should be sufficiently visible.

2. Add custom CSS

If the button color does not achieve 3:1 contrast with the black (#000000) focus indicator, the focus indicator will need to be offset from the button using custom CSS so that sufficient contrast along both the indicator’s outside and inside edges can be achieved.

Custom CSS also affords opportunities to expand the white background area behind the focus indicator that certain elements receive so the focus indicator is more visible.

Steps for adding CSS to a published Rise eCourse

Follow these steps to add custom CSS to a published Rise eCourse. You can watch these steps being demonstrated in this Adding Custom CSS to a Rise eCourse video.

  1. Publish the Rise eCourse as you normally would
  2. Unzip the resulting published eCourse
  3. In the unzipped folder, find the index.html file and open it using a program that allows you to edit HTML/CSS
    • The index.html file is typically contained in a "scormcontent" or "content" subfolder
    • Notepad (PC) and TextEdit (Mac) can be used to edit HTML/CSS
  4. Search the index.html file for a <style> section, defined by <style> </style> tags
  5. Copy the HTML/CSS from the CSS for Interactive block buttons section below
    • If a <style> section already exists, do not include the <style> </style> tags in what you copy from the provided HTML/CSS 
    • If there is no <style> section, include the <style> </style> tags in what you copy from the provided HTML/CSS
  6.  Paste the copied HTML/CSS into the index.html file
    • If a <style> section already exists, paste the HTML/CSS into it
    • If there is no <style> section, paste the HTML/CSS immediately before the index.html file's </head> tag
  7. Consider if the lesson navigation link CSS rule is needed as well, and if so, copy it below and paste it into the index.html file's <style> section
  8. Consider if the Start/Resume Course button CSS rule is needed as well, and if so, copy it below and paste it into the index.html file's <style> section
  9. Save the index.html file
  10. Re-zip the entire eCourse folder
  11. Upload this zip to your LMS or server
CSS for Interactive block buttons

This is the primary block of custom CSS, including <style> </style> tags, you'll add to a published Rise eCourse's index.html file.

(As mentioned in Step #5 further above, do not include the <style> </style> tags in what you copy from below and paste into the index.html file if the index.html file already has <style> </style> tags in its <head> section.)

<style>
.continue-btn:focus {outline-offset: 5px !important;}
.quiz-card__button:focus {outline-offset: 5px !important;}
.process-card__start:focus {outline-offset: 5px !important;}
.blocks-button__button:focus {outline-offset: 5px !important;}
.scenario-block__text__continue:focus {outline-offset: 5px !important;}
.block-flashcards-slider__arrow:focus, .block-flashcards-slider__arrow--next:focus {outline-offset: 5px !important;}
.process-arrow:focus, process-arrow--right:focus {outline-offset: 5px !important;}
</style>
CSS for lesson navigation links

If you do not end a lesson with a Continue button (as recommended), Rise will automatically add a link directing learners to the next lesson. If you use the Navigation Button Theme controls to give these links a background color that does not achieve 3:1 contrast with black, add the following CSS rule to your <style> section, as well. It will expand the white background behind the focus indicator, making it more visible.

.lesson-nav-link__link:focus {border: white solid 8px !important;}
CSS for Start/Resume Course button

If you want to increase focus indicator visibility around the Start/Resume Course button on the course start page, you can also add the following CSS rule to your index.html file’s <style> section.

However, please note, you may need to adjust the focus indicator color (“white,” in the “2px solid white” portion) depending on the button’s background: if the button’s background is white or a color that does not achieve 3:1 contrast with white (#FFFFFF), use “black” as the focus indicator color; if the button’s background is dark and does not achieve 3:1 contrast with black (#000000) but does achieve 3:1 contrast with white, leave “white” as the focus indicator color.

a.cover__header-content-action-link.overview__button-enrolled:focus {transform: scale(1.05); outline: 2px solid white; outline-offset: 5px;}

Heading hierarchy

Developers currently have limited abilities to assign headings within Rise: headings cannot be assigned manually to any given paragraph; rather, certain fields within certain blocks will automatically be programmed as headings of certain levels. So, you must organize your content into lessons and choose which blocks to use in each lesson based on what creates a heading hierarchy that correctly communicates the relationships between content.

The following heading levels are assigned for the following fields and blocks:

Heading 1

Lesson titles

Heading 2

  • Heading field within Heading text blocks
  • Heading field within Paragraph with heading text blocks
  • Certain media added through Multimedia blocks will produce two consecutive H2s
    • E.g., If you add a YouTube or Vimeo video through its URL (as opposed to through its iFrame embed code), "YouTube" or "Vimeo" will be as one H2, and the video's title will be read as another
  • Each Item title field within Accordion interactive blocks
  • Each Step title field within Process interactive blocks
  • Each Heading field within text content within Scenario interactive blocks
    scenario block edit view with highlights around text in the content type menu and the add heading field
  • Each Date field within Timeline interactive blocks
  • Chart title field for all Chart blocks

Heading 3

  • Subheading field within Subheading text blocks
  • Subheading field within Paragraph and Subheading text blocks
  • Each Event title field within Timeline interactive blocks

Screen reader recommendation

JAWS is the screen reader found to be most compatible with Rise eCourses. Other screen readers, like NVDA and VoiceOver, can be used, but they’ve been known to exhibit minor irregularities that are not experienced with JAWS.

These irregularities should not prevent users from being able to fully engage within, and complete, a Rise eCourse; however, they may impact the user experience. For example, with screen readers other than JAWS, when new content loads within a lesson page — such as when new dialogues open within a Scenario interactive block or when a new slide or layer opens within an embedded Storyline project — focus may not land at the start of the new content and instead may land toward the end of that new content, requiring users to read backwards.

eCourse instructions should recommend JAWS as the screen reader that provides the optimal experience and describe the focus landing irregularity that may be experienced with other screen readers, so users can prepare accordingly.

Storyline integration

Storyline projects embedded in Rise have been known to exhibit screen reader behavior some users may find sub-optimal and prefer avoiding: specifically, when navigating to a new slide within an embedded Storyline project, screen reader users may experience screen reader focus being pulled outside the project, requiring them to re-read through the project’s embed structure before they encounter the project’s contents.

This problem can be easily avoided by slightly adjusting the approach you take when developing the Storyline project:

  1. Create a new layer within the slide
  2. Assign this new layer the “Prevent users from clicking on the other layers” layer property
  3. Add a trigger to the slide’s base layer that will show the new layer when the slide’s timeline begins
  4. (Recommended) Try to ensure that the layer element that is highest in the slide’s Focus Order has fewer than 100 characters (of text or alt text)

The “Prevent users from clicking on the other layers” layer property serves to pull screen reader focus to the element in the layer that is highest in the slide’s Focus Order, thus keeping screen reader focus within the Storyline project and preventing the suboptimal behavior described at the start of this section.

Continue buttons and next lesson links

Avoid including Continue buttons at the end of lessons, and instead, only use them to facilitate in-lesson content reveals.

This helps create a more consistent screen reader experience. When Continue buttons are included at the end of a lesson, they perform a behavior — navigating users to a new web page/lesson — that is commonly associated with hyperlinks; whereas, revealing additional content within the current web page/lesson is a behavior consistent with common button functionality.

If you do not include a Continue button at the end of a lesson, Rise will automatically add a link to the next lesson.

Again, try to only use Continue buttons to reveal more content within a lesson.