This extra course explores web accessibility, inclusive design, and AI-powered interactions. You'll learn how to build accessible, interactive, and intelligent web applications that are usable by everyone, including people with disabilities.
🔹 Focus Areas:
✅ JavaScript Basics – Core concepts for building interactive web experiences
✅ Web Accessibility Best Practices – Making websites keyboard and screen reader-friendly
✅ AI & Speech Recognition – Adding voice control and text-to-speech
✅ Progressive Web Apps (PWAs) – Building offline-accessible web applications
✅ Accessible Game Development – Creating inclusive browser games
🎯 Objective: Learn the fundamentals of JavaScript to build interactive, accessible websites.
📌 Topics:
✅ Variables, Data Types, Loops & Conditionals
✅ Functions & Events (Click, Keyboard)
✅ DOM Manipulation (Updating Web Pages Dynamically)
🛠 Hands-on Challenges:
- Create a button that updates webpage content dynamically
- Implement keyboard-driven navigation
🎯 Objective: Use CSS & JavaScript animations while respecting motion sensitivity preferences.
📌 Topics:
✅ CSS Animations & prefers-reduced-motion
✅ JavaScript Scroll & Hover Effects
✅ Testing Animation Accessibility
🛠 Hands-on Challenges:
- Build a fade-in animation that respects reduced motion settings
- Implement scroll-triggered animations with JavaScript
🎯 Objective: Create fully accessible web apps with semantic HTML, ARIA roles, and keyboard navigation.
📌 Topics:
✅ Semantic HTML & Screen Reader Support
✅ Form Validation & Live Error Messaging
✅ Keyboard Navigation & Focus Management
🛠 Hands-on Challenges:
- Develop an accessible To-Do List app
- Implement ARIA live regions for status updates
🎯 Objective: Add AI-powered voice commands & text-to-speech to web applications.
📌 Topics:
✅ Web Speech API for Voice Input
✅ Text-to-Speech for Screen Readers
✅ AI-Powered Image Descriptions
🛠 Hands-on Challenges:
- Create a voice-controlled form input
- Implement automatic text-to-speech on button click
🎯 Objective: Build installable, offline-accessible web applications.
📌 Topics:
✅ Service Workers for Caching & Offline Support
✅ Web App Manifest & Home Screen Installation
✅ Testing PWAs for Accessibility
🛠 Hands-on Challenges:
- Develop a PWA that works offline
- Implement dark mode & font size adjustments
🎯 Objective: Implement speech-based interactions for hands-free navigation.
📌 Topics:
✅ Speech Recognition API (Listening for Commands)
✅ Voice Navigation (Say "Go to Home" to Navigate)
✅ Voice-Controlled Form Input
🛠 Hands-on Challenges:
- Build a voice-controlled website navigation system
- Add Text-to-Speech for real-time content feedback
🎯 Objective: Create simple, accessible browser-based games with JavaScript.
📌 Topics:
✅ Keyboard-Only Game Design
✅ ARIA Live Announcements for Screen Readers
✅ Speech Recognition for Voice-Based Controls
🛠 Hands-on Challenges:
- Develop a keyboard-driven maze game
- Implement voice commands to move a game character
✅ WAVE Web Accessibility Evaluation Tool – https://wave.webaim.org/
✅ Google Lighthouse (Built-in Chrome DevTools Audit) – Press F12 → Lighthouse
✅ Web Speech API (MDN Docs) – https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
✅ Google Cloud Speech-to-Text API – https://cloud.google.com/speech-to-text
✅ JavaScript Basics (MDN Docs) – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
✅ Accessible Game Development Guide – https://gameaccessibilityguidelines.com/
- Basic HTML & CSS knowledge recommended
- JavaScript fundamentals covered in Lesson 0
- A modern web browser (Chrome, Edge, Firefox)
- (Optional) A screen reader for testing accessibility (NVDA, VoiceOver, ChromeVox)
1️⃣ Start with Lesson 0 to learn JavaScript basics.
2️⃣ Follow each lesson in order, completing the challenges.
3️⃣ Test your projects using accessibility tools (WAVE, Lighthouse, screen readers).
4️⃣ Apply what you learn to your own web projects.
5️⃣ Experiment with AI-powered features to enhance accessibility.
🚀 By the end of this course, you will have built:
✅ An interactive, fully accessible web app
✅ An AI-powered voice-controlled website
✅ A progressive web app (PWA) with offline support
✅ An accessible browser-based game
This course is designed to empower developers to create a more inclusive and accessible digital world.
💡 Got questions? Feel free to experiment, explore, and expand on each challenge!