When you’re building online courses, there’s one question that should be at the forefront of your mind: can everyone access this? Accessibility in online courses isn’t just a box to tick—it’s about making sure that every learner, regardless of their abilities, can engage with your content and have an equal opportunity to learn.
So, what does accessibility in online courses actually mean? In simple terms, it’s the practice of designing courses and learning materials that work for people with a wide range of abilities, including those with visual, auditory, motor, and cognitive impairments. This means thinking about things like captions for videos, screen reader compatibility, keyboard navigation, and clear, readable design. The goal is to remove barriers that might prevent anyone from fully participating in your course.
Why Accessibility Matters
Accessibility in online courses might sound like considerable extra work, but here’s what you need to know: when you design with accessibility in mind from the start, you’re not only meeting legal requirements—you’re also creating a better learning experience for everyone. Research shows that accessible design benefits all learners, not just those with disabilities. Features like clear navigation, well-organised content, and flexible presentation options improve comprehension, reduce cognitive load, and increase engagement across your entire learner population.
The Business Case for Accessibility in Online Courses
Beyond creating an inclusive learning environment, accessibility in online courses makes solid business sense. The global market of people with disabilities and their families controls an estimated $13 trillion in spending power. In education specifically, accessible online courses expand your potential reach significantly—approximately 15% of the global population lives with some form of disability.
The financial implications are clear: 71% of users with disabilities will abandon a digital platform that presents access barriers, redirecting their business to competitors with more accessible offerings. Additionally, organisations that prioritise accessibility in online courses from the beginning save substantially on remediation costs. Research indicates that fixing an accessibility bug during the requirements phase costs approximately $100, but waiting until production can increase that cost to $10,000 or more. When you factor in potential legal expenses and lost revenue, the return on investment for proactive accessibility becomes undeniable.
Legal and Regulatory Requirements
Accessibility in online courses is also a legal requirement in many regions. In the European Union, the Web Accessibility Directive (Directive (EU) 2016/2102) mandates that all public sector websites and mobile applications meet Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards. The European Accessibility Act (Directive (EU) 2019/882), which came into force in June 2025, extends these requirements to private sector organisations providing digital services, including educational institutions and eLearning providers.
In North America, Title II of the Americans with Disabilities Act (ADA) applies to public educational institutions, whilst Title III extends to private schools, colleges, and universities. Digital accessibility lawsuits have risen dramatically—educational institutions faced over 16,000 Title III lawsuits between 2017 and 2023 alone. Courts have consistently ruled that websites and online learning platforms must be accessible to individuals with disabilities.
These legal frameworks reference international standards, particularly WCAG 2.1 AA (currently) and increasingly WCAG 2.2 AA. WCAG 2.2, released in October 2023, introduced nine new success criteria focused primarily on mobile accessibility, cognitive accessibility, and visual accessibility. Whilst WCAG 2.1 AA remains the current compliance standard for most regulations, WCAG 2.2 represents the evolution of these guidelines, and future standards—including EN 301 549 v4.1.1 (releasing in 2026)—will incorporate WCAG 2.2 requirements. Understanding both versions positions your courses to meet not only current compliance obligations but also emerging regulatory expectations.
Now that we understand why accessibility in online courses matters, let’s explore the 18 essential aspects you need to consider when creating accessible online courses
18 Aspects of Accessibility
1. Text Alternatives for Non-Text Content
Every image, graphic, chart, and icon in your course should have alternative text (alt text) that describes its content and function. Screen readers rely on alt text to convey visual information to learners with visual impairments.
When adding images to your course, include concise, descriptive alt text that explains what the image shows and why it’s relevant. For decorative images that don’t convey information, use null alt text (alt="") so screen readers skip them. For complex diagrams or charts, provide extended descriptions in adjacent text or through linked resources.
Example code:
xml<!-- Informative image -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Four-stage learning cycle diagram showing experience, reflection, conceptualisation, and experimentation" title="18 Aspects of Accessibility in Online Courses: Create Inclusive eLearning 1" data-lazy-src="learning-cycle.png"><noscript><img decoding="async" src="learning-cycle.png" alt="Four-stage learning cycle diagram showing experience, reflection, conceptualisation, and experimentation" title="18 Aspects of Accessibility in Online Courses: Create Inclusive eLearning 1"></noscript>
<!-- Decorative image -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="decorative border" title="18 Aspects of Accessibility in Online Courses: Create Inclusive eLearning 2" data-lazy-src="decorative-border.png"><noscript><img decoding="async" src="decorative-border.png" alt="decorative border" title="18 Aspects of Accessibility in Online Courses: Create Inclusive eLearning 2"></noscript>
2. Captions and Transcripts for Multimedia
All video content should include accurate captions, and audio content should have text transcripts. This supports learners who are deaf or hard of hearing, those in sound-sensitive environments, and non-native speakers.
Use professional captioning services or tools like YouTube’s caption editor, Rev, or Otter.ai. Ensure captions are synchronised, include speaker identification, and describe relevant sounds. Provide downloadable transcripts alongside all multimedia content.
3. Audio Descriptions for Video Content
For videos where visual information is essential to understanding (such as demonstrations, experiments, or visual processes), provide audio descriptions that narrate important visual details during pauses in dialogue.
Either create an alternative version of the video with integrated audio description, or provide a separate audio track that learners can enable.
4. Clear and Consistent Navigation
Course navigation should be predictable, logical, and consistent throughout. Learners should always know where they are in the course and how to move between sections.
Use a clear hierarchical structure with logical labelling. Implement breadcrumb navigation showing the current location. Ensure navigation elements appear in the same location on every page and use consistent terminology. Consider adding a “skip to main content” link for keyboard users to bypass repetitive navigation.
Example code:
xml<a href="#main-content" class="skip-link">Skip to main content</a>
<nav aria-label="Course navigation">
<ol class="breadcrumb">
<li><a href="/course-home">Course Home</a></li>
<li><a href="/module-2">Module 2</a></li>
<li aria-current="page">Lesson 2.3: Accessibility Principles</li>
</ol>
</nav>
<main id="main-content">
<!-- Main course content -->
</main>
5. Keyboard Accessibility
All interactive elements and course navigation must be fully accessible using only a keyboard, without requiring a mouse. Many learners with motor disabilities rely exclusively on keyboard navigation.
Ensure all buttons, links, form fields, and interactive elements can be accessed using the Tab key, activated with Enter or Space, and that focus order follows a logical sequence. Avoid keyboard traps where focus gets stuck. Test your entire course using only your keyboard—if you can complete all activities and navigate all content without a mouse, you’re on the right track.
Key keyboard interactions:
- Tab: Move forward through interactive elements
- Shift + Tab: Move backward
- Enter: Activate links and buttons
- Space: Activate buttons and toggle checkboxes
- Arrow keys: Navigate within components like dropdown menus or tab panels
- Escape: Close modals and dismiss menus
Example implementation for custom dropdown:
xml<button aria-expanded="false" aria-haspopup="true" id="menu-button" onclick="toggleMenu()">
Module Menu
</button>
<div role="menu" aria-labelledby="menu-button" hidden>
<a href="/lesson-1" role="menuitem">Lesson 1</a>
<a href="/lesson-2" role="menuitem">Lesson 2</a>
<a href="/lesson-3" role="menuitem">Lesson 3</a>
</div>
<script>
function toggleMenu() {
const button = document.getElementById('menu-button');
const menu = button.nextElementSibling;
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
menu.hidden = isExpanded;
}
</script>
6. Screen Reader Compatibility
Your course content should be structured using semantic HTML so that screen readers can properly interpret and announce content to learners with visual impairments.
Implementation: Use proper HTML elements (<header>, <nav>, <main>, <article>, <aside>, <footer>) rather than generic <div> elements. Structure content with heading tags (<h1>, <h2>, <h3>) in hierarchical order. Use <button> for actions and <a> for navigation. Mark up lists with <ul>, <ol>, and <li> tags, and use <table> elements with proper <th> headers for tabular data.
When standard HTML isn’t sufficient for complex interactive components, use ARIA (Accessible Rich Internet Applications) attributes to provide additional context—but remember, semantic HTML should always be your first choice.
ARIA principles:
- No ARIA is better than bad ARIA: Only use ARIA when HTML alone can’t convey the necessary meaning
- Use semantic HTML first: A
<button>is better than<div role="button"> - Don’t override native semantics: Never do
<button role="heading">
Common ARIA attributes:
xml<!-- Labelling -->
<button aria-label="Course navigation">X</button>
<div role="region" aria-labelledby="section-title">
<h2 id="section-title">Module Overview</h2>
</div>
<!-- States -->
<button aria-expanded="true" aria-controls="content-panel">
Show Details
</button>
<!-- Live regions for dynamic updates -->
<div aria-live="polite" role="status">
<p>Quiz submitted successfully!</p>
</div>
<!-- Hiding decorative content -->
<span aria-hidden="true" class="icon-decoration">★</span>
7. Logical Reading Order
Content should be structured so that it makes sense when read sequentially by screen readers, even if visual layout suggests a different order.
Test your content with a screen reader (NVDA, JAWS, or VoiceOver) to verify the reading order follows a logical sequence. Use CSS for visual positioning rather than manipulating the HTML source order. Ensure that content flows naturally from top to bottom and left to right (or according to the language’s reading direction).
8. Accessible Documents and Resources
Any downloadable resources—PDFs, Word documents, PowerPoint presentations, or spreadsheets—must also be accessible.
Implementation for PDFs: PDFs must be properly tagged with structural markup to be truly accessible. Simply saving a Word document as PDF doesn’t guarantee accessibility. Use Adobe Acrobat Pro or similar tools to:
- Add or verify document tags for all content elements
- Establish proper heading hierarchy (H1, H2, H3)
- Tag tables with header rows and proper table structure
- Add alt text to all images and graphics
- Set document properties (title, language, metadata)
- Define reading order to ensure logical flow
- Tag form fields with appropriate labels and descriptions
- Create bookmarks for lengthy documents
- Run the accessibility checker to identify issues
For Word, PowerPoint, and Excel documents:
- Use built-in heading styles rather than manual formatting
- Add alt text to all images and graphics
- Use simple table structures with designated header rows
- Ensure sufficient colour contrast
- When exporting to PDF, select accessibility options
9. Semantic HTML Structure
Use HTML elements according to their intended semantic meaning, not just for visual styling.
Use <h1> for your main page title, <h2> for major sections, <h3> for subsections, and so on. Don’t skip heading levels. Use <p> for paragraphs, <ul> or <ol> for lists, <table> for tabular data, and <button> for actions. This semantic structure creates a clear content hierarchy that assistive technologies can navigate.
10. Sufficient Colour Contrast
Text and important visual elements must have sufficient contrast against their background to be readable by learners with low vision or colour blindness.
Implementation: WCAG 2.1 and 2.2 require specific contrast ratios:
- 4.5:1 minimum contrast ratio for normal text (less than 18pt or 14pt bold)
- 3:1 minimum contrast ratio for large text (18pt and larger, or 14pt bold and larger)
- 3:1 minimum contrast ratio for graphics and user interface components (such as icons, buttons, and form field borders)
Use contrast checking tools like WebAIM’s Contrast Checker, Colour Contrast Analyser, or browser extensions to verify your colour combinations meet these standards. Test with various colour combinations during the design phase, not after development is complete.
Examples:
- ✓ Black text (#000000) on white background (#FFFFFF) = 21:1 ratio (exceeds requirements)
- ✓ Dark grey text (#595959) on white background (#FFFFFF) = 7:1 ratio (meets AA standard)
- ✗ Light grey text (#767676) on white background (#FFFFFF) = 3.9:1 ratio (fails for normal text)
11. Don’t Rely on Colour Alone
Information shouldn’t be conveyed through colour alone, as this creates barriers for learners with colour blindness or using monochrome displays.
Implementation: When using colour to convey meaning—such as red for incorrect answers or green for correct ones—always include additional indicators like icons, text labels, patterns, or shapes. For example, pair red with an X icon and green with a checkmark, or use labels like “Correct” and “Incorrect” alongside colour coding.
Example in quizzes:
xml<!-- Poor: Colour only -->
<p style="color: red;">Wrong answer</p>
<!-- Better: Colour plus text indicator -->
<p class="incorrect">
<span aria-hidden="true">✗</span> Wrong answer
</p>
<!-- Best: Colour, icon, and semantic meaning -->
<div role="alert" class="feedback-incorrect">
<svg aria-hidden="true" class="icon-error">
<use xlink:href="#icon-x"></use>
</svg>
<strong>Incorrect:</strong> The mitochondria is the powerhouse of the cell, not the nucleus.
</div>
12. Resizable Text
Learners should be able to increase text size up to 200% without losing content or functionality.
Use relative units like em, rem, or percentages for font sizes rather than fixed pixels. Ensure your course design remains functional when users zoom their browser or adjust text size settings. Test by zooming to 200% and verifying that all text remains visible, readable, and doesn’t overlap with other elements.
13. Clear and Simple Language
Course content should be written in clear, straightforward language appropriate for your audience. Complex terminology should be explained, and sentence structures should be as simple as possible whilst maintaining accuracy.
Write concise sentences. Define technical terms when first introduced. Use active voice. Break complex concepts into smaller, manageable chunks. Provide glossaries for specialised vocabulary. This benefits all learners, particularly those with cognitive disabilities, learning difficulties, or those learning in a second language.
14. Accessible Assessment Formats
All assessments, quizzes, and assignments must be accessible to learners using assistive technologies and accommodate various learning needs.
Design assessments that:
- Allow sufficient time for completion, with options to extend time for learners who need accommodations
- Provide multiple formats for demonstrating knowledge (written, oral, video, portfolio)
- Include clear instructions using simple language
- Ensure all question types are keyboard accessible and work with screen readers
- Offer alternative assessment methods when standard formats create barriers
Adaptive Testing Considerations:
- Implement adjustable time limits with clear warnings before expiration
- Allow learners to save progress and return later
- Provide options to adjust text size, colour schemes, and background contrast within the assessment interface
- Enable question review and navigation (when appropriate for the assessment type)
Accessible Question Types:
- Multiple choice: Ensure all options are clearly labelled and keyboard navigable
- True/False: Use radio buttons with clear labels rather than requiring typed responses
- Drag-and-drop: Always provide keyboard alternatives for repositioning items
- Fill-in-the-blank: Clearly identify blank spaces with proper labelling for screen readers
- Essay/Short answer: Ensure text areas are properly labelled and provide adequate space
ARIA implementation for accessible quiz navigation:
xml<div role="group" aria-labelledby="question-1-text">
<p id="question-1-text">
<strong>Question 1:</strong> What does WCAG stand for?
</p>
<fieldset>
<legend class="visually-hidden">Select one answer</legend>
<label>
<input type="radio" name="q1" value="a">
Web Content Accessibility Guidelines
</label>
<label>
<input type="radio" name="q1" value="b">
Website Creation and Graphics Guidelines
</label>
</fieldset>
</div>
<nav aria-label="Course navigation">
<button type="button" onclick="previousQuestion()">Previous Question</button>
<span aria-live="polite" aria-atomic="true">Question 1 of 10</span>
<button type="button" onclick="nextQuestion()">Next Question</button>
</nav>
15. Mobile Accessibility
With WCAG 2.2’s increased focus on mobile accessibility, ensuring your courses work effectively on smartphones and tablets is more critical than ever. The shift to mobile learning continues to accelerate, and many learners access educational content exclusively through mobile devices.
Apply mobile-specific WCAG 2.2 considerations:
Touch Target Size:
- Ensure all interactive elements (buttons, links, form controls) meet minimum size requirements
- WCAG 2.2 Level AA requires target sizes of at least 24×24 CSS pixels
- Best practice recommends 44×44 points (iOS) or 48×48 dp (Android) for optimal usability
- Provide adequate spacing between touch targets to prevent accidental activation
Gesture-Based Interactions:
- Avoid requiring complex gestures (multi-point gestures, path-based gestures) as the only means of operation
- Provide simple single-pointer alternatives for all functionality
- Don’t rely solely on device motion (shaking, tilting) without offering alternative input methods
Screen Orientation and Responsive Design:
- Support both portrait and landscape orientations
- Don’t restrict content to a single orientation unless essential
- Ensure content reflows properly across different screen sizes
- Test with various mobile devices and screen dimensions
Focus Handling on Mobile:
- Ensure focus indicators are visible on mobile devices
- Implement proper focus management when opening and closing modals or menus
- Test keyboard navigation on mobile devices with external keyboards
- Verify screen reader compatibility on iOS (VoiceOver) and Android (TalkBack)
Mobile-specific code example:
`css*/* Adequate touch target sizes */*
.mobile-button {
min-width: 44px;
min-height: 44px;
margin: 8px; */* Spacing between targets */*
}
*/* Responsive text that scales appropriately */*
body {
font-size: 16px; */* Minimum recommended for mobile */*
line-height: 1.5;
}
*/* Ensure proper viewport settings */*`
`xml<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Testing: Regularly test your courses on actual mobile devices, not just desktop browsers with responsive design modes. Use both iOS and Android devices, and test with mobile screen readers enabled.
16. Descriptive Links and Buttons
Link text and button labels should clearly describe their destination or function, not just say “click here” or “read more.”
Use descriptive, meaningful text that makes sense out of context. Screen reader users often navigate by jumping between links, so each link should be understandable on its own.
Examples:
- ✗ “Select for the assignment rubric”
- ✓ “View assignment rubric (PDF, 2 pages)”
- ✗ “Read more”
- ✓ “Read more about cognitive load theory”
17. Time Limits and Timed Activities
If your course includes timed activities, learners must have the ability to extend or disable time limits.
Provide options to extend time before it expires, pause activities, or disable time limits altogether. Warn learners well in advance when time is running out. Consider whether time limits are truly necessary for learning objectives, or whether they create unnecessary barriers.
18. Regular Testing and Reviews
Accessibility isn’t a one-time checklist—it requires ongoing evaluation and refinement as you add and update content.
Implementation: Establish a regular accessibility testing schedule using both automated tools and manual testing:
Automated Testing Tools:
- WAVE (Web Accessibility Evaluation Tool): Browser extension that visualises accessibility issues directly on your pages
- axe DevTools: Browser extension providing detailed accessibility analysis
- Lighthouse: Built into Chrome DevTools, provides accessibility audits alongside performance metrics
- NVDA or JAWS: Windows screen readers for comprehensive testing
- VoiceOver: macOS and iOS built-in screen reader
- TalkBack: Android screen reader
Manual Testing Process:
- Keyboard-only navigation: Navigate through your entire course using only the keyboard
- Screen reader testing: Test with at least one screen reader to verify content is announced correctly
- Contrast verification: Check all colour combinations meet WCAG standards
- Zoom testing: Increase text size to 200% and verify layout remains functional
- Mobile testing: Test on actual mobile devices with touch interaction and mobile screen readers
Testing Checklist:
- All images have appropriate alt text
- Videos include captions and transcripts
- All functionality works with keyboard only
- Colour contrast meets WCAG standards (4.5:1 for normal text, 3:1 for large text)
- Headings are properly structured and hierarchical
- Forms have clear labels and error messages
- Links are descriptive and meaningful
- Content is responsive and works on mobile devices
- Screen readers can navigate and understand all content
- Time limits can be extended or disabled
Involve learners with disabilities in your testing process when possible. Their lived experience provides invaluable insights that automated tools and able-bodied testers might miss.
Choosing the Right LMS
Your choice of Online Training Platforma or Learning Management System (LMS) significantly impacts your ability to create and deliver accessible content. Not all platforms offer equal accessibility features, so understanding the strengths and limitations of popular options helps you make informed decisions.
Key considerations when selecting an LMS:
- Verify the platform’s stated WCAG conformance level (aim for 2.1 AA minimum, with 2.2 AA for future-proofing)
- Test the platform yourself using keyboard-only navigation and screen readers
- Evaluate the accessibility of the content authoring tools, not just the learner-facing interface
- Check whether the platform includes built-in accessibility checking tools
- Consider integration with third-party accessibility tools (like Anthology Ally)
- Review the vendor’s accessibility roadmap and commitment to ongoing compliance
Regardless of which platform you choose, remember that the LMS provides the foundation, but content creators bear ultimate responsibility for ensuring course materials meet accessibility standards. Even the most accessible platform can deliver inaccessible content if designers don’t follow best practices.
Common Accessibility Failures and How to Avoid Them
Even well-intentioned course designers frequently make accessibility mistakes. Being aware of these common pitfalls helps you avoid them:
1. Missing or Poor Alt Text
- Failure: Using “image” or filename as alt text, or leaving alt text empty for informative images
- Solution: Write descriptive alt text that conveys the image’s purpose and content. For decorative images, use null alt text (
alt="")
2. Skipping Heading Levels
- Failure: Jumping from H1 directly to H3, or choosing headings based solely on visual appearance
- Solution: Maintain strict hierarchical order (H1 → H2 → H3) to create proper document structure
3. Using Colour Alone to Convey Information
- Failure: Marking errors in red without text labels or icons
- Solution: Combine colour with text, icons, patterns, or other visual indicators
4. Insufficient Colour Contrast
- Failure: Light grey text on white backgrounds that doesn’t meet 4.5:1 ratio
- Solution: Test all colour combinations with contrast checking tools before implementing
5. Inaccessible PDFs
- Failure: Sharing scanned documents or untagged PDFs
- Solution: Create PDFs from accessible source documents, add proper tagging, and verify with accessibility checkers
6. Keyboard Traps
- Failure: Creating interactive elements that keyboard users can focus on but can’t exit
- Solution: Ensure all interactive elements can be both entered and exited using standard keyboard commands
7. Auto-Playing Media
- Failure: Videos or audio that play automatically without user control
- Solution: Give learners control over media playback with visible play/pause controls
8. Complex Tables Without Proper Markup
- Failure: Using tables for layout, or data tables without header row markup
- Solution: Use CSS for layout, and properly mark table headers with
<th>elements and scope attributes
Moving Forward with Accessibility
Creating accessible online courses is an ongoing journey, not a destination. Start with these 18 essential aspects, prioritise the most impactful changes first, and build accessibility into your design process from the beginning rather than treating it as an afterthought.
Remember that accessibility improvements benefit everyone. Captions help learners in noisy environments or those who prefer reading to listening. Clear navigation benefits learners who are easily distracted. Simple language helps learners with cognitive disabilities, non-native speakers, and anyone encountering complex new concepts. When you design for accessibility, you’re designing for human diversity—and that makes for better learning experiences across the board.
The investment in accessibility delivers measurable returns: broader market reach, reduced legal risk, lower long-term development costs, and improved learner satisfaction and outcomes. As regulations continue to evolve toward WCAG 2.2 standards and beyond, building accessibility into your process now positions you for compliance with future requirements whilst simultaneously expanding your educational impact.
Rather than asking “Can I afford to make my courses accessible?”, perhaps the more appropriate question is “Can I afford not to?”
Select the heading and arrow below to view additional resources on accessibility.
Web Content Accessibility Guidelines
- W3C Web Content Accessibility Guidelines (WCAG) 2.1
- W3C Web Content Accessibility Guidelines (WCAG) 2.2
- W3C Guidance on Applying WCAG 2.2 to Mobile Applications
European Legislation
- Web Accessibility Directive (EU) 2016/2102
- European Accessibility Act (EU) 2019/882
- EN 301 549 V3.2.1 (European Standard for ICT Accessibility)
American Legislation and Standards
Testing Tools
Screen Readers
- NVDA (Free, Windows)
- JAWS (Commercial, Windows)
- VoiceOver (Built-in, macOS/iOS)
- TalkBack (Built-in, Android)
Additional Resources
Note, that this post provides general information about accessibility in online courses.
It is important always to consider the specific context and requirements of your learning projects. If you have any questions or would like to delve deeper into the topic, please email me or book a free online consultation via my contact page.
Make sure to check out my other posts related to planning online courses, designing and developing learning content and delivering training. I share strategies and tools that you can use and many practical tips.
