DEV Community 👩‍💻👨‍💻

Stas Melnikov
Stas Melnikov

Posted on • Updated on

The 3 Short August dev tips about UX&A11y

Hey folks!

I'd like to talk about creating animation for people with vestibular disorders, improving UX when form validation and coding a search for screen readers.

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, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

Let's go!

Taking care of users which can experience dizziness, nausea and headaches

Did you know your animations might cause dizziness, nausea and headache?

The WCAG 2.2 has the section 2.3.3. which describes that users with vestibular disorders experience dizziness, nausea and headaches when they see a motion animation 😩

So that doesn't happen we should use the prefers-reduced-motion media feature 👀 People with vestibular disorders might disable animations in OS options.

And we can detect that using the prefers-reduced-motion media feature to display animations for only people without disorders. So we will take care of users better 😊

don't do this

.example {
  animation-name: zoomInDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

@media (prefers-reduced-motion: no-preference){
  .example {
    animation-name: zoomInDown;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.3s;
  }
}
Enter fullscreen mode Exit fullscreen mode

Save focus after form validation

I'm sure focus might improve a user life when he goes through form validation 😊

Let's look at Preply. If we make a password mistake the app informs us about the mistake. But ... It resets user focus also 🤦‍♂️ So I have to take my mouse and click by password input field again. And only then I can fix the mistake 😒

What can we make instead? I found a nice example on Booking. If we try to log in the app saves focus! And I haven't make more action and can just fix the mistake. Yay!🙌

Help users with vision disabilities use search

There is a special search WAI-ARIA role. When using it for search screen readers will start to display it in the "Regions list" mode that is used by users for quick navigation by page ☝️

If that isn't done, users will have to look by hand. It's a lot harder.... 😐 So, please, add role="search" to search in your apps 🙏


Top comments (3)

Collapse
 
lukeshiru profile image
Luke Shiru

For "Save focus after form validation", if you use native validations (like you should), then the browser focus the input with errors automatically.

Cheers!

Collapse
 
yuridevat profile image
𝕁𝕦𝕝𝕚𝕒 👩🏻‍💻

Nice examples.

Collapse
 
melnik909 profile image
Stas Melnikov Author

thank you!

🌖🌗🌘 Turn on dark mode in Settings