You can read part 1, 2, 3, and 4 here:
31: How using animation in an interface affect the user experience?
As per WCAG animations should follow:
Animation should be under 5 seconds
There should not be more than 3 flashes
User should have the can stop, pause, replay the animations
The reason is if there are too many flashes then it will cause seizures. Not giving control to the users to stop auto-play, pause, replay the animations will impact the user experience.
32: How to make animations accessible?
WCAG has guidelines around it. Below are the 3 things I can share for now:
Avoid having unnecessary animations
Avoid having auto-play animations
Always give the control of animation to the users to control: play, pause, rewind, etc of animation.
Think about the fallback. Eg: users who are not comfortable with animations must have changed their system's settings 'prefer-motion-reduced'. Due to this the animation won't play. Hence, it is important to have the fallback of animations. Below code is from MDN
.animation {
animation: pulse 1s linear infinite both;
}
/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
.animation {
animation-name: dissolve;
}
}
This is the screenshot of Mac OS' system preferences.
33: What is focus-trap?
`focus trap is related to the keyboard accessibility. When we have left long navigation with sub-navigation or carousels or a module with a lot of controls then how the flow of the keyboard should be?
If there is no clarity there are 100% chances that the user's keyboard focus will be stuck in a place and won't be able to come out.
Eg: Here is an example of the sub-navigation.
34: Give an example where you have to change the tabindex
In SPA while selecting a page (route) when we need the focus to be on the main content at that time we need to change the tabindex.
35: What is access-keys
access-keys are known as the shortcut keys or the hotkeys. A lot of users are very comfortable using the hotkeys while accessing the web. Every browser and OS has a hotkey to access their access keys. The access key is always a single character.
Eg: OS/Browser hotkey + H (this is to access Heading)
Do take care that access-key should never override the global hotkeys. Eg: S is used for saving. Do not make it to do for some other task, and provide a shortcut key guide for users to educate.
36: Are ARIA tags picked by SEO?
No, ARIA tags don't get picked by SEO. ARIA-* tags are for providing extra in
37: What are the accessibility issues with the gifs?
Though GIFs are an engaging and popular way of adding fun elements GIFs are not accessibility friendly. Below are the issues with the GIFs
1. Autoplay:
GIFs autoplay and in the loop. It doesn't provide any control to the user to stop it. It is breaking the accessibility rule. The solution of fixing this is either control the play/pause of GIFs by JavaScript or use the VIDEO tag of HTML to replace the GIFs
2. User doesn't have control of the animation:
Not just play/pause, GIFs don't have any control for the users. This again breaks the rule of accessibility. Hence, it is important to provide control such as settings of reducing the play rate, etc. The solution would be to replace the GIFs by VIDEO tag.
3. No alt tag: Provide the alt tag to make the gif accessible for screen readers.
38: If you have to develop carousels what are the top 3 things you will take care of for accessibility?
As per the WCAG, there are a few things to take care of while building the carousel for accessibility.
1. Controls:
While designing/developing carousels, make sure you are providing the controls such as play, pause, indicators of a number of slides, a thumbnail of the next slide.
2. alt tags:
It is important to provide alt tags of the images (if using) in the carousels for accessibility.
3. Mobile support:
Make sure that carousels is optimized for the mobile screen.
4. Content:Images:
One more area to take care of is the content should be readable with images or graphics. Color contrast and font size should be as per the WCAG guidelines.
39: When to use role="article" and HTML5 article?
When we are not using semantic HTML tag <article/> in such case we can leverage the use of role=article or when we want a particular section to behave as article only for the screenreader users in that case we can use role=article.
However, always use the semantic tag HTML5 article.
40: What is the use of aria-required?
aria-required is useful tag to notify the screenreader users about which input fields are 'required'. Remember, the red astrik or visual presentation which UX folks use to indicate the required fields will not be useful for the screen-reader users. Hence, 'aria-required` is useful it takes boolean value.
<input type="text" required aria-required="true" />
Happy Learning!!
Like it? Any question? or just want to say Hi!! Follow me at Twitter and Linkedin
Top comments (1)
First observation - you forgot to add any tags to the article...I couldn't find it at first! 😋
Also while we are on general stuff, you should use the series feature on dev.to (on the edit page click the cog icon at the bottom, in the modal that pops up name the series and then edit the other articles to the series to use the same series name, it helps people find your other posts!). This stops you having to add the links at the start of the article (and more importantly, people who land on "article 2" can see article 5 exists!)
Anyway, onto the answers....your answers are getting so much better as this series progresses! Only a couple of additional points I would make:
33: What is focus-trap?
You haven't quite got it right.
A focus trap is when a user cannot get out of an item at all. So in the example image someone can eventually tab their way out of the menu, so it isn't a trap (just a poor design!).
A keyboard trap is when you literally cannot get back from where you are now without reloading the page.
A prime example would be a modal dialog where the only way to close it is to click on an X or the overlay. A bad developer has used an icon with a click event for the close button instead of a
<button>so a keyboard user cannot close the modal (they cannot focus the icon). They are trapped within the modal.34: Give an example where you have to change the tabindex
This question is a tough one to answer, does it mean where you should use the
tabindexattribute or where you should actually change it from one value to another?The only time I can think of where you would change the
tabindexattribute is when you open a modal and you want to trap focus within it for screen reader users. As they don't just use Tab to navigate there are ways for them to escape the modal (by cycling links on the page with "k" for example).As such when a modal is opened we should add
tabindex="-1"to every interactive element outside of the modal to ensure focus is truly trapped within it.Other than that I think the answers are fantastic!
As always I look forward to the next 10 questions as this series is awesome! 💪