Skip to content
2junior

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
This path contains premium content. You can complete all the free steps without a subscription, but you will need a Pro subscription to complete the full path.
Unlock Pro

  • 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
  • 1newbie
    Free

    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
  • 1newbie
    Free

    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
  • 2junior
    Free

    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
  • 2junior
    Free

    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
  • 3intermediate
    Free

    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
  • 2junior
    Premium

    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
  • 3intermediate
    Premium

    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