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.
Feedback is Fundamental
April 7, 2022
No, really, it is! After all, when you take a quiz or answer a knowledge check, knowing why an answer is right or wrong is nearly as important as getting it correct in the first place. In this update, we've improved feedback performance in screen readers so that it's clear to users when they're in the feedback field. We've also improved functionality for those using Android Talkback, allowing them to interact with the feedback text.
Oh, and one quick dip into the world of Windows high contrast mode (which we talked about last week), we've made it so that the continue block's border and that bullets in the bullet block are visible as expected.
March 31, 2022
There's a very clear rule when it comes to accessibility and non-text elements in an interface: they must have at least a 3:1 contrast ratio between the element and the background. Now, there are contrast checkers and utilities that we use to help ensure the Rise 360 interface meets that ratio. But when users employ something that fundamentally changes baseline contrast, like Windows High Contrast mode, it gets harder to maintain that golden ratio.
Harder. But not impossible.
In this update, we've continued the work started earlier this month, ensuring that interface elements are easily visible, even if you're employing a high-contrast system setting.
In Windows High Contrast mode, we adjusted the following items so that they're not washed out in light or dark contrast modes.
- Sidebar selected lesson
- Course hamburger menu (those three little lines in the upper-left-hand corner)
- In quote and gallery blocks, the next and previous arrows
For the following interface elements, we increased or, in some cases, eliminated hover contrast:
- Course Overview
- Start/Resume course button
- Details button
- Search/Close Search icons
- In Scenario blocks, the continue button
- In quote and gallery carousel blocks, the slide selection icons and previous and next arrows
We also removed an unnecessary tooltip that appeared when hovering over the lesson progress icon.
And this is just the beginning. We're dedicated to ensuring that everyone can easily use Rise 360, no matter how they meet us. We'll be back soon with even more improvements!
March 4, 2022
There's a point when you're working on something, anything, where you've got a few big parts squared away but haven't yet started the next round of big changes. You want to move forward, but there are smaller bits that you need to get just right before you do.
We've been busy for the past month fine-tuning accessibility in Rise 360, getting the small things just right and the finer details dialed in before moving on to the next big thing.
- Windows High Contrast Mode:
- When you selected a radio button (like when clicking a multiple-choice answer in a quiz) in either white or black high contrast mode, it wouldn't appear selected. We've improved radio button selection visibility in these modes.
- In white high contrast mode, the search button wasn't visible.
- On Android devices using Talkback:
- Some blocks were announced twice as users navigated through lessons.
- Decorative graphics, which shouldn't be announced, were being announced.
- We added a "close modal" label to the labeled graphic information pop-up.
- We also improved the experience with chart blocks in Microsoft Edge browsers. Now, screen readers announce the chart headers as expected.
The improvements we made in this update follow these WCAG criteria: Non-text Content 1.1.1 (Level A), Non-text Contrast 1.4.11 (Level AA), Headings and Labels 2.4.6 (Level AA), Focus Visible 2.4.7 (Level AA)
Screen Reader, Contrast Improvements, and More
January 14, 2022
This week's changes focus on improving the user experience and making it easier for everyone to access their courses, however they're interacting with Rise 360. Here's what we've been up to in these first couple of weeks of the new year.
For screen readers, we tweaked the tab block so that hidden previous and next buttons are no longer announced and eliminated redundant landmarks.
For contrast requirements, the audio progress track is now black so it's always clearly visible and we darkened the sidebar Search label so that it meets requirements.
We also improved table interactions so you can access all columns of a table, even when your screen is at 400% zoom.
The improvements we made in this update follow these WCAG criteria: Info and Relationships 1.3.1 (Level A), 1.4.10 (Level AA), Non-text Contrast 1.4.11 (Level AA), Focus Order 2.4.3 (Level A), Reflow Localization and Focus Improvements
Localization and Focus Improvements
December 14, 2021
And we're back! It's been nearly a year since our last update but that doesn't mean we haven't been working on accessibility. In fact, our developers have been working behind the scenes to bring a focus on accessibility to all of our new and upcoming features.
Along those lines, we have one new enhancement and three new fixes that help us get a little closer to our goal of an inclusive Rise 360 experience.
- You can now localize the video player in one of 16 languages. This is based on the language you choose for your text labels.
- On mobile devices with VoiceOver enabled, focus would land on a hidden item after you submitted a quiz answer. Now, when you submit an answer, focus lands on the feedback as intended.
- When tabbing to the Next button, the highlight color wasn't WCAG-conformant. We've changed the behavior to make it consistent with the Previous button, which doesn't change color when tabbed to.
- We've improved the responsiveness of quizzes and knowledge checks on mobile devices so that they're easier to read.
And we're just getting warmed up. Watch this space for more details on our accessibility plans for 2022.
Section 508 and Improved Accessibility for Labeled Graphic Blocks
January 28, 2021
When U.S. agencies present information and offer services, what they produce must be accessible to persons with disabilities. To ensure they’re in compliance, those agencies (and folks that produce content for them) abide by the Revised Section 508 standards.
To make it easier for those working with the U.S. government, we’ve added Section 508 criteria to our Rise 360 accessibility report.
Labeled Graphic Blocks
Labeled graphic blocks are a great way to bring visual flair to your courses and let learners explore at their own pace. However, especially if paired with a white background, the default labeled graphics markers need more contrast to meet accessibility guidelines.
That’s why authors now have the ability to modify their markers with a handy color picker. Found in the labeled graphic block settings, the color picker lets you quickly change the color of all your markers either by entering the hex code, using the brand color, or selecting a custom color of your choice.
Other improvements to the labeled graphic block include:
- Markers are now read as an ordered list by screen readers.
- Screen readers announce marker icons as part of the marker.
- The marker state (whether or not it’s been viewed) is also announced by screen readers.
- When you open a marker, you’ll now tab into the content first instead of the controls for a more user-friendly experience.
- Closing a marker label with the ESC key brings the focus back to the marker.
- When you navigate away from an open marker label, it closes automatically.
With these upgrades in place, we can now say that the labeled graphic blocks are 100% accessible!
The improvements we made in this update follow these WCAG criteria: Non-text Content 1.1.1 (Level A), Info and Relationships 1.3.1 (Level A), Descriptive Labels 2.4.6.b (Level AA), Name, Role, Value 4.1.2.a (Level A)
December 2, 2020
In the past few weeks, we improved screen reader responses for quizzes and knowledge checks. For multiple choice and multiple response questions, it’s obvious when learners enter list elements. Additionally, keyboard navigation makes it clear when a choice has focus. Answer reviews and reveals are now accessible to screen readers, and feedback announcements are more intuitive. The quiz results page follows a logical order with fewer distractions, making it easier for learners to understand their results.
With these latest updates, we now officially support NVDA, JAWS, VoiceOver, and TalkBack screen readers with Rise 360 courses. Our goal is to ensure that learners who rely on screen readers have as satisfying and rich of a learning experience as everyone else when exploring Rise 360 courses.
Today we also released a Voluntary Product Accessibility Template® (VPAT®) that outlines the WCAG Level A and Level AA criteria conformance for Rise 360.
With our VPAT® in place, we’re confident that Rise 360 now provides an accessible learning experience. Of course, meeting the criteria is only the first step. Our accessibility work is ongoing. In the coming months we’ll dive deeper to make even more improvements and address the exceptions we listed in our VPAT®. We want to ensure that everyone has the best Rise 360 experience possible, no matter what.
The improvements we made in this update follow these WCAG criteria: Info and Relationships 1.3.1 (Level A), Meaningful Sequence 1.3.2 (Level A), Keyboard 2.1.1 (Level A), Focus Order 2.4.3 (Level A), Focus Visible 2.4.7 (Level AA), Name, Role, Value 4.1.2 (Level A)
Ensuring Alternate Text Is Available Where It’s Needed
September 15, 2020
Alternative text (alt text) is a key element of accessibility. With the multitude of image-based blocks in Rise, we made sure you can add alt text to your images and that screen readers announce that text elegantly.
First, we went through our image blocks and verified that alt text is only read once by screen readers. This includes:
- Image Centered
- Image Full Width
- Image & Text
- Text on Image
- Image Carousel
- Image Grids (2, 3, and 4 column)
- Labeled Graphic marker images (not the background image)
- Knowledge Checks
If there are images in these blocks that don’t have alt text, screen readers ignore the tag and just announce them as images or read the file name.
To wrap things up, we addressed click-to-zoom images. Screen readers now announce a zoom button for images. The interface won’t be any different for sighted users but ensures those who use screen readers have a comparable experience. When users zoom in on an image, screen readers announce the alt text associated with it for context.
The improvements we made in this update follow these WCAG criteria: Info and Relationships 1.3.1 (Level A), Meaningful Sequence 1.3.2 (Level A), Parsing 4.1.1 (Level A), Name, Role, Value 4.1.2 (Level A)
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
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.
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.
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.”
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.
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.
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.”