Course Content with Multiple Issues
This represents typical course content that looks fine visually but has serious accessibility barriers.
Course Overview
By the end of this course, students will be able to identify key concepts and apply them in real-world scenarios. This text is very light gray and difficult to read.
Module 1
This module covers the basics. The content structure here is problematic.
Submit your work by clicking the button below. Make sure to follow all requirements. This text is also very light and hard to read for people with vision issues.
Important Notice
This is critical information that all students must read! The yellow background with orange text creates poor contrast.
Here are some links to external resources. This text is extremely light gray and nearly invisible.
Accessibility Problems in This Content
- Poor heading hierarchy: Multiple H1 tags used incorrectly, fake headers using div elements
- Low contrast text: Light gray text (#ccc, #aaa, #ddd) fails WCAG contrast requirements
- Missing alt text: Images have no alternative descriptions for screen readers
- Poor color contrast: Yellow background with orange text is unreadable
- Semantic structure: Important content sections not marked up as proper headings
- No image context: Users can't understand what the chart or decorative image represent
Impact on Users
⚠️ Real User Impact
- Screen reader users: Cannot navigate by headings, miss important sections
- Low vision users: Cannot read light gray text, even with magnification
- Colorblind users: May not be able to distinguish yellow/orange warning text
- Cognitive disabilities: Poor structure makes content hard to scan and understand
- Keyboard users: Cannot access content that's only conveyed through images
Try This
- Contrast Checker: Use a contrast analyzer on the light gray text - see how badly it fails
- Screen Reader: Try navigating by headings - notice the confusing structure
- WAVE Tool: Run WAVE to see all the contrast and structural errors
- Zoom Test: Zoom to 200% and try to read the light text
🎨 Try a Contrast Checker
Choose a foreground and background color to test their contrast ratio. Or select one of the problematic combos from this page: