Practical Accessibility

Video Transcript

Introduction to the Practical Accessibility Course

Accessibility can be straight-up difficult and intimidating. How do you get started? Where do you start? How do you know if what you’ve built is accessible? How do you fix accessibility issues when they come up? I know how hard it is to find answers, and how easy it is to mess up. I know how overwhelming and even frustrating accessibility may feel at first. But I promise you, accessibility isn’t always as hard as it seems (especially if you know where and when to start!). And my goal with this course is to make it friendlier and more approachable.

If you’re a design engineer, a designer who works with engineers and who maybe knows some HTML and CSS, a front-end developer, a JavaScript developer, or a back-end developer who struggles with getting accessibility right, then this course is for you.

Practical Accessibility is the culmination and distillation of years of my experience in learning, developing, and teaching about web accessibility. I’ve trained dozens of designers and engineers at events and in-house over the past few years, and have gathered feedback about common pain points, knowledge gaps, mistakes, and “wishlists” designers and engineers had when it comes to accessibility. In this course, I will give you the essential, evergreen knowledge you need to gain a deep understanding of accessibility, so that you can more confidently build websites and applications that are more inclusive of people with disabilities.

By understanding how things work from the ground up, you can anticipate places where you may create barriers to access and avoid them in your work, as well as fix or remove existing barriers in your current codebase.

If you’re a developer, your accessibility knowledge will help improve your collaboration with designers, and will enable you to diagnose issues in the design as early as possible, and suggest alternative approaches.

If you’re a designer who dabbles with HTML and CSS, your knowledge will help you understand how your design decisions affect the accessibility and usability of your products, as well as understand technical accessibility requirements and constraints so you can make more inclusive design decisions, as well as collaborate more efficiently with the engineers on your team (which can make you your engineering team’s favorite designer!)

In this course, you will find answers to questions like:

• What is the thought process for building accessible components from scratch?
• Do I need JavaScript to make this accessible?
• How do I know which HTML element to choose? And Why should/shouldn’t I use this element?
• When do I reach for ARIA versus native HTML?
• How do I navigate the ARIA and WCAG documents?
• How does CSS affect accessibility?

The course is very practical (hence, the name!). You will get a tonne of actionable insights that you can take away and start applying in your own projects right away to make them more accessible.

The course currently includes more than 35 videos and approximately 15 hours of in-depth lessons (that’s two full-day workshops worth of content!) covering:

• Accessibility vs inclusivity vs usability. What the difference between them is, how people with disabilities access the web, and how this knowledge can help guide and improve how you design and develop your websites and applications.
• The Web Content Accessibility Guidelines (WCAG). The WCAG will be your north star when you’re designing and developing for accessibility, but it will not be your final destination! You’ll learn everything you need to know about WCAG and you’ll learn how to navigate and use the very helpful supporting documents in your day-to-day work.
• The accessibility tree and accessibility APIs (AAPIs). Your secret accessibility weapon. The accessibility tree will give you insights into how accessible your code is. You’ll learn everything you need to know about using it to find common accessibility issues in your everyday work.
• Setting up your screen reader testing environment on your machine. A big part of your work as an accessibility developer will involve testing your work with the assistive technologies that your users use to access your content. We’ll walk through setting up a screen reader testing environment on your machine.
• Semantic HTML. HTML is extremely powerful if you know how to use it. And believe it or not, there’s more to it than choosing the right element to represent your content. HTML is only as accessible as you write it. And choosing the right element is not always enough. You’ll understand why semantic HTML is important but you’ll do so from an angle that is quite different from the one you’re used to seeing! You’ll learn how to use HTML the way it was intended to be used to get the most out of its inherent accessibility.
• Responsible ARIA. ARIA is a powerful tool, but unless used wisely and responsibly, it can literally make your content inaccessible. We’ll take a (very) deep dive into ARIA attributes, how to use them, when to use them, and, most importantly, when not to.
• Techniques for hiding content inclusively. There are different types of invisibility, and each type affects the accessibility of the content in a different way. We’ll cover all the different techniques for hiding content using HTML, CSS, and using ARIA, and you’ll understand the pros and cons of each technique so you can choose the appropriate one(s) for your components.
• Accessible names and descriptions. All you need to know about accessible names and descriptions — why they are important, the different techniques (there are at least 3–5!) you can provide names to elements, what happens when no name is provided to an element, and what happens when conflicting names are provided. This will help you fix common accessibility issues and avoid new ones in your codebase.
• Accessible images. Everything you need to know about writing effective alt text for images.
• Accessible forms. We’ll discuss grouping and labeling form fields, providing instructional cues and descriptions, accessible form validation, and how to make form validation more efficient and helpful for your users.
• Accessible notifications using ARIA live regions. If you’re creating Single Page Applications (SPA’s), you’ll probably need to notify your users of some dynamic content updates when they happen. We’ll discuss the accessible notification system provided by ARIA, and how to use it responsibly.
• Keyboard accessibility including providing navigational aid for keyboard users, designing WCAG-conformant focus indicators, and managing focus in custom interactive components.
• Forced Colors Modes. You’ll learn how to prepare your content for forced colors mode by avoiding common HTML and CSS mistakes that make it inaccessible in these environments, and we’ll discuss simple but effective tips for further optimizing your content and custom ARIA widgets to ensure they remain usable in these environments.

Throughout the course, we will alternate between both theoretical and practical chapters. The theoretical chapters are essential to your accessibility knowledge, and will give you a deep and solid understanding of the What and Why of accessibility. But while they are theoretical in nature, they provide high practical value.

Then we will go over the How. We will walk through the process of building common UI patterns (such as a navigation, pagination, accordion, custom button, toolbar) step by step, using the learnings from each chapter.

You will learn not only what to do but also what not to do. I will share with you my thought process for writing HTML, CSS, and JavaScript more responsibly, to create more inclusive design patterns. And I will recommend tried-and-true practices for creating common design patterns in an accessible way.

Throughout the course, you will learn about useful tools that you can use in your day-to-day work. We will focus less on the tools themselves, though, and more on equipping you with the knowledge to understand why you’re using a specific tool, and how to use it to find and fix accessibility issues in your code.

By the end of the course, you will be armed with the knowledge, techniques, and resources to:

• Quickly identify common accessibility issues when they come up.
• Fix existing accessibility issues in your current project(s).
• Implement more accessible user interfaces from scratch.
• Feel more confident in your skills and your ability to create websites and applications that work for people with disabilities.
• Become an accessibility champion and make a positive impact on the Web and the world!