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.

This page was last updated: 10/13/25.

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

Alerting users to links opening in a new window/tab

Rise automatically adds to external links a screen reader-only alert that the link will open in a new tab. However, all users benefit from being informed of that behavior before activating links.

Adding an alert to link text — such as demo link that has no destination (opens in new window) — would inform non-screen reader users but would cause screen reader users to receive duplicative alerts.

One could argue that all users having access to this alert is worth the cost of screen reader users receiving it twice, but the ideal behavior would be for all users to receive that alert once. Thankfully, this can be accomplished through custom css. Jump to the Add custom CSS and CSS for link opens in a new window/tab alert sections of this page to learn more.

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 be easy to perceive, even if technical standards related to focus visibility are met. This can be addressed in one of two ways:

1. Use sufficiently contrasting button and/or background colors

By default, Rise adopts many of your web browser's focus indicator style rules, which vary from browser to browser, including the indicator color. You can strive to choose button and background colors that achieve high contrast with the browser's default indicator color(s), but make sure to test this with multiple browsers, as different browser's use different focus indicator colors.

2. Enhance visibility with custom CSS

If the button color does not achieve sufficient contrast with the focus indicator, or you just wish to make it more visible, offsetting the indicator from the button using custom CSS can help enhance perceivability.

Follow the instructions, and utilize the CSS, shared in the next section to offset the focus indicator for different button types within Rise.

Steps for adding CSS to a published Rise eCourse

Follow these steps to add custom CSS to a published Rise eCourse.

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 link opens in a new window/tab alert 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 CSS for Interactive block buttons 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 CSS for lesson navigation links is needed as well, and if so, copy it below and paste it into the index.html file's <style> section
9. Consider if the CSS for Start/Resume Course button is needed as well, and if so, copy it below and paste it into the index.html file's <style> section
10. Save the index.html file
11. Re-zip the entire eCourse folder
    • Note: some LMSs, including the UC Learning Center, may require that the eCourse be re-zipped in the following way:
      • In the File Explorer, navigate to the eCourse's root folder (i.e., the highest level of the eCourse folder you had unzipped)
      • Select all the folder's contents
      • Right-click on any of the selected items and choose Send to > Compressed (zipped) folder
      • The resulting zip file will be what you upload to your LMS; give it an appropriate name, and move it out of the folder it is currently in (so it is not included in any future re-zipping)
12. Upload the new zip to your LMS or server

CSS for link opens in a new window/tab alert

This custom CSS adds an arrow icon after external links, intended to inform users that the link will open in a new window/tab. (Remember: Rise automatically alerts screen reader users of this behavior.)

(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 Interactive block buttons

This custom CSS offsets the focus indicator for the buttons used in Interactive blocks. Add it within your <style> section, as well.

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
• The "Audio transcript" title in an Audio block's Show transcript pane

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.

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.

Disable zoom image

Most images added within Rise will have the "Enable zoom on image click" Format setting assigned by default. True to its name, this setting allows users to englarge an image by clicking on it. However, it does comes with a cost: the zoom function acts as an additional tab stop/focusable element assistive technology users will encounter, and depending on the block type and screen reader used, it may also overwrite an image being tagged as decorative and instead cause it to be recognized as an unlabeled graphic.

For keyboard navigators, it may be annoying to encounter a tab stop with each image, and for screen reader users, it may not only be annoying to encounter a "zoom image" button with each image but also confusing, if/when this setting causes them to encounter unlabeled graphics you intended to be hidden.

The following is recommened to account for this behavior:

1. Consider if the zoom function is really necessary or beneficial for an image; if it isn't, unselect the "Enable zoom on image click" setting (in the block's Format options) when first adding the image
2. If the zoom function is considered necessary/beneficial:
   • Give the image appropriate alt text so screen reader users don't encounter it as an unlabeled graphic
   • Strive to provide for screen reader users the same information/takeaway you intend for other users to receive by being able to view the image at a larger size: e.g., if there's some specific detail you hope users will see, describe that detail in the image caption, or in adjacent body text, so screen reader users can access it as well