The new A11Y Project
One of my favorite accessibility resources is the A11Y Project.
Back in 2013, Dave Rupert created the site as a way to address some of the challenges he faced in trying to build a more accessible web.
I’ve been making websites for nearly 19 years and my biggest struggle is that I don’t have a good grasp on accessibility. Other web developers I’ve spoken with have similar feelings, a secret shame about not knowing enough. Universal Access is core to the philosophy of the web, yet it’s an Achilles Heel for many web developers.
It has long bothered me why my knowledge of accessibility is so lacking. In an honest attempt to hone my skills, I spent a few days researching various “most accessibile” code solutions. That experience yielded more questions than it did answers. I came to the following conclusions:
- Information is hard to find…
- Information is often out of date…
- Needs better community feedback…
Making accessibility beautiful
After seven years and tons of community support, the A11Y Project just received a major redesign by the insanely talented Tatiana Mac.
One of the primary goals of the redesign was to bust the myth that building an accessible site means that you have to build something ugly or boring.
The new A11Y Project is bold and visually interesting… without sacrificing accessibility along the way. It uses strong color contrast, custom :focus styles, and well done, semantic HTML to great effect.
I played a (very small) part in the redesign
I was honored to be able to contribute some code to the new project.
Throughout the site, you’ll see a table of contents on various pages. I wrote the vanilla JS plugin for this feature.
It’s highly customizable, and progressively enhances. You’ll see it used in different ways throughout the site.
If you want to add it to your own site, you can grab the source code and read the documentation here.
Major kudos to Tatiana Mac, Eric Bailey, and the whole A11Y Project team on an amazing redesign!