There are two things that frustrate me when learning about accessibility from documentation. The first is that the organizations that set these standards format their content in long, text-heavy blocks on pages that scroll on for eternity. The second thing is when I want to learn about a specific topic, I find myself having to go to various different resources to get pieces of what should be a whole picture.

Since we already have in-depth, almost encyclopedic levels of documentation, for the sake of shorter attentions spans, neuro-divergence, and to save the peepers of burned out developers, I wanted to create a resource that got to the point.

Something that provided the bare bones and in a format where the content was not only accessible (of course), but also breathable. And thus, I created a small React app called “Little A11y Things” to serve that very purpose.

My main goal was to format content in a predictable way. What is the thing? When do I use the thing? What attributes and keyboard behavior does the thing require? I also provide links to more in-depth topic-focused reading.

In addition, my favorite feature is the “visual and code mode” tabs. By switching between the “Visual Mode” and “Code Mode” tabs, developers can see stuff working while also being able to look under the hood. They can also copy and paste these minimal “Code Mode” snippets into their own projects for further customization.

Overall, it was a fun app to work on, and it’s something I plan to continue improving over time. It’s also open source so if you find any bugs or have content suggestions, feel free to visit the Little A11y Things Github repo. My hope is that these little pieces of knowledge make it easier for developers to dive into accessibility. Little by little, pun intended, the internet will become fully accessible. Enjoy!