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 😎
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;
}
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;
}
}
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 🙏
P.S.
💪 Get more free tips about UX and accessibility directly to your inbox
❤ Thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis.
