Intro
About this series
Web accessibility is often overlooked by developers. As such, this series is intended to serve as how-two for developers to implement commonly used patterns with accessibility in mind.
We'll be using React, Typescript and Framer Motion throughout this series.
Why accessibility?
Accessibility is a crucial part of providing an equitable experience to all users. With so much great content on the web, it would be a shame to exclude people because of a disability. Many people rely on technologies like screen readers, magnifiers, contrast tools, color correction tools, braille readers and more to access the web.
By making a concerted effort to develop sites with accessibility in mind, you're ensuring everyone gets a seat at the table.
Not only can a lack of web accessibility prevent certain users from using your site, it can also open you, or your clients, up to costly lawsuits.
In the United States, according to the Wall Street Journal, "[accessibility] lawsuits have risen steadily, to about 3,500 in 2020 from roughly 2,900 in 2019 and about 2,300 in 2018." This article projected "more than 4,000 such lawsuits for all of 2021 if trends hold."[1]
Long story short, the trend did hold and 4055 web accessibility lawsuits were filed in 2021[2] according to UseableNet's 2021 Year End Report.
Assumptions
This series assumes knowledge of JavaScript, React, and a tiny bit of TypeScript. Even if you're not up to speed on Typescript, you should have no issue following along.
A quick note on Accessibility + ARIA Attributes
The posts in this series utilize various ARIA Attributes on HTML elements. It's incredibly important to how understand how and why specific ARIA Attributes are being used. ARIA Attributes, when used incorrectly, can potentially make a user's experience even worse.
Posts
CodeSandboxes
Closing Notes
Accessibility Resources & References
Feedback
I always welcome feedback. If you spot any errors or omissions, please let me know.
Footnotes
1. The Wall Street Journal - Lawsuits Over Digital Accessibility for People With Disabilities Are Rising
2. UseableNet - 2021 Year End Report - ADA Digital Accessibility Lawsuits
Top comments (0)