How These Challenges Work

The goal of these challenges is to replicate the real-world experience of being an accessibility-focused developer. Oftentimes, we don’t get to build completely new, perfectly accessible projects all by ourselves. We need to be able to review code—whether that’s in a legacy application or a pull request from a teammate—and feel empowered to identify and correct accessibility issues.

In each of the next four lessons, you’ll be presented with a sample application or website that intentionally includes several accessibility mistakes. Your job is to review this sample code, identify the accessibility issues, and correct them.

About the challenges

Each of the challenges is themed around one of the chapters of this course: accessible user interfaces, accessible HTML, navigation without a mouse, and alternate presentations of information.

Correcting the mistakes

In your everyday work, you have the opportunity to ask questions, consult reference material, and use a search engine. It’s okay not to know everything about accessibility yet! The most important part of these challenges is recognizing when something is inaccessible. If you still need to look up how to fix it, that’s fine.

Checking your work

Each challenge will include eight accessibility mistakes. The list of mistakes is in the “Solution” section beneath the coding widget. Make sure not to scroll past the coding widget before you’ve had a chance to review and correct the code, or you’ll spoil the challenge for yourself!

Once you feel confident that you’ve found and fixed all eight mistakes, read through the “Solution” section to see how you did. Each mistake will also be accompanied by the suggested fix, but if you were able to make the content accessible in a different way, that’s okay, too!

Don’t forget assistive technology

To thoroughly check each sample website or application for accessibility compliance, we highly recommend enabling your operating system’s screen reader, navigating through the sample code output using only your keyboard, or turning off the sound on your device. You don’t have to do all of these things at once, but they’re all good ways to explore the UX of a website or application from a new perspective.

While you might be able to find some of the accessibility issues just by looking at the code, it’s good to get in the habit of testing with these technologies. It will make catching mistakes a lot easier!

Good luck!

Being able to identify inaccessible experiences and maintaining a student’s mindset—always being willing and excited to improve—are two of the most important parts of accessibility development. We hope you take everything you’ve learned here, put it to work in the code you’re writing every day, and continue to learn and grow as an accessibility engineer.

Remember, users are at the heart of every single thing that we build. Technology exists for the users, not the other way around. When we center our users—all of our users—then we can create products that enrich lives and change the world.