We want all learners to interact as fully as possible with the courses you create in Rise 360. We know it’s important to you as well. That’s why accessibility is a critical part of our roadmap. Below we’ve put together a journal of the work we’ve done so far. And we’ll keep this updated as we continue our accessibility journey.

Improving Color Contrast

August 14, 2020 

Most people don’t give a second thought to color contrast and how it affects design. But it has a marked effect on how you and your learners approach Rise 360. 

If the contrast between elements is too stark, like black checkboxes on a white background, it can make things feel a little basic. Conversely, if the contrast is too subtle, like light grey boxes on a white background, it becomes harder for learners with low vision to experience the full impact of your content. 

That’s why we’ve gone through and closely examined the color contrast and opacity of the following elements and made adjustments. They’re more accessible, while still ensuring your learners enjoy the high-end design they’ve come to expect from Rise 360. Here’s what we’ve done to improve contrast in Rise 360:

  • Darkened the color of the X icon in the search bar 
  • Increased the default opacity of the text on image blocks to improve readability 
  • Improved the contrast of unselected step counters in process blocks
  • Ensured that the “Click to Flip” text on flashcard blocks doesn’t appear lighter than what you pick in block settings
  • Darkened the colors for several knowledge check elements, including radio buttons, checkboxes, text field borders, and drag-and-drop borders
  • Darkened the border color for the interactive elements of sorting activities
  • Increased the opacity on the unselected dots and darkened the progress arrows for quote carousels 
  • Replaced the download icons for the attachment block with more accessible alternatives

The improvements we made in this update follow these WCAG criteria: 1.4.3 (Level AA), 1.4.11 (Level AA) 

Improving Sidebar Accessibility

May 28, 2020

The sidebar is more than just a menu. It displays a list of lessons and sections and also functions as a results box when you use the search bar. We wanted to make it even easier to access the information in the sidebar when using just the keyboard or a screen reader. 

Keyboard Navigation

When you use the Tab button to navigate, you should only be able to interact with the elements displayed on the screen. We made sure that you can’t press Tab to access lessons hidden under collapsed section headers in the sidebar. 

Also, when the sidebar itself is hidden completely by the course author, we found that you could still tab to the search field. Not only is that not accessibility compliant, but it can bypass author intent. We changed this and now you can’t access the search field if the sidebar is hidden.

Speaking of restricted course navigation, if the learner is required to take a quiz to continue in a course, there are several visual cues, including a pop-up tooltip. Those tooltips now display when a user tabs to a lesson they can’t yet access.

The improvements we made in this update follow these WCAG criteria: 1.4.13 (Level AA), 2.1.1 (Level A), 2.4.3 (Level A), 4.1.2 (Level A)

Screen Reader Support

Since the sidebar does so much, we wanted to make sure that screen readers properly announced each section. We labeled each individual portion of the sidebar with its true function, rather than having the entire element announced as a “menu.”

Search Field

Searching from the sidebar needed additional tweaks to make it work better with screen readers. This was tricky. After all, we’re taking a section of the interface you usually use to navigate and turning it into something completely different—a search field and results list. Now, screen readers announce if the sidebar is displaying search results or the course outline. 

We reworked the icons as well. The X that closes the search field was announced simply as “X,” so we gave it more context. Now, screen readers announce that button as “Close the Search Form.” Much more descriptive! We also hid the magnifying glass icon from screen readers since it’s purely decorative.

The improvements we made in this update follow these WCAG criteria: 1.1.1 (Level A), 1.3.6 (Level AAA)

Progress Indicator 

As you scroll through a lesson in Rise 360, one thing happening in the periphery is that the “progress pie” fills up in the sidebar as you reach completion. For quiz lessons, you can glance at the sidebar and see if you passed or failed based on their icons. They’re nice visual reminders when you return to a course of how far along you are and how you’re doing.

Screen readers now announce the lesson title as well as the current recorded progress as a percentage. If it’s a quiz lesson, the screen reader announces if you passed or failed that quiz previously.

And to support our sidebar labeling effort, all of these lessons are now listed as buttons with the necessary pressed and unpressed states.

The improvements we made in this update follow these WCAG criteria: 1.1.1 (Level A), 1.3.6 (Level AAA)

Sidebar Control

Learners can collapse and expand the sidebar using the menu icon (☰) in the upper left corner of the lesson content. And now, screen readers announce the icon's function so visually impaired learners know what it does: “Open/Close Lesson Sidebar.”

The improvements we made in this update follow these WCAG criteria: 1.3.6 (Level AAA), 4.1.2 (Level A)

 

Be the first to comment