cssaccessibility

Should prefers-reduced-motion should be used to disable subtle movements based on mouse clicks?

I am about to reduce the animations on my web page by checking for @media (prefers-reduced-motion: reduce). It is obvious the big sweeping animations that need to go away, such as images sliding out and into the page. However, I'm not sure about more subtle things such as button clicks or header banners when clicked.

In the included example, should reduced-motion be checked whether to disable the closeButton and header text shrink when clicked? Or, are minor movements like this OK?

div.closeButton
{
    color         : black;
    text-align    : center;
    display       : inline-block;
    cursor        : pointer;
    box-shadow    : 0 0 0 1px black;
    padding-left  : 6pt;
    padding-right : 6pt;
    margin-top    : 2px;
    margin-right  : 1px;
    margin-bottom : 2px;
    margin-left   : 6pt;
    border-radius : 4px;
}

div.closeButton
{
    width : 6pt;
}

div.closeButton::before
{
    content : "\00d7"; /* × */
}

@media screen and (pointer: fine)
{
    div.closeButton:hover
    {
        color      : red;
        box-shadow : 0 0 0 2px red;
    }

    div.closeButton:active
    {
        color      : red;
        box-shadow : inset 0 0 0 1px red, 0 0 0 1px red;
    }

    div.closeButton:active::before
    {
        content : "\2022"; /* • */
    }
}

div.header
{
    width: 50%;
    line-height: 40px;
    font-size: 32px;
    background-color: green;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}
div.header:hover
{
    color : yellow;
}
div.header:active
{
    font-size:28px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body>

    <div class="closeButton"></div>

    <p></p>

    <div class="header">Some Text Here</div>

</body>

</html>

Solution

  • To answer the question directly: There's no hard-and-fast rules about what kinds of animations to remove or reduce. It's a judgement call that should be informed by an understanding of the myriad of ways that people interact with screens.

    But to provide more helpful guidance based on your examples: That header text scale changes quite a bit. For someone with vertigo or vestibular issues, that animation could be quite jarring. Also keep in mind that some people with low vision or acute focal length issues may be holding a screen quite close to their face—magnifying the effect of the animation greatly. So that kind of scale-changing animation is a good candidate for reduction or elimination for users with prefers-reduced-motion set to reduce.

    My personal rule of thumb: Play it safe. Someone has gone to the trouble of finding and changing that setting in their browser because they have issues with animations. Consider eliminating or greatly reducing all animations that don't carry semantic connotations that can't be expressed in an alternative way.