Four simple accessibility improvements to apply today

One of the topics I've gotten the most interested in when I first started branching off to front-end development is accessibility. It's sweet to see that it's been getting more and more traction these last few years, but many websites and web apps are still largely unstructured to support proper usage by folks who rely on screen readers and/or keyboard navigation only.

It takes great intentionality and active studying to learn all the little accessibility tweaks available to us in modern HTML and CSS, even more so to apply them systematically on a project. So, to ease that a little bit and maybe, who knows, help you make your website a bit more accessible, I thought of sharing a couple of the techniques I applied to mine.

Aria labels

Every interactive element on the UI should have an accessible name. If we're talking about text-based buttons, the DOM automatically uses the string on it as its accessible name through the aria-labelledby attribute. However, when it's a case of a button without a string, we must intentionally add a name for them by using the aria-label attribute. That's what I did with the nav bar's dark and light mode toggle.

1<button
2  className="circle-button"
3  type="button"
4  aria-label={
5    theme === "dark" ? "Toggle light mode" : "Toggle dark mode"
6  }
7  onClick={() => {
8    setTheme(theme === "dark" ? "light" : "dark");
9  }}
10>

Focus-visible treatment

Folks navigating through your website using just the keyboard need to visually know which element they’re currently. We allow them to know that by adding focus-visible styles to all interactive elements. You can apply any valid CSS under this pseudo-class, but the outline property is the most common.

"Jump to content" button

If you get into my website (or any out there) and start pressing the tab key, the order in which elements will get focused starts from the top of the DOM tree. This means you'll probably have to go through all the nav bar items first before getting to the meat of your site's content. And, if you're a keyboard-only visitor, that can get cumbersome pretty quickly.

To ease that, we can add a “Jump to content” button as the first or second focused item if you start tabbing right after the site has loaded. This button will jump to whatever element you deem “primary content”, skipping the navigation items.

I've done that by simply adding an id to the element I wanted to jump to and adding it to the href of the button (which is actually being rendered as an <a> tag).

1<Button
2  external="true"
3  href="#selfie"
4  variant="plain"
5  color="neutral"
6  className="absolute left-16 translate-y-[-200%] transition-transform focus:translate-y-0"
7>
8  Jump to content
9</Button>

Be aware of nested interactive elements

What made me think of this last one is the card component that renders as an a tag, which I have in many places on my site. Note how, in several instances of it, there's usually a call to action reading “Read the story” or something similar. These elements are added using the Button component I showed how to build in my previous post.

Technically speaking, though, the main issue here is that you shouldn't nest two interactive elements, as that's considered to be invalid HTML.

1<a href="/">
2  <button>Read the story</button>
3</a>
4
5// Don't do this!

The tricky thing is that no visible error will pop up if you do that. The accessibility-related implication is that interactive elements have the tabIndex level of 0, meaning they will be focused. And, in this specific situation, the button wouldn't do anything, given it's the whole card that's clickable instead.

To solve this, I did a super light implementation of “component polymorphism”. This Button component of mine is just rendered as an actual button if I pass the button prop, otherwise, it's rendered a div, which is not interactive by default, therefore, not focusable.

1let Component = props.href
2  ? props.external
3    ? "a"
4    : Link
5  : props.button
6  ? "button"
7  : "div";

Closing thoughts

I love learning more about accessible HTML and CSS every single day, and I highly recommend you look into it as well! It will not only help you to make more accessible web products, but it will also teach you a lot about design systems, component API, and, generally speaking, the importance of using the tools correctly.