The Approachable Guide to Accessible Components
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
2 hrs 19 mins
20 Videos
Alyssa Holland
Front-end Developer who enjoys learning and teaching! Passionate about accessibility and component libraries.
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 The Approachable Guide to Accessible Components. 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.
What You Will Build In This Course
Learn WAI-ARIA Standards and Craft Accessible Components for a More Inclusive UX
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
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
Sample Course Lessons
Course Syllabus and Content
The Approachable Guide to Accessible Components 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.
Course Content Overview
Course Overview: Total Modules: 8 Total Lessons: 22 Total Video Runtime: 2 hours, 20 minutes
Introduction
3 Lessons 9 Minutes
This module provides an overview of the course content, defines what accessibility is, and explains its importance.
- Free00:01:30
- Free00:03:30
- Free00:04:58
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.
- Free00:08:53
- Free00:05:03
- Sneak Peek00:18:20
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.
- Sneak Peek00:06:18
- Sneak Peek00:08:49
- Sneak Peek00:04:43
- Sneak Peek00:08:57
- Sneak Peek00:09:39
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.
- Sneak Peek
- Sneak Peek00:10:27
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.
- Sneak Peek00:02:57
- Sneak Peek00:03:54
- Sneak Peek00:05:41
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.
- Sneak Peek00:04:07
- Sneak Peek00:08:19
- Sneak Peek00:08:51
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.
- Sneak Peek
- Sneak Peek00:13:28
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.
- Sneak Peek00:01:00
Meet the Course Instructor
Purchase the course today
One-Time Purchase
Get lifetime access to this course
- Discord Community Access
- Full Transcripts
- Money Back Guarantee
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $30/mo billed monthly. Free to cancel anytime.
- Discord Community Access
- Full Transcripts
- Money Back Guarantee
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Frequently Asked Questions
What is The Approachable Guide to Accessible Components?
The Approachable Guide to Accessible Components 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.
