A11y - hands-on guide for developers

Switch between Dark / Light mode with Control + Shift + L

<aside> <img src="/icons/link_orange.svg" alt="/icons/link_orange.svg" width="40px" /> A11y Series

A11y - making the web more accessible

A11y - tools, checklists and resources

</aside>

<aside> <img src="/icons/username_orange.svg" alt="/icons/username_orange.svg" width="40px" /> About the Author

⌨️ Felipe Spengler ~23 years of experience, ~13 as Front-End Engineer

🔗 github.com/fleps

🔗 linkedin.com/in/fleps

</aside>

To work with accessibility as a developer, I want to highlight a few important points before we jump into codes and techniques:

👉 You might need to lose some habits

Some well know practices that we as developers might use over the years can actually be the reason for some of the most basic accessibility issues.
Fortunately, while some fixes can require big changes, many are very simple to fix, and when you get used of having accessibility requirements in mind, it will become the norm and very automatic!

👉 For many accessibility requirements, there are multiple ways of solving it

As the WCAG 2.0 guidelines were written in a more normative way, there are a lot of issues that you can actually be solve with different approaches, so it's better to have that in mind.
So, while the parameter is to meet WCAG 2.1 level AA compliance, the final goal is to make the user experience better for everyone, and that's the reason why I wrote examples that go beyond the hitting a "minimum requirement for compliance" and actually focus on implementing A11y with the best possible approach, considering research, feedback from a consultant and also from users with disabilities.
💡 Be mindful and think about the user experience, not just about following a rule.

<aside> ⚠️ Very Important

While to start developing with accessibility in mind doesn’t require any “permission”, when a website receives a formal notification of a possible lawsuit and is requested / mandated to implement accessibility, it is a different scenario! In this case, it is 1000% recommended to hire and work together with a specialized Accessibility Consultancy to identify the issues, make a full detailed report, and audit!

</aside>

Now, let’s get to the topics