How to avoid harming users with epilepsy and vestibular impairment

  • Usability
  • Design
  • Animation
  • CSS

Accessibility helps people not only to use interfaces without issues but also not to feel literally sick. People with epilepsy and vestibular impairment can struggle with this. In this article, I want to discuss what accessibility means for them.

Let's start by talking about vestibular impairments, epilepsy, and epileptic seizures.

Vestibular Disorders

Many people know the feeling of motion sickness, dizziness, and nausea. It could be happening to you because of poor sleep, a cold, and a bunch of other reasons.

Vestibular Disorders are related to the inner ear and the part of the brain that controls balance and eye movement.

This is a large group of disorders. It includes head injuries, vestibular migraine or migraine with aura, brain tumours and more. They often have similar symptoms:

  • dizziness;
  • nausea;
  • blurred vision;
  • headaches;
  • trouble concentrating.

And the trigger can be inaccessible interfaces. Facundo Corradini in an article on A List Apart described how he lay in bed for hours with severe vertigo after encounters with parallax.

There are indeed many such users. There are about 15% of the world's people with chronic migraines alone.

Epilepsy and seizures

Epileptic seizure is uncontrolled increased or synchronised activity of neurons in the brain. It results in seizures, paralysis, temporary failure of internal organs, loss or confusion, partial amnesia, and outbreaks of fear and anxiety.

Seizures can occur on their own or be part of entire illnesses. If they recur frequently, they are considered epilepsy.

Some statistics. About 8-10% of people in the world have had at least one epileptic seizure. In 3% they have resulted in epilepsy.

Seizures can be influenced not only by internal factors but also by external factors. For example, light or sounds.

Seizures triggered by light, sounds and even reading are called reflex seizures. When there are many such seizures, a person has reflex epilepsy (RE).

Reflex epilepsy comes in several types. We are most interested in photosensitive epilepsy (PSE). It is triggered by intense flickering light or movement. It occurs in 5% of all people with epilepsy. It occurs most often between the ages of 7 and 19.

So content that flashes, flickers and flashes can lead to an epileptic seizure. It seriously increases electrical activity in neurons.

What are the threats

So who can cause an epileptic seizure or other negative physical reaction?

  • Video.
  • Gifs.
  • Canvas.
  • SVG, CSS, and JS animations. For example, when there are moving images next to the text or the foreground and background are simultaneously scrolling in different directions - parallax effects.
  • Animated scrolling that lasts longer than 1/4 second.
  • Graphics with contrasting stripes, squares, spirals and concentric circles.
  • High contrast.

Not too long ago, I faced eye strain and feelings of nausea because of splash screen in WebStorm 2021.1 myself. It's just a static image though. Thanks to a JetBrains team for listening to the feedback and reduced the saturation of the images.

There are more examples of problematic interfaces in "Your Interactive Makes Me Sick" by Eileen Webb. I hope your vestibular system handles this challenge better than mine.

You don't even need an image or video to cause harm. A

element set to change colour and luminosity at high frequency, easily done via JavaScript, can cause real harm. And, flickering can occur everywhere. For example, "spinners" commonly used to display while pages load can easily "flicker" while spinning.

MDN.

Tips & Tricks

It is dangerous to involve people with epilepsy and vestibular impairment in testing. So the only thing left to do is to be proactive and take into account the advice given by experts.

So what can we do to avoid harming users?

The frequency of normal and red flashes is no more than 3 times per second (3 Hz). This is the minimum accessibility requirement for people with epileptic seizures.

A general flash is a pair of opposite states of relative brightness when it changes by 10% or more. In this case, the relative brightness of the dark image is less than 0.8. And red flash is a pair of opposite transitions where there is a saturated red colour in between.

You can check video and animations with the free software Photosensitive Epilepsy Analysis Tool (PEAT). However, it is only suitable for non-commercial purposes. For commercial purposes, there is a paid Harding Test.

If the frequency of flashes is more than 3 times per second, you can reduce their area and make it a "Small safe area". This is less than 10% of the centre of the field of view or less than 25% of the screen size. This is because the central part of the eye consists of a large number of sensors. They are more active than others in transmitting signals to the visual cortex and can overload neurons.

This isn't the most reliable solution. A user could visit the site from a mobile device and bring it too close to their eyes.

If possible, it's best to avoid red flashes or saturated shades of red in videos and animations altogether.

Watch the contrast of the animation and do not make it too high.

You can switch off the animation if it's not a key functionality. The prefers-reduced-motion media feature comes in handy for this.

It checks a selection of "Reduce Motion" on macOS or "Show animations" on Windows. Right now its global support is 96.75%. There's an example of how it works in the W3C demo.

There're no ironclad values for speed, smoothness and other animation properties. So you can use the experience of other developers or ask users about their experience.

Option 1 with prefers-reduced-motion only:

@media (prefers-reduced-motion: reduce) {
    *:not(.safe-animation),
    *:not(.safe-animation)::before,
    *:not(.safe-animation)::after {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

Option 2 with advantages of reduced motion' andupgrade':

@media screen and
    (prefers-reduced-motion: reduce), 
    (update: slow) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

An update media feature from the Media Queries Level 4 specification, which is now in candidate recommendation status. update determines whether the output device can change an appearance of content once it has been rendered. There are three values: none, slow and fast.

The snippet below uses low. It is suitable for situations where the layout changes dynamically according to normal CSS rules, but the device doesn't display the changes smoothly. For example, e-ink screens or cheap smartphones.

Option 3, which has everything:

:root {
    --animation-duration: 250ms;
    --transition-duration: 250ms;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    :root {
        --animation-duration: 0.001ms !important;
        --transition-duration: 0.001ms !important;
    }
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    * {
        animation-duration: var(--animation-duration);
        animation-iteration-count: 1 !important;
        transition-duration: var(--animation-duration);
    }
}

@media screen and (prefers-reduced-motion: reduce), (update: fast) {
    .c-educational-concept {
        --animation-duration: 6000ms !important;
        ...
        animation-name: educational-concept;
        animation-duration: var(--animation-duration);
    }
}

Option 4, which can be added to a browser extension for personal use:

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

If possible, add alternative styles without animation and dangerous images or give a link to a text version from pages with parallax.

Not all users are advanced and know where the animation settings are. If you consider the human factor, you can add a special button in the menu. It will enable safer animations. This is what they did on an Animal Crossing website.

It should be possible to pause, stop or generally hide any information that:

  • automatically scrolls, moves, and blinks;
  • refreshes for more than 5 seconds;
  • displayed in parallel with other content.

For example, parallax effects or carousels. Usually, pause and stop buttons handle this.

Automatic video playback can be stopped by removing autoplay in <video controls>. Sound can be muted with the muted attribute.

For all animated elements, you can set animation-play-state: paused;. This will pause an animation by default.

This requirement does not apply to loading animations. Users might think the loading is paused or cancelled. The same goes for ads, as they are sometimes necessary for accessing content. Hello, YouTube.

Set a short animation-duration and transition-duration instead of animation: none or transition: none.

GIFs cause the most trouble. Users cannot control their speed or turn them off.

A good option is to replace GIFs with videos using the loop attribute or with SVG animation. Use scripts to add control elements for them. For example, gifplayer on jQuery. Or you can add the web component <x-gif>.

Animated text is also not the most harmless part of the interface. There are no standard ways to adjust its animation yet. If it moves significantly to the side or noticeably increases/decreases in size, it can also cause seizures or dizziness. So, it's better to either completely abandon this idea or change the content slightly and smoothly.

Place a warning about dangerous content if you're unsure and can't do anything else.

Follow a couple of simple recommendations about patterns and images. If they consist of straight contrasting lines, it's better to stop at 8. If they are waves, then place no more than 5 next to each other.

What to refer to in WCAG 2.1

Accessibility criteria for people with epileptic seizures and vestibular impairment are collected in two guidelines:

Making an interface safe is not that hard, but very important. When people with epilepsy or vestibular impairment visit a website, it's not just about being able to read a text. An inaccessible interface can make them feel worse and sometimes pose a threat to life.

Vestibular impairment can appear spontaneously. For example, due to side effects from medications, head injuries, and even hot weather. The same situation applies to epileptic seizures. We are somewhat prepared for users with screen readers, but we cannot predict what will make a person feel unwell. Therefore, it is so important not to create barriers from the start.

Further reading

Other articles