DEV Community

Stas Melnikov
Stas Melnikov

Posted on

The 4 Short Frontend tips for April

Make switching between list options using arrows key

Folks, did you like to use keyboard arrows keys? πŸ€”

I'm absolutely, Yes! That's so made easier my life. So if I use apps that don't allow it I get furious 😀

That happened when I use Preply. Oh... I just clicked on filter for choosing the language and push the down arrow key. And what do you think happened?

Nothing... 0 reactions! πŸ€¦β€β™‚οΈI just can't use keys. I have to take my mouse and use it πŸ˜’

How it might be made. Let's see on the NHL webapp. I click on the All teams filter and push the down arrow key...

The app switches to the Anaheim Ducks team! 🀩 And I can push one more time and it switches to the next team, Arizona Coyotes. All! Noa mouse. Just we use a keyboard πŸ₯³

role="button" isn't enough for user-friendly UI

Let's think about how to improve our buttons for people who have to use a keyboard as a single way to interact with UIπŸ€”

A lot of apps become more accessible for people who use screen readers. That's awesome! But something went wrong.. 😐 I became to face buttons that aren't buttons, i.e isn't used and instead of it role="button" is used. Why is bad?

People have 0% chances to interact with UI. πŸ†˜ They can’t use the interface at all 😩

The role doesn't affect interactivity of buttons. That's why people can't interact with these buttons using a keyboard. So, please, check your buttons so that they are created using . Please, give a chances people use your UI πŸ™

don't do this

<div role="button">Go</div>
Enter fullscreen mode Exit fullscreen mode

you can use this instead

<button>Go</button>
Enter fullscreen mode Exit fullscreen mode

Moving focus on the first text field is the perfect UX hack

What do you do with focus when you design an opening modal? πŸ€”

There are two solutions. The first is to make nothing. For example, how that's done on Groupon.

If we push the Sign in button the authorization form will be open. But! We have to click on a field input to start typing because focus isn't moved πŸ˜’ We can't just type πŸ€¦β€β™‚οΈ

I hope you don't want to make this ☝️ For you, there is another approach. Please, open Pinterest.

If you push the login button the authorization form will be open. And focus will move on the first field input! In this case, users can start filling in the form without additional actions. Just type and all πŸ₯³

How to set focus to improve UX of accepting the Cookies Policy

There is a popular pattern when users have to accept Cookie Policy on websites. Let's discover how best to do this☝️

The typical solution is on the Fred Perry website. Users can see text with a link on the cookies policy and an accept button.

When we use this kind of solution we have to use mouse, touchpad or others devices for pushing on a link or button. So we do more actionsπŸ˜’

Also there is another solution on the H&M website. They set focus on the cookie policy link.

The prop of this solution is users can consult with the policy if we just push the Enter key. When they want to accept the policy we push the Tab and Enter keys. We haven't to take in hand mouse or use the touchpad πŸ₯³

The problem of this solution is a lot of users read the policy already and don't want to read it again. They just want to accept that 😐

I suggest to set focus on the accept button. In this case we quickly accept that using the Enter button.

And if we need to read the policy we just will switch on the link using the shift+tab combination and then we'll go to read of policy by pushing the Enter key πŸ™‚

P.S.
❀ Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis, Spiridon Konofaos.

πŸ’ͺ Get more free tips directly to your inbox

Discussion (0)