The 3 October Frontend tips about a11y and UX

The bigger clickable area the better user-friendly interactive elements

When we design interactive elements we have to think about how users will interact with them, in particular, a clickable area.

That is important because users use different kinds of interactions. I often see designers and developers make a clickable area that is equal sizes of the element.

It's nice for users who use a mouse. But that's a big problem for other users. If users have a motor disability click on such an element is a nearly impossible task,

Sometimes I can't hit on such elements when I tap on them using a finger. Also outline around elements has not enough contrast, if I focused on them using a keyboard,

But we can solve these problems easily. Just we should design more largest clickable area that will not conflict with other elements around.

The button role isn't enough for an accessible interface

There is a practice of overriding the button's default role. It's a bad practice already because authors of the ARIA in HTML standard prohibit overriding of default roles in section 2.1.

But in addition, people think if they define role="button" this element becomes accessible. Yes, it's true for screen readers. But that's only one case!

This "button" isn't accessible for a keyboard. Users can't focus on this element using the tab key. Also, this "button" isn't accessible for interaction using the enter or space keys.

So if you want to define role="button" don't do that. Just use the button element.

don't do this

<div role="button">Go</div><!-- or --><span role="button">Go</span>

you can use it instead

<button>Go</button>

The aria-labelledby simplify navigation for users of screen readers

Any web interface has a lot of sections that help users without vision disabilities orient at the page. We just see headings and understand that is a section and also its sense.

But some users can't see. They use the special quick navigation mode known as "Regions list" in screen readers. In this mode screen readers display all regions on the page. So users can go to any by some taps.

Unfortunately, there is a problem that is section elements aren't displayed in this mode until we associate section heading with a section using the aria-labelledby attribute.

So we have to add the id to the heading and add this as a value to the aria-labelledby attribute that is defined for the section element. As a result, this section will be added to the regions list and users will know about it.

don't do this

<section>  <h2>About me</h2>  <p>Lorem ipsum, dolor sit amet consectetur...</p></section>

you can use it instead

<section aria-labelledby="about-me">  <h2 id="about-me">About me</h2>  <p>Lorem ipsum, dolor sit amet consectetur...</p></section>

P.S.
Also read The 4 September Frontend tips about a11y and UX

Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Spiridon Konofaos.

I wrote this article with donations of them because content creating is my full-time job. That's free because I want everyone to have the opportunity to learn how to make interfaces more user-friendly.

I do that while I have donations from my sponsors. I'm looking for new sponsors who will help me. So if you want me to continue to write articles, please, support me on Patreon.

Go to Patreon

I help people fix accessibility mistakes. If you need help chat me on [email protected] or dev.to direct. Please, specify the subject of the email "Stas, I need help"

Friends, I tell stories from my career on Substack. Join my free newsletter, if you're interested in my background or you want to get my updates first