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)