Accessibility with Transitions

In the past two chapters, we learned how to use transitions in Svelte. Transitions, when used correctly, can enhance the user experience, guiding a user’s attention, providing feedback, and adding a layer of polish to the interface. However, for users with vestibular disorders, these animations can be uncomfortable or even debilitating. Therefore, it is essential to strike a balance between creating engaging animations and ensuring that they do not negatively impact users with specific needs.

In this chapter, we will dive into the techniques available to make web transition more accessible for users with a vestibular disorder, exploring CSS and JavaScript approaches to respect a user’s preferences regarding motion.

By the end of this chapter, you will have a better understanding of web accessibility and how to create more inclusive web applications that cater to all users, regardless of their specific needs or preferences.

In this...

Technical requirements

All the code in this chapter can be found at the following link: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter15/01-accessible-transition

What is web accessibility?

Accessibility is the design of products, devices, services, or environments to be usable by as many people as possible, regardless of any physical, sensory, or cognitive disabilities they may have.

It is vital to ensure that websites are accessible to all users. There are many disabilities that can potentially affect a user’s experience on a website. Ensuring a website’s accessibility allows everyone, regardless of their abilities, to have equal access to the same services and information that are available to everyone.

One of the many disabilities that can hinder a website’s user experience is a vestibular disorder. In this chapter, we will specifically focus on enhancing accessibility for individuals with vestibular disorders.

Vestibular disorders are conditions that affect the inner ear and brain, and they can cause difficulties with balance, spatial orientation, and movement perception. Imagine that your body’s natural...

Understanding user preference with prefers-reduced-motion

Most operating systems offer accessibility settings that allow users to disable animation effects. For instance, in Windows 11, you can navigate to Settings | Accessibility | Visual Effects | Animation Effects and uncheck the Animation Effects option to turn off animations.

igure 15.1: The Animation effects option in Window 11

In web applications, you can use the prefers-reduced-motion CSS media query to determine whether a user has activated a setting on their device to reduce or eliminate non-essential motion.

Here is an example of how to use the prefers-reduced-motion CSS media query:

@media (prefers-reduced-motion: reduce) {
  div {
    /* Removes animation */
    animation: none;
  }
}

In the preceding code snippet, if a user has indicated a preference for reduced motion, we set the CSS animation property to none to remove animation from the <div...

Reducing motion for Svelte transition

After learning how to obtain a user’s preference for reduced motion, let’s now respect that preference by reducing unnecessary motions in our transitions, which could potentially trigger vestibular discomfort.

In the following code block, there is an example of our Svelte component, which has a fly transition applied to the list items:

<script>
  import { fly } from 'svelte/transition';
  export let list = [];
</script>
<ul>
  {#each list as item}
    <li transition:fly={{ x: 40 }}>{item}</li>
  {/each}
</ul>

In the preceding code, whenever a new item is added to the list, a new <li> element will fly in from the right and be inserted into the list. This flying motion could be a trigger for users with vestibular disorders.

However, the flying transition is not essential because the application will still function...

Having alternative transitions for inaccessible users

Users with vestibular disorders may feel discomfort when exposed to motion-based animations, such as scaling or panning large objects. However, they are generally less affected by subtler animations, such as fading.

Switching all transitions to fading for users with vestibular disorders is not a one-size-fits-all solution. It is always better to seek feedback from the users themselves.

We will continue using the same example from the previous section and explore how we can switch from the fly transition to a fade transition when a user prefers reduced motion.

One thing to note is that, in Svelte, you are not allowed to apply more than one transition to an element.

For example, the following code is invalid and will result in a build error:

<div transition:fade transition:fly />

This means we can’t apply two transitions to an element and then decide which one to use. We must find a way to switch between...

Summary

In this chapter, we explored the importance of accessibility in web design and how to implement transitions that consider the preferences of users with vestibular disorders. By understanding the impact of motion-based animations on users with vestibular disorders, we can create more inclusive and user-friendly web applications.

We learned about the prefers-reduced-motion media query, which allows us to detect whether a user has indicated a preference for reduced motion in their system settings. Using this media query, we can adjust our transitions to be less motion-heavy or remove them altogether for users who prefer reduced motion.

We also discussed how to create custom transitions in Svelte for accessibility. We looked at an example of a custom transition, named accessibleFly, that switches between a fly and a fade transition, based on a user’s preferences for reduced motion. This custom transition is considerate of users with vestibular disorders while still...