DEV Community

Stas Melnikov
Stas Melnikov

Posted on • Updated on

The 3 Short December dev tips about UX&A11y

Hey folks!

I'd like to talk about how to help users with vision disabilities find a search, a main and additional goal when we work with focus, how content camouflages.

But before embarking on reading I leave the link on my Substack newsletter about UX and a11y tips. You know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

Let's go!

Help users with vision disabilities find a search

Usually we know how to place a search for users without vision disabilities. But how should we do that for users with disabilities?

There is a special search role in the WAI-ARIA standard that we should add for the form element. In this case screen readers will start to display search in the "Regions list" mode that is used by users for navigation.

Pay attention, if we don't do that search will not be displayed in this mode. So it will hamper users start interaction with search. They will have to find a search using common keys. It's much longer than if they use the "Regions list" mode.

The form element with the search role is more better for a search than without

Thinking about a main and additional goal when we work with focus

Did you think sometimes about how better to move focus when users open elements such as modals or dialogs?

I think there is a main and additional goal when we work with focus. The main goal is what users want to do after moving focus for reaching their goals using a minimal number of actions. An additional is what they can do something else.

Let's consider what I mean using the case of selecting a language on Booking. If we push the button of selecting a language we'll see modal with languages.

Focus will move on the close button. Nice what we can close modal by pushing the enter key. But is that why we open the modal? No, we wanted to select a language. That's the main goal. And closing a modal is an additional goal.

Now let's look at what Booking suggests for selecting a language. If we use only a keyboard we have to use the tab, ↑ or ↓ keys to start moving between languages.

Then we push the same keys again until we find the necessary option. If we push the enter key we'll select a language. Well, that's a nice solution but I want to suggest another.

We have already identified that users open the modal because they want to select a language. It's the main goal. So we should give that to them. I think we can do that if we move focus on the current language.

Then we should make the possibility of moving between languages using tab, ↑, →, ↓ or ← keys immediately. The selection of a language we'll make using the enter key. Also, we'll save the possibility of closing the modal using the Esc key like Booking made.

I hope I was able to pass on the importance of defining a main and additional goal when you work with focus. Please, think about it and your interfaces will be user-friendly.

When opening modal with languages focus moves on the close button so we have to push the tab or down arrow key to start choosing language
When opening modal with languages focus moves on the current language so we can start choosing a language immediately

Do you help content to camouflage?

Folks, let's see ASOS homepage. Do you see there are text and buttons when the page is loading? 🤔
Nope, because White background of the text and buttons are merged with white background of the page

And there are! Just they camouflage😄Let's add a high-contrast background using the CSS background-color property and we will see them 🙂

White background of the text and buttons are contrasted with dark background of the page

Top comments (3)

Collapse
 
suryachalla profile image
Surya Challa

Thank you for the tips, much appreciated. Followed you on Instagram, we this types of content more. Please post often✌️

Collapse
 
mohammadsahragard profile image
Mohammad Sahragard

Very Nice 👍.

Collapse
 
johansebastianpuentes profile image
Johan Puentes

Very good