Introduction to web accessibility
Understanding accessibility and how to create accessible websites is crucial for front-end developers. This path introduces you to key concepts while providing challenges with specific accessibility considerations in each design.
✍️ Prerequisites
Before starting this path, you need a good understanding of HTML, CSS, and JavaScript. If you haven't done so already, we recommend taking our earlier paths first.
💭 Learning outcomes
- Understand the importance of web accessibility
- Learn accessibility standards and guidelines
- Understand best practices for accessible development
- Practice using assistive technologies and tools
- Learn how to conduct accessibility tests
- Develop an accessibility mindset
Why web accessibility matters
Understanding how to build accessible interfaces is a key skill for any web developer. In this article, we outline the benefits of creating accessible websites.
Not started
Understanding disabilities and assistive technologies
Your website visitors will interact with your content in different ways. As a developer, it's important to understand the diverse range of disabilities and assistive technologies people may use.
Not started
WCAG and key accessibility principles
The Web Content Accessibility Guidelines (WCAG) will help you create accessible websites. In this article, we introduce WCAG and the principles that form their foundation.
Not started
Common accessibility best practices
It's always good to get the basics right. In this article, we outline some common accessibility best practices and provide code examples outlining common pitfalls and how to address them.
Not started
- 1newbieFree
Interactive rating component
This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!
Not started
Testing and evaluating web accessibility
Different strategies exist for testing and evaluating web accessibility. This article introduces techniques, tools, and checklists to help you integrate testing into your workflow.
Not started
- 1newbieFree
FAQ accordion
In this challenge, you'll build an FAQ accordion. This is an extremely common front-end pattern, so it's an excellent opportunity to get some practice in!
Not started
Building accessible forms
Creating inaccessible forms introduces significant barriers for users with disabilities. In this article, we look at some key considerations for building accessible forms everyone can use.
Not started
- 2juniorFree
Contact form
Building accessible forms is a crucial task for front-end developers. This challenge will help you practice building a form with several input types and validation.
Not started
WAI-ARIA basics
WAI-ARIA exists to help enhance HTML and improve accessibility. However, it's essential to be mindful when using it. This article introduces WAI-ARIA and outlines common uses and pitfalls.
Not started
- 2juniorFree
News homepage
This news homepage will be an excellent opportunity to practice your CSS Grid skills. There will be lots of tricky decisions to make and plenty of learning opportunities!
Not started
- 3intermediateFree
E-commerce product page
In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
Not started
Implementing accessibility
Accessibility is an ongoing process that covers different development stages. In this article, we look at how to implement accessibility in design, development workflows, testing, and beyond.
Not started
- 2juniorPremium
Body Mass Index calculator
This body mass index (BMI) tool will be fun to build, testing your layout, JS and HTML form skills. The responsive layout shifts will also be an interesting challenge!
Not started
- 3intermediatePremium
Tic Tac Toe game
This classic practice project for web developers is a great exercise to complete. It will test your HTML semantics, your grid layout skill, as well as your JS logic.
Not started
