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

</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

</aside>

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> About the A11y series

It was written originally in 2018 as an internal Accessibility Guide, and slightly updated in 2024.
It was the result of me working as the main developer to make an existing e-commerce site in compliance with ADA Law, by implementing WCAG 2.0 AA level compliance.
The objective of the guide was to be a start point of an initiative to make more projects accessible, by outlining some useful information.
This is not exclusive for developers: This first page have general knowledge that serves anyone involved on a web project.

<aside> 🔥 But in case you are here for technical information, check the second page, A11y - hands-on guide for developers

</aside>

Who is responsible for accessibility and should read this?

<aside> 🤯 TL; DR: everyone working on a digital project, so read it =)

</aside>

While some pages of this guide are very technical and some may think this is targeted mostly to FE (Front-end) developers, in reality a big part of this guide is for everyone evolved in a project, because making a project accessible is not one person / role job and is not just about technicalities:

<aside> 💡 Making the web more accessible is about removing barriers that might prevent people with disabilities from accessing something, it’s about a mindset, it’s about inclusion.

</aside>

If you are not a developer, while you may skip some code examples and technical information on some sections, I still recommend for you to have a broad knowledge about these guidelines, as it helps to achieve the main goal, making the process much easier to anyone involved.

If you are a developer, while many A11y (this is short for Accessibility) endpoints will be handled by a FE developer, it's extremely important that BE (back-end) developers also make themselves aware of this, as many times they are also responsible to implement html templates / structures and JS functionalities.

On the code examples sections, you will see that accessibility violations being caused by common habits that developers are used to regarding HTML semantics, proper use of tags and attributes.