Early Access
Coming Soon

Build Accessible Components for the Web

Explore fundamental accessibility concepts and apply your knowledge by building real-world UI components. This course provides a solid foundation that you can build upon with relevant examples that help make the concepts "stick". Learn the ethos behind why accessibility is important, what the techniques are to create accessible components, and how to apply those principles when building out sample components. By the end of this course, you will have built a “lens” for accessibility, created practical components that meet accessibility standards, and obtained the skills to identify and address accessibility issues.

  • 5.0 / 5 (1 rating)
  • Published
  • Updated
On demand video

2 hrs 20 mins

Video Lessons

20 Videos

Course Instructor
Avatar Image

Alyssa Holland

Front-end Developer who enjoys learning and teaching! Passionate about accessibility and component libraries.

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Build Accessible Components for the Web. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Preview

What You Will Build In This Course

Course Overview

Approachable Guide to Building Accessible Components

What you will learn
  • ARIA and its role in assistive technology.

  • Using proper labels and inputs to craft accessible forms.

  • Testing for accessibility using tools like screen readers and browser extensions.

  • Definitions of common accessibility terminology and acronyms.

  • Ensuring color contrast and visual affordances for interactive elements.

  • How to manage focus and keyboard interactions.

  • How to leverage modern UI patterns like headless components to build accessible components.

Why Accessibility Feels Daunting

Accessibility is a broad and massive topic that includes a myriad of nuances and subtopics.

For many developers, understanding and implementing accessibility is a challenge that often feels different from any other aspect of web development. This challenge is compounded by the fact that accessibility guidelines can seem abstract and difficult to apply in practical scenarios, leading to frustration and uncertainty.

The thing is that accessibility isn't just about writing code. It's about having empathy and understanding the needs of diverse users to ensure that your applications are usable by everyone, regardless of their abilities.

How this Course Helps

"Build Accessible Components for the Web" provides an approachable guide to accessibility. The course demystifies the complex world of web accessibility with the following process:

  • Building a Solid Foundation: Establish a deep understanding of core accessibility principles that serve as the groundwork for your learning, ensuring that the concepts you grasp early on will naturally integrate and reinforce the more advanced techniques you'll apply later on in the course.
  • Practical Projects: Through hands-on projects, you'll apply what you learn in real-world scenarios, making abstract concepts concrete and understandable.
  • Comprehensive Skill Set: Learn a diverse range of techniques, from established principles to modern practices like headless components, expanding your toolkit for creating more accessible user interfaces.

This course is designed to familiarize you with accessibility standards and ensure you can apply these principles in real-world scenarios effectively. By blending foundational knowledge with practical application, you'll leave this course equipped and confident in your ability to create components that are both functional and inclusive.

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Course Syllabus and Content

Build Accessible Components for the Web is designed to provide a comprehensive understanding of web accessibility. The course covers foundational principles, practical techniques, and hands-on projects to solidify the concepts. From learning the basics of ARIA and assistive technologies to building and testing accessible components, you will gain the skills necessary to create inclusive web applications. Each module builds upon the previous one, ensuring a cohesive and thorough learning experience.

Module 1

Introduction

3 Lessons 10 Minutes

This module provides an overview of the course content, defines what accessibility is, and explains its importance.

Module 2

ARIA and Assistive Technology

3 Lessons 32 Minutes

In this module, you will get definitions for common terms and acronyms, become acquainted with screen readers, and explore ARIA roles, states, and properties.

Module 3

Accessibility Fundamentals

5 Lessons 38 Minutes

In this module, you'll delve into the fundamentals of accessibility, starting with the benefits of using native HTML for headings, landmarks, and semantics. You'll learn about the importance of alt text, how to create accessible forms with proper labels and inputs, and the significance of CSS for maintaining color contrast and visual affordances. Additionally, you'll explore focus management and keyboard interactions, including the use of tabindex and understanding tab order.

Module 4

Auditing for Accessibility

2 Lessons 10 Minutes

This module will provide a demo of performing an audit on a website with known accessibility issues using the axe browser extension. It will also show how to test a site using a screen reader and inspect accessibility properties within the browser.

Module 5

Build a TextInput Component

3 Lessons 12 Minutes

This module will show the process of implementing and testing an accessible text input component. It will show the foundational concept of associating labels with inputs. In addition, the student will learn how to handle error messages and properly link them with ARIA attributes.

Module 6

Build a Tabs Component

3 Lessons 21 Minutes

This module will show the complete process of implementing a tabs component that is based on the ARIA Authoring Practices Guide (APG) Tabs Pattern.

Module 7

Build a Headless Tabs Component

2 Lessons 13 Minutes

This module will teach how to implement a headless version of the same tabs component and emphasizes the use of modern UI patterns to build accessible user interfaces.

Module 8

Conclusion

1 Lesson 1 Minutes

The final module wraps up the course, providing links and references to further reading and additional resources, ensuring you have the proper tools to continue in your accessibility journey.

Meet the Course Instructor

Alyssa Holland

Alyssa Holland

Alyssa Holland earned a Computer Science degree from Florida State University and has been working as a Software Developer since 2014. As a component library maintainer, she concentrated on developing solutions that were both functional and accessible. This role highlighted the significance of inclusive design and provided her with extensive knowledge about crafting accessible components. She is excited to share this knowledge through her course!

Alyssa values the process of learning by teaching and maintains a personal blog where she writes about programming and productivity tips. She has also written for popular tech publications like Smashing Magazine, DigitalOcean, and LogRocket.

Frequently Asked Questions

What is Build Accessible Components for the Web?

Build Accessible Components for the Web is a course that covers the fundamentals of accessibility and provides practice through the process of building out UI components. The course consists of 8 modules, 22 lessons, and 2 hours and 20 minutes of video lessons.

Who is this course for?

This course is tailored to developers who want to implement applications and component patterns that meet accessibility standards, and to designers who aim to create inclusive designs that can be translated into accessible user interfaces by developers. Additionally, this course is for anyone who wants to deepen their understanding of accessibility concepts.

What if I don't like the course?

We offer a 30-day money-back guarantee, so if you're not satisfied with the course, you can request a refund within 30 days of purchase by sending us a message.

What is included in the course?

This course include 20 videos, totaling 2 hours and 20 minutes. You'll have access to every lesson video, textual lesson content, downloadable project code files, interactive IDE, and AI Tutor.

What are there prerequisites for this course?

Basic knowledge of HTML, intermediate knowledge of JavaScript, and experience with at least one front-end framework.

How long will it take to complete the course?

The course offers flexibility, allowing you to learn at your own pace. Start, stop, re-watch anytime.

Can I access the course on my mobile device?

Yes, the course is fully responsive and can be accessed on your mobile device.

Is there a certificate upon completion of the course?

Yes, you can get a certificate by sending us a message.

Can I ask questions during the course?

Yes, you can ask questions in the comments section of each lesson, and our team will respond as quickly as possible. You can also ask us questions anytime through the community driven Discord channel

Can I download the course videos?

No, the course videos cannot be downloaded, but they can be accessed online at any time.

What is the price of the course?

The course is currently priced at $39 USD. Alternatively, you can access the complete course as part of the newline Pro subscription, which costs $20/month.

How is this course different then other content available on accessibility?

This course is unique because it focuses on a thorough understanding of accessibility fundamentals and terminology, before moving into practical application using modern UI patterns. You'll start by building a solid foundation, then transition to hands-on practice creating real-world components. This structured approach ensures that you not only learn the concepts but also know how to apply them in projects to create accessible web components.