Web accessibility for seizures and physical reactions

Draft
This page is not complete.

Web accessibility for seizures and physical reactions

Seizures

Epilepsy seizures caused by light are known as photosensitive epilepsy.  Content that flickers, flashes, or blinks can trigger photosensitive epilepsy.  Web technologies that use video, gifs, animated SVGs, Canvas, CSS and JavaScript animations are all capable of content that can induce seizures or other incapacitating physical reactions. Certain visual patterns, especially stripes, can also cause physical reactions even though they are not animated. Photosensitive epilepsy is actually a kind of "reflex epilepsy" -- seizures occur in response to a trigger.  In the case of photosensitive epilepsy, seizures are triggered specifically by flashing lights, but other types of reflex epilepsies may be triggered by the act of reading, or by noises.  Patterns and images can also trigger epilepsy.

The the authors of the article, “Gamma Oscillations and photosensitive epilepsy”, note that “Certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy”   In another article from The Epilepsy Foundation, "Shedding Light on Photosensitivity, One of Epilepsy's Most Complex Conditions"  describes how static images can cause problems: "Static or moving patterns of discernable light and dark stripes have the same effect as flashing lights because of the alternation of dark and bright areas."  "A pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation"  according to research by the Epilepsy Foundation of America Working Group.  In addition to stripes, checkered patterns have also been known to cause photosensitive seizures, according to Cedars-Sinai. 

Although static images are possible as triggers, they are less consistent. The trigger that is well established and strong is flashing/strobe lights.   Dr. Selim Benbadis of USF's Comprehensive Epilepsy Program notes, "The only thing that is really documented is flashing lights, which can trigger seizures in patients with photosensitive epilepsy. Only a few types of epilepsies are photosensitive though, and the vast majority of epilepsies are not." In addition to seizures brought about by photosensitivity, listening to certain pieces of music can also trigger what are called musicogenic seizures, although these types of seizures seem to be much more rare.  For a great introduction on the topic of  musicogenic seizures, visit Epilepsy Ontario's web page on Musicogenic Seizures.

Seizures and epilepsy are not the same.  In its article, "A Revised Definition of Epilepsy" the Epilepsy Foundation notes that..."a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures." According to the Epilepsy Foundation's page "How Serious Are Seizures?" , "Sudden unexpected death in epilepsy (SUDEP) is likely the most common disease-related cause of death in with epilepsy. It is not frequent but it is a very real problem and people need to be aware of its risk".

The point is, seizures most definitely can be and are fatal, and developers and designers are incredibly important to making the web a safer place for those with sensitiviities to photosensitive or musicogenic triggers.

Seizures can be fatal, but even the ones that are "only" debilitating can be of such severity, that they render the user incapacitated.  Other disorders, such as disorientation, nausea, vomitting, and more can also be so severe that the user is unable to function.  The Epilepsy Foundation's article, Photosensitivity and Seizures, provides a list of triggers that may cause seizures in photosensitive people; here's an excerpt from that list:

  • Television screens or computer monitors due to the flicker or rolling images.
  • Certain video games or TV broadcasts containing rapid flashes or alternating patterns of different colors.
  • Intense strobe lights like visual fire alarms.
  • Natural light, such as sunlight, especially when shimmering off water, flickering through trees or through the slats of Venetian blinds.
  • Certain visual patterns, especially stripes of contrasting colors.

That same article continues that many factors must combine to trigger the photosensitive reaction.  Of note is that it includes the wavelength of light as a possible factor; wavelengths in the red part of the spectrum seem to be especially problematic.  In the article, "Undersanding WCAG 2.0  Three Flashes or Below Threshold" notes generaly that: “Individuals who have photosensitive seizure disorders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes"  and goes on to note, very specifically that: "People are even more sensitive to red flashing than to other colors, so a special test is provided for saturated red flashing”.

You don't even need an image or video to cause harm.  A <div> element set to change color and luminosity at high frequency, easily done via JavaScript, can cause real harm.

Additional concerns for exist individuals with motor-skills problems.  For example, the page for Trace Research & Development Center’s Photosensitive Epilepsy Analysis Tool notes that, “Photosensitive seizures can be provoked by certain types of flashing in web or computer content, including mouse-overs that cause large areas of the screen to rapidly flash on and off repeatedly.”

Other physical reactions

Nausea, vertigo (or dizziness), and disorientation are very nonspecific symptoms associated with all kinds of diseases and not particularly suggestive of seizures (except maybe disorientation, which is seen in seizures).  However, seizures are not the only adverse physical response possible from flashing, flickering, blnking, and other such stimuli.  In the New York Times article from 1977,  "TV Cartoon's Flashes Send 700 Japanese Into Seizures" , some of the children reacted to the cartoon by nausea, shaking, and vomitting blood rather than seizures.  Still, the reactions from the children were so severe, they had to be rushed to the emergency room. The pysical disorders listed below are all possible consequences: each of these physical reactions may be so severe as to be incapacitating.

  • Seizures
  • Vestibuler Disordera
  • Migranes
  • Nausea
  • Vomiting

About flashing, blinking, and flickering


Although "flashing" and "blinking" are sometimes used interchangably, they are not the same. According to the W3C, blinking is a distraction problem, whereas flashing refers to content that occurs more than 3 times per second, is large enough, and bright enough.  Section 508 prohibits flickering effects with a frequency greater than 2 Hz (flickers per second) and lower than 55 Hz.  The Epilepsy Foundation's article "Shedding Light on Photosensitivity, One of Epilepsy's Most Complex Conditions" notes that "Generally, flashing lights between the frequencies of five to 30 flashes per second (Hertz) are most likely to trigger seizures. In order to be safe, the consensus recommends that photosensitive individuals should not be exposed to flashes greater than three per second."

The flashing, blinking, and flickering can take place in surprisingly subtle ways.  Consider the "flickering" spinner.  According to Mikael Ainalem's article,  A Brief History of Flickering Spinners asynchronous programming contributes to the ease of creating  "flickering" spinners. A designer may be so focused on producing a spinner that he forgets to evaluate for flashing.

Flashing -- What exactly, is a flash?

According to the article,  Photic- and pattern-induced seizures: expert consensus of the Epilepsy Foundation of America Working Group, "A flash is a potential hazard if it has luminance >or=20 cd/m2, occurs at a frequency of >or=3 Hz, and occupies a solid visual angle of >or=0.006 steradians (approximately 10% of the central visual field or 25% of screen area at typical viewing distances)."

It's important to note the statement about "typical viewing distances".  New VR and gaming systems have occular masks that bring images much closer to the eyes, and therefore, requires greater caution and smaller flash sizes.

Certain colors, and/or combinations of colors, also matter.  In the article, Certain Colors More Likely To Cause Epileptic Fits, Researchers Find, "...complexities underlying brain dynamics could be modulated by certain color combinations more than the other, for example, red-blue flickering stimulus causes larger cortical excitation than red-green or blue-green stimulus."

Saturated Red is a special case

 WCAG 2.1 general flash and red flash thresholds  are defined as follows:

  • general flash is defined as a pair of opposing changes in relative luminance of 10% or more of the maximum relative luminance where the relative luminance of the darker image is below 0.80; and where "a pair of opposing changes" is an increase followed by a decrease, or a decrease followed by an increase, and
  • red flash is defined as any pair of opposing transitions involving a saturated red

These standards are based on earlier research.  In August, 2004, the Epilepsy Foundation of America convened a workshop to begin to develop an expert consensus on photosensitive seizures.  Among their results was the understanding that "A flash is a potential hazard if it has luminance at least 20 cd/m2 , occurs at a frequency of least 3 Hz, and occupies a solid visual angle of at least 0.006 steradians (about 10% of the central visual field or 25% of screen area at typical viewing distances). A transition to or from saturated red also is considered a risk." 

Critically, they also note: "Irrespective of luminance, a transition to or from a saturated red is also considered a risk."

How big?  It depends.

Val Head, in the A List Apart article, Designing Safer Web Animation For Motion Sensitivity,  notes that relative size is a factor. "The physical size of screen matters less than the size of the motion relative to the screen space available—so a small button with a 3D rotation probably won’t cause trouble, but a full-screen wipe transition covering the entire screen likely would"

"Relative" size matters a lot; although exact proportions are given in terms of pixels, but it's not enough.  Viewing distance also matters.  According to PEAT, "The combined area of flashes occurring concurrently occupies no more than a total of one quarter of any 341 x 256 pixel rectangle anywhere on the displayed screen area when the content is viewed at 1024 by 768 pixels."    Not often mentioned in this reference to relative pixel size is the fact that the assumed viewing distance was nine feet away.  How close a screen is to the viewer's eyes affects the field of vision.

 WebVR is is an open specification that makes it possible to experience VR in your browser, which can be experienced on phone, computer or headset.  It's technology enables easy, cheap access via basic headsets like Google Cardboard, so the concern about flashing images in an occular mask is a growing one, since the mask is so close to the eyes.

The Epilepsy Society (UK), in their article, "3d Films and Virtual Reality", noted:

"With VR the images flash very quickly and generally this is too quickly to trigger a seizure in people with photosensitive epilepsy. However, the field of view is large and so more of the eye is stimulated. This means that more of the brain may be affected and this may trigger a photosensitive seizure." 

The point that the field of vision is an important consideration arises in the article addressing WCAG 2.1  "Understanding Success Criterion 2.3.1; Three Flashes or Below Threshold"  as follows

The 1024 x 768 screen is used as the reference screen resolution for the evaluation. The 341 x 256 pixel block represents a 10 degree viewport at a typical viewing distance. (The 10 degree field is taken from the original specifications and represents the central vision portion of the eye, where people are most susceptible to photo stimuli.)

Need more explanation about 10 degree viewport and typical viewing distance

Patterns, and parallax

Contrasting dark and light geometric patterns are a known culprit; stripes and checks are the best known examples.  The Epilepsy Foundation of America Working Group actually nailed down details, right down to how many light-dark pairs of stripes are likely to provoke seizures, and, in what conditions.   So, for example, if the pattern is unchanging and straight, no more than eight lines, but if it undulates, no more than five. 

Parallax effects can cause disorientation -- use with caution, and if you must use them, ensure that the user has a control to turn them off.

Color, in general

Tom Jewett,  Lecturer Emeritus of Computer Sciences at Cal State University Long Beach, developed a comprehensive Color Tutorial to explain color. 

Terminology used in describing colors matter greatly for the developer.  Terms used to describe the components of color can be confusing, because sometimes different terms can be used to describe the same facet of color. "Luminosity" and "Saturation" are particularly important concepts as they apply to photosensitive seizures.  Taking the example concept of "saturation" for example, in some circles, "saturation" is known as "chroma".  In other circles, "chroma" and "saturation" are two differenct concepts.  One very important concept that comes into play is the concept of saturation.   In his article, "The Difference Between Chroma and Saturation"  provides a definition: Saturation is the “colourfulness of an area judged in proportion to its brightness” 

Saturation is not brightness.  Brightness refers to how much white or black is mixed in with a color.  One can decrease saturation by adding white, black, or gray to the color; to take the example further, brightness can be increased by adding the color white, but saturation will simultaneously be reduced when you do that.  A common example is to add white to red to get the color pink.   Pink is considered a desaturated red.

It's important to know which "color space" you are working in, as they map to different measurement systems.  HEX, RGB and HSL color spaces, for example, all are measured differently.  Conversions are sometimes needed in order to "translate" the measurement systems used in the medical field into the measurement systems used in web technologies; this is very similar to the scenario where one must convert the U.S. Standards Length of yards to the SI Units of  meters.  An available online tool to convert from RGB to HEX and HSL is RapidTable's  RGB to Hex color conversion tool. In the W3C article, Three Flashes or Below Threshold Understanding SC 2.3.1, color itself is of course critical, but more important is how the color relates to its background, and how drastically the color changes frame to frame in animation. 

The W3C's CSS Color Module 3 section on numerical calculations of colors serical calculations of colors  provides the following example on that page:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

Saturation

The concept of saturation is a critical one in this topic.  While the definition of saturation for each of the color spaces may seem confusing when compared to one another, it's comforting to know that saturation is readily measured.   The color spaces that come up most frequently when discussing photosensitivity are the RGB, the HSL, and HSV color spaces. It's important to know what color space you're working with.  For example, saturated colors have lightness 0.5 in HSL, while in HSV they have value 1.  Surprisingly, a Wikipedia article on HSL and HSV points out that "Mixing these pure colors with black—producing so-called shades—leaves saturation unchanged. In HSL, saturation is also unchanged by tinting with white, and only mixtures with both black and white—called tones—have saturation less than 1. In HSV, tinting alone reduces saturation."

How is "saturation" described in the example of Crimson Red? It's worth noting that  just because "Crimson Red" has a composition of 60% red, doesn't mean it is not a "saturated" red. Color Hexa Crimson Red / #990000  describes the color as possessing a saturation of 100% in the RGB color space, as follows"

"In a RGB color space, hex #990000 (also known as Crimson Red, Stizza, USC Cardinal) is composed of 60% red, 0% green and 0% blue. Whereas in a CMYK color space, it is composed of 0% cyan, 100% magenta, 100% yellow and 40% black. It has a hue angle of 0 degrees, a saturation of 100% and a lightness of 30%."  

So, conversions are necessary to be able to uncover saturation values from the RGB color space.  How to do these conversions will be described later in this document, but for an interesting read on this topic, consider this Stack Exchange thread, "Formula to Determine the Brightness of RGB Color". 

The Special Case of "Red" and "Saturated Red"

It has been demonstrated that some colors are more likely to cause epileptic fits than others;  Human physiology and psychology is affected by the color "red" in general.

  • Red Desaturation tests  The human eye is so sensitively "tuned" to red, that opthamolegists set up a test using it.  The Red desaturation test assesses the integrity of the optic nerve.  For more information as to how an opthamologist uses this test, see Red Desaturation
  • Red Environment: Studies have shown that for those who suffer Traumatic Brain Injury, cognitive function is reduced in a red environment

Saturated Red is a special, dangerous case, and there are special tests for it.

The concept of color saturation is a difficult one to understand when only looking at numbers and terminology.  Wikimedia Commons provides a great image for illustrating red saturation.  It's the same "color" going from least saturated on the left hand side to most saturated on the right hand side.  (Thanks to the author, Datumizer, for this example)

Red Saturation from Wikimedia Commons svg saved as png Attribution: Datumizer [CC0]

More than one "red" color may be considered a "saturated" red. For example, in addition to the color #990000 described above, the color #8b0000  also has a saturation of 100%.  Not all saturated reds may be represented well in the RGB spectrum, or other spectrums commonly used in web development.  According to Wikipedia's page on "Shades of Red", the color "Carmine" is a saturated red in which, in its pigment form, mostly contains the red light with wavelengths longer than 600nm; the article makes the special note that "Carmine"   .is close to the extreme spectrum.  This places it far beyond standard gamuts (both RGB and CMYK), and its given RGB value is a poor approximation only."

Saturated Red Flashing: In addition to a red environment affecting the cognitive function of those with Traumatic Brain Injury, color in the red spectrum wavelength seems to require special concern, and, special tests. Dr. Gregg Vanderheiden, when testing the Photosensitive Epilepsy Analysis Tool, noted that the seizure rates were much higher than expected.  They found that we are much more sensitive to saturated red flashing.   (See the video, The Photosensitive Epilepsy Analysis Tool)The Photosensitive Epilepsy Analysis Tool)

Domination of the RGB color space 

According to the MDN document,<color>The <color> CSS data type represents a color in the sRGB color space.  Color has many ways of being defined, including RGB, RGB decimal, RGB percent, HSL, CMYK among others.

For digital concerns, much of the technology has historically resided in the RGB color space.  This is because the companies behind the evolution of digital technology set the standards, and these standards still retain a powerful presence today.  This is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements in the RGB color space still predominates, and this includes video production.  The RGB color model is extended to include “alpha” -- RGBA -- to allow specification of the opacity of a color. Note that there is no "opacity" specification in sRGB. Also, it is important to note that, unlike RGB values, there is no hexadecimal notation for an RGBA value

Newer technologies, such as OpenGL and Direct3D incorporate support for the sRGB gamma curve, although some articles for OpenGL reference use of RGBA rather than sRGB. WebGL is usually in the RGBA format; see an example of how it is used in the MDN document, "Clearing with colors".  

Tools that measure color from input

A great example of a tool that converts colors for you is Tom Jewett's "mini color selector" with HSL, RGB, Hex options for checking contrast, for Firefox, Chrome, or Opera browsers. 

Functional in Firefox, Chrome, and Opera browsers

Tools that measure color from an image

Color pickers are a great first step to "measuring" color.   Adobe has many products, such as Photoshop and Illustrator, that have powerful, fine-tuned color pickers, but there are online versions available as well. One example is ginifab.com.   You can upload a picture, and use their onlne color picker. This beautiful image of penguins is from Wikimedia Commons.Wikimedia Commons.

The concept of "clipping"

Although many conversion formulas are available to convert the measurements of one color space to another, there's not a perfect one-to-one relationship between them. Algorithms try to get to the nearest, closest "approximation" of one color to another.  When they can't match exactly, they fall to a process known as "clipping" to get to the nearest approximation. To see an example of how this works, we'll take a color selection from the penguin image below.  We'll be able to pick a point on the image, and see how the color of that point is interpreted in different color spaces for HEX, RGB, and HSL colors.

A group of Emperor penguins, the largest of all penguins. They stand nearly 3 feet tall and can weigh over 80 pounds. They are the most southerly of all penguin species, living and breeding on the ice.  Source	U.S. Antarctic Program Photo Library via Archive.orgAuthor	NSF/Josh Landis, employee 1999-2001

In these next steps, we will use a color-picker tool to grab the values of the black and white colors in one of the penguins.  The steps here are very typical  to all common color pickers.

             

Dark  and potentially "black" areas are explored with the mouse pointer, this particular color picker registered a "color snapshot" each time the mouse was clicked on a spot.  At the bottom of the screenshot, multiple black boxes on the bottom are visible; these represent the color snapshots that were taken with each click.  One of these samples had values of  HEX #00161e, RGB(0,22,30), CMYK(100,27,0,88).  It was not a pure black, but it was close. 

                 

Next, potentially "white" areas were explored with the mouse pointer, and as before, colors were recorded when clicked.  One of the recorded samples had a breakdown of HEX #fefefe, RGB(254,254,254), CMYK(0,0,0,0).  It was not a pure white, but it was very, very close.

These numbers can now be used to extract relative luminance values and contrast.  WCAG 2.1 describes how to calculate relative luminance using sRGB values.  Success Criterion 1.4.3: Understanding Contrast (Minimum) describes how to calculate contrast. It's not as simple as one color against another, font size and pixel size also figure into the calculation. That said, there are many tools that make it easy to do this, rather than having to make the calculations yourself. 

Note that in the case of the "white" sample, there is not an exact one-to-one relationship between the HEX color and the CMYK color.  A pure white in HEX would be #ffffff, not #fefefe, but the CMYK color space could only describe the slightly off-white color (in Hex) as a "pure" white CMYK(0,0,0,0). This is called, "clipping"; the algorithm assignes the converted values to the nearest approximation in the new color space, and this is expected behavior.  These approximations can vary between devices.  The W3C CSS Color Module 3 states the following:

"Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device. User agents may perform higher quality mapping of colors from one gamut to another."

Methods that measures color

Exploring the RGB color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the RGB color space, such as sRGB, scRGB, and RGBA. There are also different ways to refrence RGB:  RGB Decimal reference: 153, 0, 0 and an RGB Percent reference: 60, 0, 0.  Window.getComputedStyle() would return values using RGB Decimal Reference scale.   For example, if one were to use the method Window.getComputedStyle() on a div with a style="background-color:#990000;", it would return a computed background color as rgb(153, 0, 0) -- the RGB Decimal reference.

Window.getComputedStyle() uses CSS2, and measures it in terms of RGB.  It's important to note the following about CSS3 in terms of HSL color values on the W3.org's page on CSS Color Module Level 3:  "CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. It has been observed that RGB colors have ... limitations".  One of those limitations is that RGB is tied to computer hardware, rather than how the human eye perceives color. 

Measuring Luminance

When evaluating luminance, bear in mind the W3C's note on relative luminance: "Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3.". 

Calculations for relative luminance are not casual ones, that there are many tools that will do it for you. There is active discussion and investigation underway concerning luminance, contrast, and more.  See github issue #695

Some notes:

Luma and luminance are not the same.  From IEC 61966-2-2:2003(en)

 "Video systems approximate the lightness response of vision by computing a luma component Y′ as a weighted sum of nonlinear R′G′B′ primary components: Each RGB signal is, comparable to the 1/3 power function with an offset defined by L*. Luma is often incorrectly referred to as luminance."

Luminosity and Luminance are technically not the same, but sometimes, in the HSL color spectrum, they are used interchangably.  Sometimes the "L" in HSL stands for luminance, and sometimes, for luminosity.

Measuring patterns and parallax

"A pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation. When the light-dark stripes of any pattern collectively subtend at the eye from the minimal-expected viewing distance a solid angle of >0.006 steradians, the luminance of the lightest stripe is >50 cd/m2, and the pattern is presented for >or=0.5 s, then the pattern should display no more than five light-dark pairs of stripes, if the stripes change direction, oscillate, flash, or reverse in contrast; if the pattern is unchanging or smoothly drifting in one direction, no more than eight stripes."

Measuring the potential for harm

In August, 2004, the Epilepsy Foundation of America convened a workshop to begin to develop an expert consensus on photosensitive seizures. The following, expert, and authoritative information is from: Photic- and pattern-induced seizures: expert consensus of the Epilepsy Foundation of America Working Group.

"A flash is a potential hazard if it has luminance >or=20 cd/m2, occurs at a frequency of >or=3 Hz, and occupies a solid visual angle of >or=0.006 steradians (approximately 10% of the central visual field or 25% of screen area at typical viewing distances). A transition to or from saturated red also is considered a risk. A pattern with the potential for provoking seizures contains clearly discernible stripes, numbering more than five light-dark pairs of stripes in any orientation. When the light-dark stripes of any pattern collectively subtend at the eye from the minimal-expected viewing distance a solid angle of >0.006 steradians, the luminance of the lightest stripe is >50 cd/m2, and the pattern is presented for >or=0.5 s, then the pattern should display no more than five light-dark pairs of stripes, if the stripes change direction, oscillate, flash, or reverse in contrast; if the pattern is unchanging or smoothly drifting in one direction, no more than eight stripes. These principles are easier to apply in the case of fixed media, for example, a prerecorded TV show, which can be analyzed frame-by-frame, as compared with interactive media."

The "cd/m2" refers to candela per square meter.  So for the web developer, are there common terms of measurement for color, luminance, and saturation?  Yes.

The candela is a SI unit (International System of units) of luminous intensity.   It's a photometric term, and photometry deals with the measurement of visible light as perceived by human eyes.  Wikipedia's article on "Candela per square metre" puts it in terms of what we are familiar with as developers: on a display device, and in the RGB space.  This is helpful, bcause there's a specific standard assumed to be used on monitors, printers, and the Internet, and it is the sRGB (standard Red Green Blue).

"As a measure of light emitted per unit area, this unit is frequently used to specify the brightness of a display device. The sRGB spec for monitors targets 80 cd/m2.[3] Typically, calibrated monitors should have a brightness of 120 cd/m2. Most consumer desktop liquid crystal displays have luminances of 200 to 300 cd/m2.[4] High-definition televisions range from 450 to about 1500 cd/m2."

The takeaway is that the sRGB color space is a common touch point between research, assessment tools, and developers, since it is easily converted from the commonly used Hex code.

Websafe does not mean seizure-safe

Note that the color #990000 is considered "websafe".  That does not mean it is safe as "safe for not causing seizures", it only means that the color may be "safely" reproduced accurately by the technology used to generate color on screens. 

Human physiology and psychology as a consideration

Many experts work to "quantify" and "meaure" to the greatest extent possible the kinds of web content that can serve as triggers for seizures.   That said, it can't be forgotten that color is as much about  human perception in the brain as it is the measurement of light coming from a computer screen.  In addition to the psychological variances, there are also physiological differences among us.  There will be variances and nuances as to how a real human being perceives, and responds to, color and light.  For example, Tom Jewett, Lecturer Emeritus of Computer Sciences at Cal State University Long Beach, notes the following concerning lightness in the HSL color scale "...The distinction between levels of lightness is not actually linear as the HSL scale would imply; we are much more sensitive to changes in lighter values than to darker ones."

It's important to understand that light, and its measurements, are linear, but human vision and human perception are not.  Investigation and discussion is ongoing as to how to rectify the machine measurement of light as it passes through a filter of human vision, and then, filtered again through human perception.

Even age and sex can play a role.  According to the Epilepsy Foundation's article, "Shedding Light on Photosensitivity, One of Epilepsy's Most Complex Conditions"

"Children and adolescents are more prone than adults to have an abnormal response to light stimulation, and the first light-induced seizure almost always occurs before age 20" The article follows with this statistic:. "Girls (60 percent) are more often affected than boys (40 percent), although seizures are more frequent in boys because they are more likely to be playing video games. Video games often contain potentially provocative light stimulation"

Here's the important take-away: user testing is very problematic. Naturally, no one wants to subject a seizure-prone individual to user testing in the manner that designers typically do with user interfaces.  It's not ethical.  To that point, one of the best things we as developers and designers can do is use tools that have been developed by experts in the field who have had long experience working hand-in-hand with physicians and other experts to use scientific studies and other ethical means to establish techniques.  As of this writing, there are two tools commonly available for film/videos: PEAT, and the Harding Test.

PEAT, Harding Test

Factors for consideration include color, luminosity, size, contrast, and  in cases of animation, frequency.  WCAG 2.1 provides guidance for evaluating content

Photosensitve Epilepsy Analysis Tool (PEAT)

The Trace Research and Development Center has set a gold standard for a Photosensitive Epilepsy Analysis Tool, and they've made a point to make it free to download. PEAT can help authors determine whether animations or video in their content are likely to cause seizures.  Please note the restriction on its use: Use of PEAT to assess material commercially produced for television broadcast, film, home entertainment, or gaming industries is prohibited.  Use the Harding Test or other tools for commercial purposes.

To get a free copy of the University of Maryland's Photosensitive Epilepsy Analysis Tool, go to the page for the Trace Research & Development Center

University of Maryland College of Information Studies Photosensitive Epilepsy Analysis Tool

The Harding Test

As use of the PEAT tool is prohibited for commercial use, television programmers can use the Harding Test at HardingTest.com  The Harding Test is another gold standard.  Television programmers in various countries must pass this test before being able to broadcast the video, so the group at HardingTest.com provide both analysis and certification of the video.

Harding Flash and Pattern Analyzer

They may also visit Cambridge Research Systems Limited.  When a video fails, this company provides detailed frame-by-frame results in visual 'heat map' and tabular form.

Animated GIFs

Detect if a GIF is animated

What the web developer can do

Flashing, Blinking, and Flickering all involve a change over time. So, a major key to control the harm is to control the speed of the change.  How this is done depends on the file type, and/or the way the animation was created.   Handling animated gifs, for example, can require different handling than animated SVGs, depending upon how the animation was set up.   That is because animation in gifs is controled within the gif file itself, whereas SVG animation is controlled by CSS.  Other keys are color, intensity, size or area, and pattern. 

First, do no harm.

WCAG Guideline 2.3 Seizures and Physical Reactions provides an overview: “Do not design content in a way that is known to cause seizures or physical reactions”.  Don't include animation that a user cannot control. Don't design with patterns known to cause problems.  If you must include a gif  or apng with flashing in it, record it in a video format instead so that controls are available to the user. Give the user the ability to avoid it, turn it off, or render it less harmful. 

Understand malice

As a developer or designer, ask yourself if strobing content really needs to be on your webpage. Even if you handle properly, there are those who will download the offending content from your site and weaponize it.  It is believed the first documented attempt at using computers to affect physical harm via animation was way back in 2008; begining Saturday, March 22, 2008 The Epilepsy Foundation's website was hacked via posts with small flashing images and links that falsely claimed to be helpful.  Legitimate users sensitivbe to physical disorders who were seeking help from the site were affected. A series of legal considerations are underway after journalist Kurt Eichenwald, a known epileptic, suffered a seizure after being sent an animated gif in December 2016; the flashing gif carried the message, "You deserve a seizure for your posts".

Control exposure, control access.

Control exposure to the page is key to ensuring that someone susciptable to seizures is not exposed it to accidently.  WCAG notes that a single object can make the entire page unusable. If you believe you may have an image or animation that may cause seizures, control access to it by first displaying a warning about the content, and then putting it in a location where the user must opt-in to it, such as clicking a button, or ensuring that the link to the page has a distinct and obvious warning.   Consider using metadata such as <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> so that the page is not indexed by search engines.

Do Not Index, Do Not Follow

By not indexing the page, the likelyhood that users will stumble upon it via search will be reduced. The following example is from the article, "About the Robots <meta> Tag" from robotstxt.org

<html>
<head>
<title>...</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head> 

Ensure it is inactive until the user activates it by choice

Animated GIFs

The user must push a button or check a box in order to start the animation. 

Resources for detecting and controlling animated GIFs include

Videos

As in the case of animated GIFs, the user must push a button or check a box in order to start the animation.  There's many ways to do this, such as NOT adding the autoplay attribute to  <video controls>or setting animation-play-state to paused as an initial state.To see a powerful example of how this can actually work see the article by Kirupa, Toggling Animations On and Off. Toggling Animations On and Off. This is a must-read article, as Kirupa uses the animation-play-state in concert with transitions, transforms, and prefers-reduced-motion to create a very accessible experience under the user's control.

animation-play-state This is a css property that sets whether an animation is running or paused.

div {
  animation-play-state: paused;
}

transitions Set the duration to zero for the initial stage of animation.

div {
  transition-duration: 0s;
}

Ensure the user can also *stop* the animation as well as start it

<video> with no attributes will not play automatically, but also, will have no controls.  Ensure that you add the controls attribute to the video element so that the user can stop the video as well as start it.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Progromatically ensure  controls are available

The HTMLMediaElement.controls property reflects the controls HTML attribute, which controls whether user interface controls for playing the media item will be displayed.

Video

To ensure that a video has controls that a user can access, ensure that you add the word "controls " to  HTML5 video and audio elements. 

<video controls>

The following example on how to use the code is taken from the MDN document, <video>: The Video Embed element.  

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

Audio

Taking that same example and applying it to audio, 

<audio controls>

<audio controls>
  <source src="myAudio.ogg" type="audio/ogg">
  <source src="myAudio.mp3" type="audio/mpeg">
  <p>Your browser does not support the audio element. Here is a <a href="myAudio.mp3">link to the audio</a> instead.</p>
</audio>

Audio as part of Video

Note that the audio in videos can be controlled by the muted content attribute, even though the content is within the <video> element rather than the <audio> element.  This example is from the section on muted media attribute description from the HTML Living Standard.  It explains that the video will autoplay quietly in the background until the user takes action to unmute the audio. 

<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>

Control speed

This seems obvious, but because there are so many MIME types, the mechanisms for handling them varies greatly, and for that reason, there's not a one-size-fits-all solution to the problem.  This is further complicated by the fact that even "how" files are classified complicates how they should be handled.   For example, the .gif file format is usually understood to be an image, but is also considered a "video" file format in some circles because of its ability to be animated. For a comprehensive listing of media types, please visit IANA.org's page for Media Types.

The methods for sniffing them out is not a casual exercise.   You may be interested in following the MIME Sniffing standard at whatwg.org.   Just about every kind of image can be animated; "how" they are animated varies, and therefore, the control of the animation varies.

Commonly animated:

  • Bitmap animamation
  • Canvas MDN's tutorial on Canvas has a great section on Basic Animations setInterval() is a mainstay in Canvas animation, but it is also interesting to see how it interacts with screen refresh. See the article, Controlling fps with requestAnimationFrame? in which they discuss the nuts and bolts of implementing requestAnimationFrame against the backdrop of screen refresh. 
  • GIFs  (Raster) Are tough to crack because control for their animation resides within the gif files themselves.  For information about controlling the speed of gifs see W3C's G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds) https://www.w3.org/TR/WCAG20-TECHS/G152.html    A great stackoverflow article on the subject is, "Can you control GIF animation with Javascript?"
  • GIFV (Raster) considered a variant, video "version" of the GIF .   According to Wikepedia's article on Video file format, the format is not standardized, and must reference a "real" video file (e.g. a .webm file) which must exist elsewhere.
  • JPG (Raster)
  • MNG (Raster) Multiple-image Network Graphics is a graphics file format for animated images.  Also considered by some to be a video format.
  • PNG, APNG  (Raster)  Portable Network Graphics and Animated Portable Network Graphics may both be animated.
  • SVGs (Vector)  The MDN document, "SVG: Scalable Vector Graphics", notes that "SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as CSSDOM, and SMIL." SVGs can be used as an image, for example,. <img src="example.svg" alt="This is an image using a svg as a source">  This means that SVG appearance and animation can be controlled through CSS keyframes and animations. For interaction with JavaScript, see the MDN documents on SVG Interfaces. and Applying SVG effects to HTML content
  • Voxel (Raster) Three-dimensional voxel raster graphics are employed in video games and are also used in medical imaging 

Text can also be animated.

Translations and transformations can absolutely animate text in a div.   Although it is experimental technology, CSSKeyframe.keyText  is being developed.  Moving text can induce seizures for all the same reasons that moving images do; avoid animating your text. It's a good idea to avoid using moving text anyhow, as many screenreaders cannot read moving text.

Use CSS to control the animation

In the style sheet or within the <style> element, many options can combine together to create a powerful experience for the user.  We've already mentioned the animation property earlier in this document.  It's actually shorthand for all animation properties, including:

  • animation-play-state 
  • animation-duration has a value of <time>; this is the duration an animation takes to complete one cycle.  This may be specified in either seconds (s) or milleseconds (ms).  A default value of 0s indicates no animation should occur.
  • animation-timing-function

The animation property is powerful on its own, of course, but combined with other properties and queries, such as prefers-reduced-motion, a powerful set of options can be set up for the user.  The A11Y Project article, A primer to vestibular disorders. provides an example in which they set the animation-duration and transition-duration properties to a short duration rather than setting them to animation: none and transition: none, as a safeguard to prevent issues in any case there is a dependency on the animation to run (such as when listening to the animationend event).

Use JavaScript to control the animation

JavaScript is often use to control <canvas> elements, or SVGs. For any JavaScript that applies to HTML5 video, most also apply to audio. HTMLMedia​Element​.playback​Rate  is used for both video and audio.  Used to implement user controls; value of 1.0 is default and considered normal speed; a value of 0.5 is half the speed, a value of 2.0 is twice the speed.  A negative number plays the video or audio backwards. Set the playback rate property: HTMLMediaElement.playbackRate = playbackspeed

document.getAnimations() is an experimental technology, and  includes CSS AnimationsCSS Transitions, and Web Animations.. The MDN document, Document.getAnimations() provides the following code example of how to slow down all animations on a page to half speed.

document.getAnimations().forEach(
  function (animation) {
    animation.playbackRate *= .5;
  }
);

Image sources for animation

One of the easiest ways is to start with an image that is already in existence, using it as an image source, and then animating it.  Remember, you can use GIFs, JPGs, PNGs, SVGs and other file types here as an image source, as long as they are allowed file types -- and sizes -- in your environment. SVGs are often not allowed, due to security concerns.  The MDN document, Basic animations, provides outstanding examples of this, using multiple image sources for the sun, earth, and moon, and using several canvas methods to control the speed and animation of the earth as it orbits around the sun, and the moon as it orbits around the earth.  Use the codepen available with this tutorial to adjust  ctx.rotate in the code to see how the animation is affected when changes are made.  

If you absolutely, positively must use flashing animation....  

Make sure it has a control on it.  Make sure it is turned "off" when the viewer first encounters it, and that a user must opt-in to see the animation.  

An example of a format that has no controls available to the user is a gif file.   Animation speed is controlled within the gif image itself. Converting an animated gif to videos enables controls to be put on the animation, and gives the user agency.  There are many free online converters available for use, such  as EZGif, GIF to MP4

Set user expectations

Give users a heads-up as to what will happen before they click on that link. Describe the animation that is to follow.   A good article on this is A List Apart's Designing Safer Web Animations for Motion Sensitivity

Keep it small

If you absolutely positively must have flashing, keep it small.   Generally speaking, limit the size of the flash to an area approximately 341 by 256 pixels or less.  This pixel size assumes that a viewer is at a typical distance from the screen.   As mentioned earlier, this size may be too big if the image is to be viewed at close-range, such as in a VR headset.  WebVR is an open specification that makes it possible to experience VR in your browser.  WebVR can be experienced on phone, computer or headset.

If you are designing for a game or VR that uses an occular mask, or CAN be used by an occular mask, such as in Firefox Reality, (a browser for virtual reality) ensure that the size of the rectangle is much smaller than 341 by 256 pixels, because the image is much closer to a user's eyes.

Reduce contrast

Normally, higher contrast is a "good" thing when it comes to accessibility.   The greater the contrast of a text color to its background, (technically called luminosity contrast ratio, according to W3.org's page on Colors with Good Contrast), the easier such content is to read.  Users with low vision are especially appreciative of efforts to ensure high contrast of text against its background.  When the content is animated, however, reducing contrast is actually a way to reduce the likelyhood that the animated content will cause seizures.  Drop the contrast ratio if three flashes within one second are detected.

The contrast ratio is defined in WCAG 2.1 as follows:

contrast ratio

(L1 + 0.05) / (L2 + 0.05), where

It's best if you can adjust the contrast in development, and before it is uploaded or published to the web.  For videos and animated GIFS, the Adobe Suite of products is a phenomenal resource for traditional images. Also for images, an online tool available is pinetools.com's Adjust Brightness and Contrast Online pinetools.com  If you intend to make animated gifs, for example, start with one that has a lower contrast ratio.

Javascript is also an option for reducing contrast, dynamically.  Here's a code example from the section titled, "Example: Setting the background color of a paragraph" from the MDN document, Traversing an HTML table with JavaScript and DOM Interfaces.  Notice that the color in the example is described in the RGB color space.

HTML Content (link to source page)

<body>
  <input type="button" value="Set paragraph background color" onclick="set_background()">
  <p>hi</p>
  <p>hello</p>
</body>

JavaScript Content (link to source page)

function set_background() {
  // get a list of all the body elements (there will only be one),
  // and then select the zeroth (or first) such element
  myBody = document.getElementsByTagName("body")[0];

  // now, get all the p elements that are descendants of the body
  myBodyElements = myBody.getElementsByTagName("p");

  // get the second item of the list of p elements
  myP = myBodyElements[1];
  myP.style.background = "rgb(255,0,0)";
}

Avoid fully Saturated Reds for flashing content

As mentioned earlier in this document, the Epilepsy Foundation of America convened a workshop in August 2004 to begin to develop an expert consensus on photosensitive seizures.  Among their results was the understanding that "A flash is a potential hazard if it has luminance at least 20 cd/m2 , occurs at a frequency of least 3 Hz, and occupies a solid visual angle of at least 0.006 steradians (about 10% of the central visual field or 25% of screen area at typical viewing distances). A transition to or from saturated red also is considered a risk."  They also note in that same consensus: "Irrespective of luminance, a transition to or from a saturated red is also considered a risk."

Provide alternative CSS styles

With the understanding that much of animation and flashing can be controlled via CSS methods, it's important to explore ways to make alternative options available to users, and to make the control of these options convenient and visible.

Alternative Style Sheets

Modern browswers will display the alternate CSS available in alternate style sheets if the users know where to look for them.  In some cases, the alternate styles are revealed when the users go through the View menu, in other cases they are manifested in the settings, sometimes both.  Not all users know to look for these options via the browswer or settings, so it's worth considering doing things the old-fashioned way, with obvious buttons or links to change the style so that users can see them.   Doing so won't conflict with, or over-ride, the browser's ability to read the alternate style sheets, or the ability of the user to set preferences in the settings.  

It's important to know that certain users, such as those who rely on speech-recognition systems, often depend on legacy buttons and links because their disability prevents them from using a mouse, or to be able to take advantage of touch events on mobile tablets.  

Common ways to include the alternative stylesheets into your HTML documents are to use the <link> element, and @import.  

The <link> element

Use the <link> element, alongside with and together with the attributes of rel="alternate stylesheet" and for title, title="..." in the <HEAD> section of the webpage.

<HEAD>
  <TITLE>Home Page</TITLE>
  <link href="main.css" rel="stylesheet" type="text/css" title="Default Style">
  <link href="alternate1.css" rel="alternate stylesheet" type="text/css" title="Alternate One">
  <link href="alternate2.css" rel="alternate stylesheet" type="text/css" title="Alternate Two">
</HEAD>

 @import

@import is also a way to incorporate style sheets, but it is not "quite" as well supported as using the <link> element.

<STYLE type="text/css">
  @import url(alternate1.css);
  @import url(alternate2.css);
</STYLE>

By using alternate style sheets (remember to add the titles) you are setting it up for users to be able to use their browsers to choose alternate styles. 

Dynamic Style Switching

One problem with relying on the browser to reveal alternative styles is that not all users are technically savy enough to discover the alternate styles. Or, because of their disability, are not able to.  Buttons or links make it obvious that options are available to many grateful users. There's a multitude of ways to add toggle buttons to allow the user to switch to the different style sheets. That said, the use of alternative style sheets are not the only option. Another option is to simply manipulate the style of the page itself.  According to the MDN document, Using dynamic styling information, "where possible, it really is best practice to dynamically manipulate classes via the className property since the ultimate appearance of all of the styling hooks can be controlled in a single stylesheet"  One of the best examples around as to how to do this is from the W3C's page, C29: Using a style switcher to provide a conforming alternate version.  

Extreme Cases: Text-Only Altternatives

A separate, alternative stylesheet that prevents images from being displayed is easy to make.  It's a draconian solution; but it is one that is sometimes necessary by school teachers and other public servants who must serve those with extreme sensitivities. These public servants can ask their developers to develop a special altternative style sheet using display:none.    Here's how to do it via CSS

img { display:none;}

Take advantage of media queries with <style>

In setting up for media queries, you are enabling controls by the user; these controls are  made available in the browswer or in the OS. See the section, "What The User Can Do" to see more details of how a user accesses the controls.

prefers-reduced-motion

Support for prefers-reduced-motion in modern browsers is growing.

@media screen and (prefers-reduced-motion: reduce) { }
@media screen and (prefers-reduced-motion) { }

To see a great example of how to use the code prefers-reduced-motion, visit the MDN document, prefers-reduced-motion, or see the example below from the section on New in Chrome 74.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

prefers-color-scheme

This can be useful to if the ambient light API is not available.  Support is emerging.

@media (prefers-color-scheme: dark) {
    /* adust styles for dark mode */
}

Window​.match​Media() 

There is a powerful tool available to developers via Wikndow.matchMedia().   A great resource is MDN's document on Window.matchMedia()

 media update feature

The more often the screen is refreshed, the more stable it appears to the human eye, and the less it "flickers".  The vast majority of modern technology refreshes at a rate that does not cause problems with photosensitivity.   However, not everybody is wealthy enough to be able to afford the most recent technology; older or underpowered computers can have low refresh rates. AbilityNet's Factsheet (November 2015) Computers and Epilepsy describes more of the details on refresh rates.

A very old article, Epilepsy and CRT/LCD screen flicker, had an interesting response concerning the refresh rates in Hz.

"This effect is noticable, and documented, up to 70 Hz."
"These studies would seem to indicate that you should stay away from refresh rates under 70 ""Hz, and use a rate not divisible by 10."

Eric Bailey, of CSS-Tricks, found an innovative use the update feature which, used in combination with animation-duration or transition-duration, to conclude at a rate that is imperceptible to the human eye. In other words, Eric's techniques address the refresh-rate problem. The full article is called, Revisiting prefers-reduced-motion, the reduced motion media query

The css below is from the article, CSS-TRICKS Revisiting prefers-reduced-motion, the reduced motion media query

@media screen and (prefers-reduced-motion: reduce), 
(update: slow) { 
* { animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */ 
    transition-duration: 0.001ms !important;
 } 
}

From W3.org's page on Media Queries 4:

The update media feature is used to query the ability of the output device to modify the apearance of content -- once it has been rendered. It has the values of none, slow, and fast.

accessible libraries

Use Bootstrap 4

Support for prefers-reduced-motion was included in Bootstrap 4.1 in January 2018.  For more information, see Bootstrap 4's accessibility page.Bootstrap 4's accessibility page.

What the user, and those who support them, can do

Use modern computers.  Learn personalization and accessibility settings

From the article, "Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold"

"Flashing can be caused by the display, the computer rendering the image or by the content being rendered. The author has no control of the first two. They can be addressed by the design and speed of the display and computer"

The bottom line is that hardware and operating systems on many computers offer control that is not afforded to developers.  The user can do much to protect himself by learning his operating system, its personalization and accessibility settings.  Those in the public sector who must accomodate those with special sensitivities, should consider setting aside at least one work station and becoming familiar with its personalization and accessibility settings.  Understanding personalization and accessibility settings can actually be a money-saving endeavor.  One work station can be set up to acommodate both a low-vision individual (needs high-contrast) and to accomodate an individual with photosensitive susceptibilities, by simply, adjusting personalization and accessiblity settings.  

Use modern browers.  Learn personalization and accessibility settings

Firefox 73 and above (Dekstop)

Firefox added support for CSS prefers-reduced-motion in October 2018.

Chrome 74 and above (Desktop)

Chrome 74 added support for reduced-motion-query, it has even added support to detect whether the user has requested a reduced motion experience.  The user would access this through an accessibility interface, as seen below.

Screen shot showing how to turn off animations in Windows10

CSS Transition events are now supported.

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

  More information is available on the Updates page.

Edge 75 and above (Desktop, in Windows 10)

According to Eric Bailey, in his April 30, 2019 article Revisiting prefers-reduced-motion, the reduced motion media query,  "While Microsoft Edge does not have support for prefers-reduced-motion, it will become Chrome under the hood soon." 

Safari 10.1 and above (Desktop)

 Do not enable Auto-Play (does not work for gifs)

iOS Safari 10.3 and above (Mobile and Tablet) 

Select the "Reduce motion option" in OS Accessibility settings for Apple (image source: developers.google.com from Thomas Steiner's article "Move Ya! Or maybe, don't, if the user prefers-reduced-motion!"). This will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings.Screen shot showing how to reduce motion on a MAC OS

Use Reader Mode on browsers

  • Enable Content Blockers; Gets rid of ads, reduces and/or removes distractions
  • Enables text-to-speech
  • In certain browsers, enable fonts by choice
  • Enable Page Zoom

Turn off animated GIFs in the browser

Browsers offer much power to their users; it's just a matter of knowing where to go.TECH FLIX's article, How To Disable GIF Animations In Any Browser is an amazing resource. Using Firefox as an example, it explains that by changing the value the image.animation_mode from "normal" to "none", all animated images will be blocked.  To reverse it, you will have to change the value back to "normal"

Screenshot of image.animation.mode selected in Firefox

PC Magazine's article, How to Stop GIFs From Auto-Playing in Your Browser provides a great resource for ways to stop animation in gifs for Firefox, Chrome, .Opera, Internet Explorer, Safari, Twitter, and Facebook.

Use browser extensions

  • Gif Blocker For Chrome, GIF Blocker is an extension available at the web store.
  • Gif Scrubber Gif Scrubber is a chrome extension that allows you to control gifs like a video player.  There is a Github repository for it at https://github.com/0ui/gif-scrubber
  • Beeline Reader  Beeline Reader has a browser extension that allows you to set up for grayscale and Dyslexi font, among other things

Screenshot showing modes of Beeline Reader a user can adjust in browser

Take advantage Operating System accessibility features

Most operating systems such as Windows 10, have accessibility options that are surprisingly powerful.  Usually they are quite easy to find by simply typing ( or saying) in the word, "Accessibility" in the search finder of the operating system.

Turn off animations in the operating system

In the Windows10 operating system, the user has an ability to turn off animations. This will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings..

Screen shot showing how to turn off animations in Windows10

Grayscale

Those who have sufferred traumatic brain injury (TBI)  may be highly sensitive to color; it can require such a great "investment of cognitive energy" on their part, there's no energy for other daily tasks.  Enabling grayscale presentation of the content reduces the cognitive workload. Most Operating Systems have a way to let the user make an adjustment on the workstation.  In the screenshot below, you can see an example of Windows 10 Accessibility Settings allowing for color filters to be selected.  Grayscale is enabled when the color filters button is toggled "on"

Shows Windows 10 Accessibility Settings for GrayScale

Turn off parallax

Developmental or Experimental 

MDN Navigator​.doNotTrack

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/doNotTrack

Media Queries Level 5

User Preference Media Features  in W3C Editor's Draft Media Queries Level 5 are especially promising in providing user control over media.  Here's some highlights:

inverted-colors (Planned in Media Queries Level 5)

According to the section, User Preference Media Features , "The inverted-colors media feature indicates whether the content is displayed normally, or whether colors have been inverted." 

EnvironmentMQ (Planned in Media Queries Level 5)

For more information, see the article, Responding to environmental light levels with CSS Media Queries Level 5 Dawson Andrews | Jordan Moore March 2, 2017

environment-blending (Planned in Media Queries Level 5)

From W3C's Draft document, Media Queries Level 5: "The environment-blending media feature is used to query the characteristics of the user’s display so the author can adjust the style of the document. An author might choose to adjust the visuals and/or layout of the page depending on the display technology to increase the appeal or improve legibility."

forced-colors (Planned in Media Queries Level 5)

This is currently in editor draft phase.  From the document, "The forced-colors media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page."

light-level (Planned in Media Queries Level 5)

From W3C's Draft document, Media Queries Level 5:  "The light-level media feature is used to query about the ambient light-level in which the device is used, to allow the author to adjust style of the document in response."  

prefers-contrast (Planned in Media Queries Level 5)

  • currently in editor draft phase

prefers-reduced-transparency (Planned in Media Queries Level 5)

  • currently in editor draft phase=

MediaQueryList Interface

Section 4.2 from the CSSWG.org draftsv integrates with the event loop defined in HTML. [HTML] for the MediaQueryList object.  See the MDN document, MediaQueryList for more information.

Personalization Help and Support

The  requirement for the literal property is taken from  section 23 Non-literal Text and Images

Requirement: Some users cannot understand non-literal text and icons such as metaphors, idioms etc. The literal property is intended to identify text or images as non-literal and allows the author to explain non-literal text and images to users.

The following is from the Web Animations model  CSSWG.org  drafts 

The Web Animations model is intended to provide the features necessary for expressing CSS Transitions [CSS-TRANSITIONS-1], CSS Animations [CSS-ANIMATIONS-1], and SVG [SVG11].

For more information

Color

Epilepsy and Seizures

GPII

Harding

Along with the PEAT tool, is generaly recognized to be one of the two "gold standards" for analyzing flashes

ISO

  • IEC 61966-2-2:2003(en) Multimedia systems and equipment — Colour measurement and management — Part 2-2: Colour management — Extended RGB colour space — scRGB

MDN

Photosensitive Epilepsy Analysis Tool

Along with the Harding tool, is generaly recognized to be one of the two "gold standards" for analyzing flashes

W3C

Contributers:

Heartfelt thanks to Teal; Wayne Dick of the Low Vision Task Force of the W3C; Tom Jewett and Eric Eggert from Knowbility; Jim Allan of the Diagram Center;  and Dr. Selim R. Benbadis, Director, Comprehensive Epilepsy Program and Clinical Neurophysiology Laboratory at USF and TGH in Tampa, Florida   for their great, great assistance and discussions on this topic. 

We are all in tremendous gratitude to the Trace Research & Development Center for making their amazing tool, the Photosensitive Epilepsy Analysis Tool (PEAT) for free.