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

Hey there 👋

I hoped you like this little sample of my brain 🧠. If you have any questions, please reach out 🙏

Marc-Antoine Ferland

About

Hello, I'm Marc-Antoine. I absolutely love crafting elegant solutions to a wide array of problems. I'm fascinated by theory-crafting and I will love challenging the status quo. I love efficient and people-driven cultures. Work should adapt to your lifestyle, not the other way around. I'm currently a Senior Frontend Engineer at Capdesk 💻✌️