Hello and welcome to this course on web accessibility for developers. 🙂
The objective of this course is to help you integrate accessibility into your web development.
In particular, we will cover:
Good accessibility practices to adopt when developing your web page.
ARIA attributes that will help make your site more accessible to assistive technology users.
How to make accessible interactions, such as forms.
To fully understand and apply the concepts that we are going to discuss, you need to be familiar with:
ARIA and the concept of accessibility. If you are new to accessibility, start by taking the course Make Your Web Content Accessible.
HTML and CSS. This course will take advantage of these two languages, including many HTML attributes, to build an accessible site. If you haven't already learned HTML and CSS basics, we recommend completing the courses Build Your First Web Pages with HTML & CSS and Create Web Page Layouts with CSS before returning to this one.
Meet Your Teachers
Lisa is an inclusive designer and digital accessibility specialist. She is based in Toronto and works at the Inclusive Design Research Centre at OCAD University, where she has the pleasure of learning, unlearning, and relearning all things related to digital inclusion. Her background is in psychology and visual design, and she's committed to putting people at the center of her design work, and helping organizations make their products more inclusive.
She has created this course in collaboration with software developer Thomas Dimnet.
Thomas is currently the CTO of the SensCritique site. He previously worked as a front-end developer and then as a full-stack developer. He tries to put accessibility at the center of the production process and trains developers on these issues.
How to Approach This Course
This course covers many aspects of website development while taking accessibility considerations into account. Depending on your objective, there are several possible ways to take this course:
If you are working on a large web development project and need skills in all aspects of accessible development, you can take the entire course: read the text, and take the quizzes to check your skills. Then put your skills into practice by working through the examples provided at the end of each chapter.
If you are working on a specific element of a web page or aspect of web development, you can go directly to the relevant chapter and use this course as reference material.
Finally, if you are interested in web accessibility in general without an immediate need to implement what you learn, you can focus on the subjects that interest you most.
Discover the Course Content
In this course, you will discover techniques that will allow you to code websites that are accessible to a broad range of users!
Accessible web development can help you reach many audiences by providing users with sites that support different ways of perceiving content and interacting with it. Creating accessible sites often ends up benefiting many users, not only those with disabilities. This is known as the curb-cut effect.
One of the most common examples of the curb-cut effect is closed captions. Captioning videos makes them accessible to people who are deaf or hard of hearing, but it also helps people without computer audio or who don't speak your language.
In this course, you will find:
Text with details about essential concepts.
A "Tonight in Gotham" project that will serve as a web application case study throughout the chapters.
Quizzes to help you check the skills you're acquiring during the course.
It is important to practice throughout the course. You will increase your learning by applying the concepts. For example, you can:
Use your OpenClassrooms projects if you follow a learning path with us.
Use a personal project (it's a good time to test a new technology or new concept!).
Use a work project (if you are already working as a developer).
Use the course project described below.
The “Tonight in Gotham” Project
At the end of certain chapters, you will find a "Tonight in Gotham" section dedicated to our course project. We will gradually build an accessible landing page based on a mockup.
As you can see, our project has a Batman theme! You can see from the mockup above that it consists of:
A header with navigation links, a search bar, and a dropdown menu.
The main content with the body of the text as well as an image.
A footer containing a second set of navigation links and links to social media.
The project has been divided into steps to allow you to apply what you've learned in each chapter. In each "Tonight in Gotham" section, you'll find a GitHub link that will allow you to see the code once the steps have been implemented. You can access the project's mockup in this Figma file. You can find the source code in this GitHub repository.
Let’s Recap!
This course includes text, quizzes, and an ongoing project building a web page based on a visual mockup.
The landing page project used throughout the course will allow you to practice the key elements explored during the course.
You should have some experience with HTML and CSS to work through the practical exercises in this course.
We'll start by defining the structure of an accessible page in HTML.
