This content originally appeared on DEV Community and was authored by Stas Melnikov
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>
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
This content originally appeared on DEV Community and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2022-04-24T16:54:49+00:00) The 4 Short Frontend tips for April. Retrieved from https://www.scien.cx/2022/04/24/the-4-short-frontend-tips-for-april/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.