Accessible Kinetics

How to Use Kinetics for a Range of Visual Abilities

Kinetics is an inclusive system and perspective that aims to work for a range of abilities. Kinetics can improve the experience for users with cognitive disabilities. It can help orient users within a UI, guide them to call to actions, and create relationships/hierarchy between elements on a page. However, animation is a double edged sword and if designed improperly it can cause headaches, nausea, dizziness, or vertigo for users with vestibular disorders. In fact, in some cases animation can cause seizures for users with Photosensitive Epilepsy (https://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures). Included in the following Do’s and Don’ts are two requirements from WCAG (global accessibility guidelines from W3C) on how to prevent these reactions.

Salesforce Kinetics System’s #1 principle is functional animation. When this is your primary driver for adding animation to your UI, we can create accessible experiences that drive clarity, productivity, and delight.

Designing Flashing or Blinking Animation

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

Do: Design clear, simple, and purposeful animations.

A simple animation of a red dot on the alert icon

Don't: Design anything that is flashing/blinking or cycling of an animation at a speed faster than 3 times per second because it may cause seizures (WCAG 2.3.2)

An example of cycling animation of the red dot on the alert icon

Playing Animation

Do: For any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there should be a mechanism for the user to pause, stop, or hide it. Except when the movement, blinking, or scrolling is part of an activity where it is essential.

A user clicks on a pause button, stopping an image carousel.

Do: For any auto-updating information that starts automatically and is presented in parallel with other content, ensure there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update. Except when the auto-updating is part of an activity where it is essential.

Don't: Play the animation for longer than five seconds (or continuously loop it) without giving the user any way to pause or stop it.

An image carousel cycles through three images, but there is no visible way for a user to stop this animation.

Don't: Add non-essential auto-updating information that may start automatically or be presented in parallel with the main content without designing a static version and an alternate text to support the user’s reduced motion preferences

Animation Format

Do: Use video clips that the user can press to start and pause for non interactive animations that exist to provide supplementary information.

Use animations created with SVGs that are coded using CSS and Javascript as they are scalable across multiple screen sizes, support prefers-reduced-motion on browser level settings and provide control over playing animated content for developers as well as end users

A loading circle made up of five smaller circles animates on screen along with the text “loading.” The loading circle and text fade away briefly, then return with updated text that says “Almost there.”

Don't: Use gifs that are on a constant loop.

Using Animation to Inform the User

Do: Include additional static elements to convey the same information as the animation (ie. text, icons, etc).

Don't: Rely on using the animation alone because some users have system level preferences to turn off all animation.

User Settings for Animation

Do: Respect a user’s system level settings for motion/animation. If a user has prefers-reduce-motion CSS Media Query in their OS/Browser settings, then turn off animations completely.

In addition to the default setting, add a Salesforce-specific motion settings in addition to turn off animations.

Interaction animation as seen in a vertical navigation is turned off when the users toggles on a checkbox labeled “Force Reduced Motion”

Don't: Rely solely on animation alone to demonstrate important information. Because animation affects people differently, we’re not able to predict what level of animation is safe for every single user, so it’s best to completely turn it off if the user has requested.

Moving Things Across the Screen

Parallax Animations

Parallax can be used to distinguish primary content from background elements. In essence parallax combines the use of z-depth and layering to elevate important content from a page and create an interesting relationship between the static background pieces of a page.

Do: Use parallax scrolling with option to turn off unnecessary motion globally. If decorative elements move in and out of view when the essential page content is scrolled vertically, use a control at the top of each page that allows the user to turn off unnecessary animations.

Do: Include the ability to turn off non-essential animations as a site-wide setting. Refer to prefers-reduced-motion media query in the User Settings for Animation section.

Do: Design parallax motion to be subtle and as a punctuation to the scrolling movement, at the end of, or at the beginning of a transition.

Don't: Rely on parallax motion alone to convey affordance for interactions.

Don't: Move screen elements drastically over several distance while designing parallax animations.

Kinetics accessibility may be defined based on three categories.

Classic: Classic motion is an out-of-the-box experience that displays the full spectrum of motion, a combination of both functional and decorative animations in a component or an experience. For example, when a user interacts with an icon button within an expandable list, its background scales and changes color to blue on a hover. When the user clicks on the icon button, a ripple animation plays in the border and background of the button. And an expandable field opens underneath the first icon in response to the user's click.

As a user interacts with an icons, its background scales and changes color to blue. When the user clicks on the icon button, a ripple animation occurs in both the border and background of the button. An expandable field opens underneath the first item in response to the click

Utilitarian: Utilitarian motion offers a more restrained experience, displaying only the most crucial feedback and guidance for users. Utilitarian motion leaves out any movement users may construe as decorative or secondary. For example, when a user interacts with a button icon within an expandable list, its background scales and changes to blue on a hover. With a click, an expandable field opens underneath the related item and its background scales and changes color to blue.

As a user interacts with a button icon, its background scales and changes to blue on hover. On click an expandable field opens underneath the related item

Reduced annimation: Reduced animation offers an experience of no motion if the user chooses to see only a static UI. For example, as a user interacts with a button icon, its background changes instantly to blue on a hover. On a click, a new field appears underneath the related item. Users can choose to turn off animations on the browser level. This is a great option for users who suffer from vestibular disorders or those who are generally affected by seeing animations on screen. The reduced motion can be triggered by the ** prefers-reduce-motion media query in a user’s OS/Browser settings.

As a user interacts with a button icon, its background changes instantly to blue on hover. On click a new field appears underneath the related item

Out of the box Kinetics: All default animations run both utilitarian and decorative kinetics for components and experiences. A user should have the capability to toggle between Classic or Utilitarian animation settings at the browser level depending on their preference, unless the user settings are set to prefers-reduced-motion which would turn off animations all together.

Cursor

The default pointer must change to an open hand click state when it encounters a clickable element on the screen. There are times where the default cursor behavior doesn’t cut it. In these cases, we can change the cursor to a more meaningful visual state that reflects the expected user interaction on that element.

As the default cursor hovers over a clickable element, it changes to an open hand click state.

Playable animation: Pause the carousel animation when the mouse pointer is hovering over the carousel. This will help users access content and links within the carousel more easily.

Keyboard

The Kinetics out of the box experience will be viewable on keyboard interaction just as it is experienced with a mouse interaction.

Interactive animation: Users can tab through components and receive Kinetics affordances in addition to the focus animation.

A user tabbing through three radio buttons, selecting them one at a time.

Playable animation: On keyboard interactions, parallel or continuous animated content such as carousels must pause till the user tabs away. Keyboard users will not lose their position when the carousel is paused.

Focus

The focus state animates with the keyboard and cursor interaction. Kinetics follows standard styling hooks for all focus state animations to maintain consistency between all component interactions. Refer to the Styling Hooks section to learn about styling hooks in detail.

A cursor hovers over an icon of a cog, triggering a blue spotlight, then clicks the icon, triggering a ripple animation and a blue halo around the icon.

As a user tabs, an icon of a cog transitions from being grey to blue with a blue halo, a ripple animation, and finally returning to grey with no halo.