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: 6/4/26.

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.

As of this page's last update, no blocks were found to be entirely incompatible (but full assistive technology testing should still be conducted with every build). The Sorting activity interactive block and Carousel gallery block had previously presented significant barriers for screen readers, but those issues appear to have been addressed.

Notes block

This block does not currently provide a way to alt tag its icon, so if an icon is used, ensure the block's text equivalently conveys any message intended by the icon you've used.

Bar chart and Line chart blocks

Recent testing has found that once a screen reader user "activates" one of these charts in order to read its individual items, it can be difficult to exit the block. It may be worth informing screen reader users in advance of engaging with these blocks that they can, and might have to, use the Tab key or Shift+Tab combo to move their screen reader out of the chart.

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: Adding Custom CSS to a Rise Course video demonstration.

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, 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's heading-related functionality has greatly expanded, allowing developers to assign heading levels 2-5 to most Rise text and most block titles.

However, some heading levels are still automatically assigned  and cannot be changed; those include:

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

Heading 3

• Subheading field within Subheading text blocks
• Subheading field within Paragraph and Subheading text blocks
• The "Audio transcript" title in an Audio block's Show transcript pane

Screen reader recommendation

Recent testing has found minimal difference between how NVDA and JAWS engage with Rise content, so this page no longer recommends one over the other or that one be recommended over the other to users, leaving it instead to individual user preference.

Continue buttons and next lesson links

Avoid using a Continue button as the very last element in a lesson.

When a Continue button is included at the end of a lesson, it performs a behavior — navigating users to a new lesson/web page* — that is commonly associated with hyperlinks, not buttons. Encountering such a button may confuse screen reader users and inhibit their ability to understand and/or operate the environment.

*In a Rise course, each lesson is a stand-alone web page.

If you do not include a Continue button at the end of a lesson, Rise will automatically include, at the end of the lesson, a link to the next lesson. This should be easier for screen reader users to understand and operate, as it represents a hyperlink performing a behavior — navigation — commonly associated with, and expected from, hyperlinks.

It is acceptable to use a Continue button anywhere else within a lesson. When included anywhere else within a lesson, a Continue button will reveal more content within the lesson/web page, which is a behavior commonly associated with buttons, not links.

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 recommended 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