Accessibility Demonstration
Experience the Difference: Accessible vs. Inaccessible E-Learning
Welcome! This interactive demonstration will show you the stark difference between accessible and inaccessible Articulate Storyline e-learning content using our built-in screen reader simulator.
Built-In NVDA-Style Screen Reader
This demo includes a simulated screen reader at the bottom of your screen. No installation required! It works just like NVDA with keyboard navigation.
NVDA-Style Keyboard Navigation
- ↓ ↑ - Navigate through ALL elements (like NVDA)
- H - Jump to next heading
- B - Jump to next button
- F - Jump to next form field
- E - Jump to next edit field (text input)
- G - Jump to next graphic/image
- L - Jump to next list
- I - Jump to next list item
- K - Jump to next link
- Ctrl + Plus/Minus - Zoom in/out (for Lights Out mode)
What You'll Experience
You'll complete two identical course modules:
- Demo 1 (Inaccessible): Poor accessibility - confusing and frustrating
- Demo 2 (Accessible): Proper accessibility - clear and efficient
Use arrow keys to navigate and watch what the screen reader announces!
Choose Your Experience
You can experience both demos normally, or challenge yourself with "Lights Out" mode.
Lights Out Mode
This mode blurs the screen, forcing you to rely on the screen reader. Zoom in to reduce the blur!
At 100% zoom: Heavy blur (10px) | At 200% zoom: Light blur (2px) | At 300% zoom: No blur
Demo 1: Inaccessible E-Learning Module
⚠️ Warning: This module has poor accessibility
Your Challenge
- Enter your name in the text field
- Click the "Next" button (use B key to jump to buttons)
- Click the "Submit" button
- Complete the module
Use arrow keys to navigate and watch the screen reader at the bottom!
Welcome to Introduction to E-Learning
Demo 1: Inaccessible E-Learning Module (Continued)
Complete Your Learning
Reflection Moment
How was that experience?
With the screen reader, you likely encountered frustrations like:
- Hearing just "graphic" without knowing what images represented
- Text input announced as just "edit" with no label
- Hearing "button, click here" multiple times without context
- Confusion about which button does what
- No clear indication of purpose
Now, let's experience the same module built with accessibility in mind.
Demo 2: Accessible E-Learning Module
✓ This module follows accessibility best practices
Your Challenge
- Enter your name in the text field
- Click the "Next Slide" button
- Click the "Submit Learning Module" button
- Complete the module
Notice the difference when using arrow keys and the screen reader!
Welcome to Introduction to E-Learning
Demo 2: Accessible E-Learning Module (Continued)
Complete Your Learning Module
Congratulations on reaching the final section!
Results: The Impact of Accessibility
Demo 1: Inaccessible
Time to complete
Frustration Level: High
Demo 2: Accessible
Time to complete
Frustration Level: Low
Key Takeaways
- Semantic HTML: Using proper elements like <header>, <main>, and <form> provides structure for screen readers
- Descriptive Labels: Clear labels and ARIA attributes help users understand what each element does
- Meaningful Button Text: "Next Slide" is far more helpful than "Click here"
- Alt Text for Images: Every image should describe its purpose or be marked as decorative
- Form Accessibility: Labels associated with inputs make forms usable for everyone
- Keyboard Navigation: All interactive elements must be keyboard accessible with visible focus indicators
- ARIA Attributes: aria-label, aria-describedby, and role attributes provide additional context
What You Can Do
When creating e-learning content in Articulate Storyline:
- Add alt text to all images and graphics
- Use descriptive text for buttons and links
- Include form labels for text inputs
- Test with a screen reader before publishing
- Ensure keyboard-only navigation works
- Provide transcripts for audio content
- Use sufficient color contrast