Inclusive Learning Design Rise 360

Accessibility in Action

Inclusive Design Training for L&D Teams

An interactive Rise 360 course that models accessibility and gives L&D teams practical skills they can apply right away.

Audience

alt=""

Internal L&D teams and instructional designers building Rise 360 eLearning with an accessibility focus.

My Role

alt=""

End-to-end instructional design, action mapping, storyboard, visual design, Rise build, accessibility QA, light code enhancements.

Key Challenge

alt=""

Compliance failures caused rework and delays. The project models practical, inclusive design that teams can apply right away.

The Problem

Elevate Learning Solutions, the internal L&D team at a fictional mid-sized tech company, had just adopted WCAG 2.1 AA standards. In their first compliance checks, over one third of training modules failed, creating costly rework and strained client relationships. Each failed course added 12 hours of extra work and delayed delivery timelines. Instructional designers lacked confidence and clear guidance to meet the new standards.

38% failure rate in the first compliance check

The Solution

I created Accessibility in Action, a self-paced Rise 360 course that gives L&D teams hands-on practice with accessible design. It focuses on the biggest gaps: clear alt text, true headings, strong color contrast, and testing with real tools. Users practice in short scenarios and see the impact through three fictional learners with different needs.

Learners reflect on their own course projects in the introduction and revisit that reflection in the final module. A final audit mirrors a client review so habits stick. The course models best practices with plain language, consistent high-contrast design, and screen reader-compatible interactions.

Self-paced learning with immediate application

Development Process

Action Mapping

Focusing on practical actions, not just knowledge.

The project began with a clear business goal: reduce accessibility compliance failures so fewer revisions were needed and client confidence improved.

I created an action map with subject matter experts that pinpointed the most important actions L&D teams must take, including:

  • Writing effective alt text

  • Structuring content with true headings

  • Checking color contrast

  • Testing with both tools and manual methods

This kept the course focused on what learners need to do, not just what they need to know. A Google Doc version of the map was also created so screen reader users could access it without barriers.

alt=""

Action map showing accessibility-focused tasks for L&D teams.

Storyboarding

Accessibility was built in from the very first draft.

I created a text-based storyboard as the blueprint for the course, layering content, interactions, visuals, and accessibility reminders block by block. This kept every lesson supportive from the start, rather than retrofitting accessibility later.

The storyboard guided the sequence into clear modules: content and structure, visuals, and testing. It also drove interaction choices that work with screen readers, such as flashcards and comparison sliders. Personas were threaded in as prompts so decisions stayed tied to real learners.

To keep the look consistent, I developed a style guide and visuals with checks like alt text for meaningful graphics and decorative tagging where appropriate.

Storyboarding Showcase

Click any image to view it at full size.

Style Guide and Visuals

Style Guide and Visuals

Accessibility Personas

Accessibility Personas

Text-Based Storyboard Page 1

Text-Based Storyboard Page 1

Text-Based Storyboard Page 2

Text-Based Storyboard Page 2

Development and Testing

Rise 360 + custom JavaScript. Multi-device testing.

I developed the course using Rise 360 with Mighty plugins and custom JavaScript for enhanced functionality. Throughout the build process, I continuously tested layouts across devices to ensure consistent spacing, headings, and button clarity at every screen size.

Testing During Build

  • Multi-device checks

  • Keyboard path

  • Quiz flow

  • Plain language pass

  • Performance basics

Custom enhancement: A Floating Resources button built with JavaScript keeps the glossary and checklist accessible from any screen, maintaining learner momentum without hunting for materials.

Resources button with glossary and checklist options.
alt=""

Tools & Technologies

The tools below enabled quick iteration, reliable accessibility checks, and an easy handoff to L&D.

Build + Design

Articulate Rise 360 Mighty plugin Custom JS/CSS Figma Adobe Photoshop Camtasia AI image generation Google Workspace

Testing

WAVE axe DevTools Lighthouse WebAIM Contrast Checker NVDA VoiceOver
Smartphones displaying course screens and accessibility examples.

Accessibility and Refinement

Accessibility checks built into every step.

Accessibility guided this project from the start. I chose colors, type, and interactions with inclusion in mind, avoided patterns that create barriers (like drag-and-drop), and kept visuals simple, high-contrast, and designed to work with screen readers.

Built into the workflow

  • Storyboard reminders: accessibility notes tied to Jordan, Amari, and Sky

  • Alt text: meaningful images described; decorative images skipped

  • Plain language: short sentences, clear link text, consistent headings

  • Predictable structure: same layout patterns and navigation

Before launch, I tested the course against WCAG 2.1 AA guidelines using automated scans and manual checks. I also kept an accessibility evidence log to track findings and fixes so decisions stayed consistent across modules. Anchoring the checks in personas helped me refine choices for real learners and aim for usability across devices and assistive tech.

Final Accessibility Audit

Color Contrast Screen Reader Keyboard Only Mobile Zoom Automated Scan Manual Review WCAG 2.1/2.2 AA Audited Images Reviewed Downloads Checked Motion/Animation

Results and Impact

What this course delivered, at a glance.

  • WCAG 2.1 AA

    Tested pre-launch

  • 3 Personas

    People-centered decisions

  • NVDA & VoiceOver

    Screen reader spot checks

  • Positive Peer Feedback

    Strong early impressions

Final Experience and Next Steps

Peer feedback and future evaluation planning.

Peers who reviewed the course said it flowed smoothly and that the visuals supported learning. One person mentioned it did not feel like a standard Rise template but instead looked custom, which made the experience more engaging.

The personas of Jordan, Amari, and Sky gave the course a human touch that helped reviewers connect with the content. By returning to their needs in the reflection, the course showed accessibility as designing for people, not just compliance.

If this project continued at Elevate Learning, the next step would be evaluation. I would gather accessibility review scores, learner surveys, and evidence of behavior change such as more consistent use of captions, alt text, and plain language. These insights would guide future updates and keep accessibility at the center of the design process.

Learners are asked to revisit Jordan, Amari, and Sky at the end of the course, considering how their own projects would meet each persona’s needs.

A closing reflection invites learners to identify one accessibility improvement they could apply to their own work, with a celebratory finish to mark progress.