About accessible components

I set myself on the quest of being more inclusive in my web development. This starts by making sure everyone can use and profit from the websites I build.

2 min read

August 8th 2020

Washroom signs

What I know

This will be short. I basically know nothing. Not exactly nothing as I do have some basic. But I don't know enough. Not enough for building an accessible website. And by that, I mean a truly accessible website. Have you ever used a screen reader? I know I never did. At least not on purpose. Keyboard smashing? Anyone?

  • Do I test what I develop with a screen reader? Nope ❌

  • Do I make sure what I develop is accessible? Never ❌

  • Will I work to improve that aspect of my work? Yep ✅

  • Should this be as important as responsiveness? Sure ✅

Better mindset

I recently built a little website. It's nothing really, but it's a place where I learn to use TailwindCSS. It's built with Next.js and is hosted on Netlify. While I worked on that project, I started to build a bunch of basics components; titles, nav, buttons, etc.

I started working on a little `tooltip` component. While working on it my mind drifted a bit :

How should I write this component for it to make sense for search engines?

That's a normal reflex, isn't it? Performance, responsiveness and SEO are classic concerns for a frontend engineer. Then, something else came to my mind. How would I make it work with a screen reader? And that's it. Pandora's box was opened. A whole new part of my job was brought to my attention.

Room for improvements

So, how should I build this component? The answer is not simple. Not at all. In fact, at this very moment, I still don't know how to make it. I toyed with some ideas and found one of the many resources that will help me in my learning process (here 👈).

Here is my plan:

  1. I have to learn about how people with a wide range of disabilities use the web. This includes learning how to use a screen reader
  2. Learn about accessibility and the best practices.
  3. Keep building new components and learning how to make them fully accessible.
  4. Write about it. Learning in public is something I want to more often. I'll write about my progress here.