Introducing Enable: Accessible Web Components You Can Learn From

"How can I make X accessible?" As an web accessibility specialist, I get this question all the time. Not only novices ask these questions; sometimes seasoned web developers like myself get stumped on how to make more complicated user experiences accessible.

I would write skeleton code to show how I would attack these issues. Then I would make detailed notes and sometimes draw diagrams. Then I'd send them off to my fellow developer, only to have the same question (or a variation of it) to be asked a few months later. I would end up searching through my emails and forwarding stuff or just rewriting the same notes all over again. I started writing code pens, but the developers I work with wanted to know not just what coded was needed to make something accessible, but an explanation why the solution is the correct one.

So I created Enable, a website that features how to fix common accessibility problems that web developers encounter. Not only does it handle beginner level questions (e.g. "When should something be coded as a link or a button?") but also more complicated questions (e.g. "How can I produce audio descriptions in web videos without spending a lot of money?", "How do I create an accessible hybrid mobile hamburger menu / desktop flyout menu?", "How do I create skip links for mobile devices?"). Each page in the Enable website gives code solutions to these problems, along with an explanation of how these components are accessible and how they should work for keyboard and screen reader users.

Enable's mission is:

• to educate developers how to make their code accessible by giving them examples of accessible components and the ability to walk through the code examples step by step.

• to give the web developer community a suite of accessible front-end components that can be included in their own projects via NPM.

• to have a place that web developers can donate their own code examples and code so that others can benefit from their learning and hard work.

• to give back to both the developer and accessibility communities, and to start conversations on how to make the web more accessible and usable for users with disabilities.

Besides having working examples of components like accessible custom select boxes, accessible hybrid desktop mega-menu / mobile hamburger menu and accessible carousels, Enable also educates developers on accessibility best practices like what makes typography accessible (including handling issues with line-spacing and hero images), how to ensure all the animations on a page can be paused easily and what is needed to make video content accessible. It also shows examples of how you can improve your code quality using automated tests and unit testing so when you make something accessible, it stays that way, even if another developer removes those features by accident. Imagine putting that in your CI/CD pipeline!

Enable is Open Source and released under the MIT License in order to prevent any conflicts when using it in client work while still encouraging developers to contribute. Full source for the website and its components are available via Publicis Sapient's github repository (Publicis Sapient is my employer, and has supported what was a personal project of mine so that it can reach a wider audience).

Feel free to visit the Enable website, kick the tires and help the Accessibility Center of Excellence promote accessible code throughout all our projects. Feel free to give us feedback in the comments below, and if you find any bugs or have suggestions for other code examples to add to our wishlist, please add an issue to the Enable github repository. If you want to donate code to enable, please send us a PR. Please read the Github article about creating a pull request from a fork for more information on how to do this.

I believe that as web professionals, our primary job, no matter what your craft, is to create our best work, and give our best advice, to our clients. Accessible work is a huge part of that commitment, and we hope Enable will help you with that common goal. Please let us know your thoughts on this project, and what you'd like to see from it in the future.