Skip to main content

Course Format

This course takes place over 4 days, with each day covering a specific topic of Web Accessibility. Each session includes theoretical concepts, practical examples, and hands-on exercises to help you master accessibility techniques.

Daily Topics

1

Day 1: Introduction

What is Web Accessibility and common pitfalls during development.Learn the fundamentals of accessibility, understand why it matters, and discover the most common mistakes developers make when building web applications.
2

Day 2: Components

Building common UI components with accessibility in mind.Explore how to create accessible buttons, navigation menus, modals, tabs, and other interactive components that work for all users.
3

Day 3: Accessible Forms

The techniques and accessibility principles of forms on the Web.Master form accessibility including proper labeling, error handling, validation feedback, and ensuring form controls are usable with keyboards and assistive technologies.
4

Day 4: Best Practices

Tips & Tricks. Best Practices & Workflows for any development team.Learn testing strategies, accessibility auditing tools, workflow integration, and how to maintain accessibility standards throughout your development process.

Course Materials

This course comes with a comprehensive set of materials and resources to support your learning:

Demo Website

The interactive demo website serves as a practical guide throughout all lessons, providing real-world examples of accessibility implementations.

Slides and Notes

You’ll get access to all slides and additional materials that contain all the information you need to learn the topics covered in this course on your own time.
  • Day 1: Introduction - Notes and Slides
  • Additional materials for Days 2-4 will be provided during the course
All course materials are designed for self-paced learning, so you can review concepts and techniques whenever you need them.

GitHub Repository

The GitHub repository contains the source code for the demo website and will be used for practical work throughout the course.

Prerequisites and Setup

Before the course begins, make sure you have the following set up:
1

Clone the Repository

Clone the course repository to your local machine:
git clone https://github.com/dshijakovskiTDL/web-a11y-for-developers.git
2

Navigate to Project Directory

Change into the project directory:
cd web-a11y-for-devs
3

Install Dependencies

Install the necessary dependencies using Bun:
bun install
This course uses Bun as the package manager. Make sure you have it installed on your system.
4

Run the Development Server

Start the development server:
bun run dev
5

Access the Application

Open your web browser and navigate to http://localhost:3000 to view the application.
  • Have the repository open in your favorite IDE
  • Install a screen reader for testing (NVDA on Windows, VoiceOver on macOS)
  • Use a modern browser with developer tools (Chrome, Firefox, or Edge)

Learning Approach

Throughout the course, you’ll:
  • Learn theoretical concepts through presentations
  • See live demonstrations of accessibility features
  • Work hands-on with the demo website repository
  • Practice implementing accessibility techniques
  • Review real-world examples and use cases
The best way to learn accessibility is through practice. Don’t hesitate to experiment with the code and test with different assistive technologies!

Additional Resources

To supplement your learning, check out these valuable resources:

Global Accessibility Day

Join the global community in celebrating accessibility on the Third Thursday of each May.Learn more at accessibility.day

Build docs developers (and LLMs) love