Lets Try To Solve The Problem of Web Accessibility Together

Despite the fact that the Internet is 30 years old, a fair amount of the Internet is still unreachable or barely usable for visually impaired people.

This problem isn't new to us and is quite pressing. Ever since a piece of news came out about the US Supreme Court allowing blind people to sue retailers if their websites aren't accessible, accessibility on the web has become a hot topic between developers:

...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

HTML Semantics

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.

A11y first

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!

Community solutions

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.

This is where Reakit and ReachUI (and some others) come into play. Both of the aforementioned libraries have the same idea in mind:

Create WAI-ARIA compatible componentsLeave the stylings to the end-user.

This is an excellent idea, no doubts, and hats off to their authors, Diego Haz and Ryan Florence. 👏

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

I intend to create a CLI tool, called

@design-kit/init

, 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

Storybook
Prettier
Typescript
Jest snapshot testing
Publishing script
A theme file for your design tokens

Once

@design-kit/init

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.

If this project has aroused your interest, then please take a look at the repository or if you have a feature request or any idea regarding it, feel free to add an issue!

Closing words

We, web developers, are responsible for fixing the accessibility of the web.

@design-kit

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! 🙏