…and all I can say is, finally.
- I think the problem of web accessibility originates from many things, but I’d like to just name a few of them:
- Lack of general HTML semantics knowledge and familiarity of aria- attributes
- Lost interest in accessibility first design
- Fragmented JS communities with varying solutions
Every web developer has to revisit the advanced parts of HTML. Period. There must be HTML tags you haven’t heard about.
Whenever you’re about to create a div always think twice whether there would be a better tag for the given use-case.
IMHO, for newcomers, web development tutorials should include a separate section about HTML semantics and introductions to aria attributes after HTML, CSS, JS fundamentals.
For example, Lambda School, CodeAcedamy, KhanAcedamy, TreeHouse, are all responsible to make this happen.
Developers working on individual components should feel more responsible for and check more regularly what gets rendered on a page as a whole.
Without this bigger picture, semantics is worthless.
It’s true, accessibility features can feel like an extra step you have to implement, but we mustn’t forget our disabled end-users.
Empathy should come first. Convenience should be negligible.
Sometimes accessibility features aren’t just needed by visually impaired people, but able-bodied users as well. Tabbing through content is a common way to navigate a website.
So please take accessibility seriously!
The JS community is fragmented. Within the community there are tribes called React, Preact, Vue, Angular, Vanilla JS, the new kid Svelte, etc.
All of them have their own design systems/UI kits/component libraries whatever you’d like to call them.
Material, AntD, Bootstrap, Base just to name a few. They offer polished, nice-looking components with great features and some basic accessibility features.
But can you see the problem with them?
Reakit and ReachUI offer a solution only to React users, a subset of the JS ecosystem, not to mention these two libraries compete with each other.
To tackle this great problem of web accessibility, I would rather embrace unification within the community instead of competition, which makes us even more fragmented.
We must find a way to overcome the fragmentation caused by JS frameworks and create something framework-agnostic, which leads us to my solution.
The (proposed) solution
, which help developers bootstrap accessibility first design systems with one command. 🚀
To get you started it will ask two things from you:
- The name of your design system
- The framework of your choice (React, Vue, Svelte, etc.)
The output is an environment, where these things will be already set up for you:
Set of accessible components in your framework of choice
- Jest snapshot testing
- Publishing script
- A theme file for your design tokens
is finished, all you have to do is to fine-tune your theme configuration and start implementing your new components.
My main goal with this project is to advocate the importance of a11y between web developers and provide them with a zero-config tool to fulfil their needs when it comes to bootstrapping a design-system.
is just one idea to ease this problem, but hopefully, you’ll find it still useful.
Please share with me your feelings about the state of accessibility on the web and what you think of my idea/solution!
Thanks for your attention! 🙏