WCAG Principle: Operable
Guideline 2.3: Seizures and Physical Reactions (Do not design content in a way that is known to cause seizures or physical reactions)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.3.1?
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
Imagine you’re watching TV, and suddenly there’s a scene with very rapid flashing lights. You’ll most likely feel uncomfortable and look away from the screen. That’s just a tiny fraction of what people with photosensitive epilepsy or other sensitivities might experience. But for them, such flashing content can have severe consequences, including triggering seizures. Even users without known sensitivities can experience discomfort, nausea, or headaches.
So, as a general rule, your site should avoid anything that blinks, flashes, or flickers more than three times in a one second. And if there’s any flashing at all, it needs to be gentle enough so it doesn’t risk harming people. This includes specific types of flashes, like bright red lights, which can be particularly dangerous. This guideline does not apply to videos or animations alone. It also covers dynamic elements such as interactive menus and background effects.
How does it make your website accessible?
Complying with Success Criterion 2.3.1 ensures your website is safe and usable for everyone. This especially enhances accessibility for people with photosensitive epilepsy or other visual sensitivities.
How to Meet Success Criterion 2.3.1
Common mistakes on websites:
- Use of flashing display advertisements
- Implementing flashing Call-to-Action (CTA) buttons
- Background videos and animated gifs with flashing effects
- Slide carousels with rapid transitions
How to fix these mistakes:
- Ensure that any displayed advertisements on your website comply with this criterion.
- Implement the use of colors with high-contrast for CTAs instead of flashing effects to make them stand out safely.
- Choose background videos and gifs that are free of flashing or strobing effects.
- Set slide transitions in carousels to be slow enough not to cause discomfort or seizures. Also provide controls for users to navigate the slides manually
Helpful tips for designers/developers:
- For any moving, blinking, or scrolling information, and for auto-updating content, ensure there’s a way for users to pause, stop, or hide it.
- Use CSS instead of Javascript for animations as they are generally smoother and less likely to cause issues.
- Respect users’ ‘prefers-reduced-motion’ settings to limit or remove animations and other motion effects.
- Use software like the open-source Photosensitive Epilepsy Analysis Tool (PEAT) to identify seizure risks in your web content.
How to test if your website meets conformance:
- Check that no component of your web content flashes more than thrice in any one second period.
- If there is any content that flashes more than three times in a one second period, ensure that the flashing area is small (less than 25% of 10 degrees of visual field).
- Use a reliable tool to determine that the content does not exceed the general flash or red flash threshold.
If all these checks are true, then your site meets this criterion.
Bad and Good Examples (Code Snippets)
Code example that fails WCAG 2.3.1
Code Snippet
<div id="flasher" style="background-color: red; width: 100px; height: 100px;">
<script>
setInterval(function() {
document.getElementById("flasher").style.backgroundColor = (document.getElementById("flasher").style.backgroundColor === "red") ? "white" : "red";
}, 250);
</script>
</div>
setInterval function to change the background color of the element from red to white and back again every 250 milliseconds (0.25 seconds). This rapid change in color creates a flashing effect that violates WCAG 2.3.1 as it exceeds the three flashes per second threshold. Code example that meets WCAG 2.3.1
Code Snippet
<div id="alert" style="opacity: 0; transition: opacity 1s ease-in-out;">
<script>
function showAlert() {
document.getElementById("alert").style.opacity = 1;
setTimeout(function() {
document.getElementById("alert").style.opacity = 0;
}, 1000); // Adjust time as needed
}
</script>
<button onclick="showAlert()">Show Alert</button>
</div>
This code snippet creates a hidden element (div) with an ID “alert”. It uses CSS opacity transition to smoothly fade the element in and out over one second (adjustable with the transition property). A button click triggers the JavaScript function (showAlert). This function changes the opacity of the element to 1 (fully visible) and then uses setTimeout to set the opacity back to 0 (hidden) after one second.
This approach avoids rapid color changes and relies on a smooth transition that falls within acceptable flash rate limits. The key is to ensure the visual change takes longer than the three flashes per second threshold.
Frequently Asked Questions
What exactly is considered a "flash" under success criterion 2.3.1?
A “flash” refers to any visual change in content that occurs in a rapid sequence, capable of altering the user’s perception. This includes but is not limited to blinking text, rapid video cuts, strobe effects, and flashing animations.
How does this criterion affect the use of emergency alerts on my website?
You can still implement emergency alerts on your site but they but must comply with the “Three Flashes or Below Threshold” requirement. Consider alternative ways to draw attention without using rapid flashes, such as bold colors, patterns, or icons.
What are some alternative ways to convey information that might traditionally involve flashing elements?
Instead of flashing elements, consider using alternative methods like text descriptions, audio cues, or different color combinations that provide sufficient contrast without relying on rapid changes.
What if my website includes user-generated content that might contain flashing elements?
While you cannot directly control user-generated content, you can take steps to mitigate the risk. This includes establishing clear community guidelines that discourage users from uploading content with rapid flashing elements. You can also allow users to report potentially harmful content, and put a system in place to review and remove non-compliant content.
How do I handle live content, like streaming, with respect to this criterion?
For live content, implement a delay buffer to monitor and adjust flashing rates. Also, provide warnings and alternatives for viewers prone to photosensitive reactions.
What resources are available for testing existing content for compliance?
Tools like the Photosensitive Epilepsy Analysis Tool (PEAT) can help identify potentially problematic content. Additionally, web accessibility evaluation tools often include checks for flashing content.
