Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 24, 2022 04:54 pm GMT

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 cant 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>

you can use this instead

<button>Go</button>

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


Original Link: https://dev.to/melnik909/the-4-short-frontend-tips-for-april-4989

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To