Lesson 1: Accessible Web Foundations
-
How the internet works
-
How websites are formed
-
Introduction to accessibility and assistive technologies
-
POUR principles of accessibility
Overview of accessibility testing tools: Ottitor
Lesson 2: Accessible HTML – Building website structure
Setting up your editor and folders
-
Writing semantic HTML
Creating an accessible homepage layout
- Building a contact form with proper structure and labels
- Hands-on: Build homepage and contact page for portfolio
Lesson 3: Accessible CSS – Styling the website
-
CSS basics: selectors, properties, units, colors
-
Box model, Flexbox, and Grid
-
Styling with accessibility in mind: color contrast, readable fonts
Responsive design using media queries
-
Units for scalable design
-
Focus indicators, spacing, and clear visuals
Lesson 4: Accessible JavaScript – Adding Interaction
-
JavaScript basics: variables, functions, manipulating DOM
-
Toggling content visibility using ARIA roles
Event handling for accessibility
-
Keyboard navigation, focus traps, and
tabindex -
Accessible skip links and dynamic content handling
Lesson 5: Responsive Design
-
Principles of mobile-first and progressive enhancement
-
Making layouts and navigation adaptive
-
Best practices for touch and keyboard-friendly interfaces
Lesson 6: Emerging Technology in Accessibility
-
Use of AI tools (like Ottitor) in accessibility audits
-
Accessibility in modern JS frameworks (intro level)
-
Industry examples of accessible design and development
Lesson 7: Final Projects
-
Project 1: Portfolio Website (Built across all lessons)
-
Project 2: E-commerce Product Page (1 Module – 3 Hours)
-
Project 3: Accessible Blog Template (1 Module – 3 Hours)