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: 10/1/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: block behavior is not sufficiently predictable for screen readers; reading forward can cycle images/carousel slides without screen reader user being informed

Theme color contrast

Rise will deploy the assigned theme color in a number of ways:

• Link text
• Buttons
• List block list icons
• Various components in Knowledge Check blocks
• And more

Which means, the theme color will likely need to achieve the WCAG color contrast requirements for a few different color pairings and usages, most notably:

• 4.5:1 contrast with white (#FFFFFF), for normal-sized link text set against white backgrounds and possibly for white button text (depending on your theme contrast setting)
• Possibly 4.5:1 contrast with black (#000000), for black button text (depending on your theme contrast setting)
• 3:1 contrast with white, for buttons and list icons against white backgrounds
• 3:1 contrast with black, for buttons when they receive the black focus indicator

If you utilize non-white backgrounds for certain lessons or blocks, the theme color may also need to achieve contrast requirements with those colors, depending on how it's used in those lessons or blocks.

While custom CSS can be deployed to avoid or achieve some of these contrast requirements, it won't work for all of them, and in general, the easiest way to ensure color contrast requirements are met is to assign a theme color that can achieve at least 4.5:1 contrast with white and at least 3:1 contrast with black, if not 4.5:1 contrast. This will limit your color options, as the range of colors that can achieve both of these contrast requirements is rather narrow, but if you do find such a color, you will be far less reliant on custom CSS.

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.)

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.

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.

Heading hierarchy

Rise now allows developers to assign heading levels 2 through 5 to much of the text within a Rise course. However, certain fields within certain blocks will not be able to receive heading assignments, while other fields will remain automatically programmed as headings of certain levels; keep this limitation and these automatic headings in mind as you craft each lesson's heading hierarchy.

The following heading levels are automatically assigned for the following fields and blocks, and cannot be changed:

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
  
• 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)
   • Explore the “Addressing focus not landing at start” section of the Updated eCourse Accessibility Checklist (pdf) to learn more about this recommended step and its purpose

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.