Learn Accessible Web Design

Learn how to write accessible HTML by solving interactive coding challenges and fixing a real-world website.

• What is accessible development?
• Why accessibility matters
• Contrast ratios
• The accessibility tree
• WCAG levels
• Alternative text
• Links
• Labels
• Attributes
• ARIA & live regions
• Lists
• Headings
• Semantic HTML
• Fieldset & legend tags

• Learn Accessible Web Design
• 1. Accessible Development Intro
• 2. Understanding web accessibility
• 3. Aside: Text contrast
• 4. Aside: Use of color
• 5. Text contrast
• 6. Aside: Alternative text
• 7. Aside: Links
• 8. Links and alternative text
• 9. Aside: Labels
• 10. Aside: Radio buttons
• 11. Labels
• 12. Semantic HTML
• 13. Lists
• 14. Text-size
• 15. Headings
• 16. ARIA
• 17. ARIA live regions
• 18. Aside: Accessible JavaScript
• 19. Aside: Hiding content
• 20. Aside: Skip Navigation Link Part 1
• 21. Aside: Skip Navigation Link Part 2
• 22. Skip Navigation Link
• 23. Final challenge part 1
• 24. Final challenge part 2
• 25. Outro