The 3 Short December dev tips about UX&A11y
Tags: ux, css, webdev, a11y
Published: 2021-12-07 21:40:32

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](https://uxa11y.substack.com/). 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](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F382c6125-e6a0-45d3-97d8-929b423f33f3_1080x1080.jpeg)

##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](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fb03437f0-2564-4e99-bec4-ea01faa60c2a_1080x1080.jpeg)
![When opening modal with languages focus moves on the current language so we can start choosing a language immediately](https://cdn.substack.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36ff8283-37e7-43fb-a859-888744e72d22_1080x1080.jpeg)

##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](https://c10.patreonusercontent.com/4/patreon-media/p/post/65019423/dcfec61596a4445baf32f2a7c9ddc6d8/eyJxIjoxMDAsIndlYnAiOjB9/1.jpg?token-time=1652140800&token-hash=eMAzNR2kVpYqnhUNDrEkdPePbsjjTlt244vMjeb308g%3D)

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](https://c10.patreonusercontent.com/4/patreon-media/p/post/65019423/d9a9ad3988534da290a60e167c0b8658/eyJxIjoxMDAsIndlYnAiOjB9/1.jpg?token-time=1652140800&token-hash=mnWJ1SZOGD-FYtAxVqFDC-JDkF3u44O4E4QRuvGU2a4%3D)