One day at work, I was tasked with converting a standard menu into an ADA-compliant standard accessible menu. Mostly, I just needed to add some attributes to the HTML, but sometimes accessibility requires JavaScript for keyboard navigation. I was bothered by the fact that a single concern was muddying up the templates and scripts, when "separation of concerns" was so thoroughly drilled into my head. I mulled over it for a while, and took the problem home with me.
My solution was to create an NPM package that provides this barrier between your application and your accessibility concerns. Inspired by my brother, who said "accessibility is like styling for the blind," I took a very CSS approach to the rules. Using mutation observers, I made sure the rules are always updated if there's asynchronous rendering. I also noticed common patterns in the types of scripts you might write when adding methods, so I defined reusable utilities for the user to consume, to save even more time and effort for the developer.
Tools Used:
- Rollup
- Node.js
- Babel
- Jest
- "specificity" - npm package
- GIT / GitHub