--- title: First, Do No Harm author: Henry Quackenboss description: This article covers three ways a website may cause discomfort or harm to users inadvertently and how to avoid them. published: 2025-2-15 --- On the topic of accessibility, often the primary topic is what should be added to a site to make it more accessible to people who may have more difficulty accessing a website than the average user. However, there is another side to that coin. Accessibility also means that the website should not be harmful to its users, especially to those who are particularly sensitive to visual or auditory stimuli. In this article I will be covering three major ways in which websites can mitigate any potential harm or discomfort that web pages may cause inadvertently, particularly to people with sensitivities towards content that could appear on a web page. ### Eye strain and Circadian Rhythm Eye strain and sleep problems are constantly growing problems in an increasingly digital age, and the way we interact with technology is usually a factor in both. First, eye strain from prolonged use of digital screens with insufficient breaks and/or poor positioning of the head can cause soreness, dryness, headaches and blurred vision. Unlike eye strain, sleep problems stem from many sources beyond digital consumption, but there is plenty of evidence supporting the idea that different wavelengths of light and using screens at improper times can disrupt the body’s circadian rhythm, causing poor sleep which can potentially exacerbate the effects of eye strain as well, in addition to the copious other side effects of poor sleep. As developers, we cannot impact when users access screens or how they adjust their displays, but there are steps we can take to ensure our web pages have every safeguard we can implement on our end of the user experience to reduce the negative effects of prolonged screen use. Light or bright colors alone don’t contribute to eye strain. It’s discerning text that contrasts too harshly with the background, especially at a small scale, that makes bright colors more harsh to look at. A similar problem with strain occurs with white text on a purely black background. While there are multiple contributing factors to eye strain, having extreme contrast on small graphical elements such as individual characters is likely to be a significant contributor. To counteract this, many sites either offer or have switched over to a dark mode, which typically sets the color of the background and GUI elements to less intense dark grays while the text is either white or a very light gray. This softer contrast is shown in studies to reduce eye strain. A similar effect can be achieved with a lighter theme by switching from a white background to a very light gray or other near-white color and making the text a very dark gray instead of black. It is important to take care to choose easily readable fonts as well as sizing and spacing text appropriately. Different studies have examined the effect of warm and cool colors on eye strain and have come to varying conclusions about the impact that choosing longer or shorter wavelength colors has on eye strain and circadian rhythm. Overall, it’s accepted that blue light, and similarly low wavelength colors contribute more to eye strain and circadian rhythm disruptions. Since natural light is almost always in warm, long wavelength colors, we are poorly adapted for high wavelength light. It’s not universally agreed upon how big of an impact the different use of color has, and blue light filters already exist to ease the effects, but designers should still take the effect of short wavelength colors into consideration when designing web pages, possibly limiting their use to minor accents rather than for main GUI elements if possible. ### Motion Sickness Almost everybody experiences motion sickness, but some people are particularly sensitive to motion. These people could experience motion sickness symptoms due to animated effects in a web page being overstimulating, causing nausea and fatigue. This creates an accessibility issue, as not only could this dissuade people from using a site, but it could also be a singular cause for adverse effects in a user. Thankfully, the methods for mitigating motion sickness aren’t difficult to implement nor require major changes to design. The developer only needs to keep an eye on certain types of design elements to ensure they aren’t a cause. Animated elements can be attractive in a web page. However, these elements can trigger motion sickness and ruin the user experience if they have certain properties and if a user suffers from severe motion sickness. Bouncing, vibrating/wiggling, or elastic animations are the most likely to cause these kinds of reactions. For interactive elements, it would be a better idea for items like buttons to change color, appear depressed, or slightly change size rather than bounce, stretch, or wiggle to signify an event, for example. For non-interactive elements, it would be best to avoid these kinds of animations entirely. This is because the user wouldn’t even have the ability to control when these kinds of animations happen, leaving them closing the web page as the only relief from their nausea. Parallax scrolling is an effect that makes it appear that foreground elements are moving up or down faster than background elements. This effect gives an illusion of depth and makes web pages look very professional. However, it can be discomforting or nauseating to people with motion sensitivity. While the notion of parting with a parallax effect may not be well received, the amount of motion or the intensity of the effect can be toned down. That being said, while parallax scrolling adds a lot of visual interest to a page, it also may not be worth including at all. Parallax effects are particularly detrimental to users with vestibular users, and toning down the effect or removing it entirely may do a lot to increase a website’s accessibility. Scrolling and rotating elements are another cause for caution when designing a web page that is accessible to everyone. Carousels and image galleries that cycle through images with a sliding or spinning transition are a potentially big source of motion sickness and transitions like these should be implemented carefully if at all. The speed at which the displayed images or cards change through a transition is another factor to consider, as if it is too fast it could trigger motion sensitivity. Auto-scrolling or auto-rotating elements should also be avoided if possible, as they not only provide a source of disorientating motion but also prevent the user from mentally grounding by keeping their environment constantly changing. If a developer is required to include a carousel or gallery that includes animations and auto-scroll, the speed at which both happen should be restrained to dampen the effects. One basic way to balance visually appealing effects with accessibility is to give users active control over what they see. For example, if users are typically directed to a landing page, they could be provided the option to load the site’s content without any animations or other troubling visuals, possibly bundled together with other accessibility features. The other side of user control is making sure that whenever possible, users are only being exposed to potentially motion sickness triggering content if they elect to. This means that videos and animations only begin as a result of user actions. The more clear it is that clicking on something or scrolling will cause animations to occur, the better. ### Photosensitive Epilepsy If elements of a web page trigger a seizure in a user with photosensitive epilepsy, it moves beyond an issue of accessibility and moves into the realm of direct harm. This also creates a significant legal liability, as the user may then sue the site’s owner for negligence, intentional harm, or even discrimination. For these reasons it is essential that websites be rigorously tested to ensure that they do not present a danger to people who suffer from photosensitive epilepsy. Beyond just users who suffer from epilepsy, it is likely that if a web page triggers seizures, it likely isn’t very enjoyable for other users either. Mitigating anything that triggers photosensitivity is straightforward, but should be tested well and often because of the potential consequences for users and the website owner. As an additional note, other types of epilepsies exist that are not as well documented as photosensitive epilepsy. Certain patterns and sounds can trigger other types of epilepsies, and consideration for those triggers should also be made. The obvious first step in making sure a website is safe for users with epilepsy is to remove any intentional content that flashes or blinks. This kind of content is likely to trigger the most well documented type of epilepsy and should not be included on a public website for any reason unless reasonably hidden with sufficient warning to access it. Static images and elements may also trigger photosensitive epilepsy, especially if moved by scrolling. This is another reason that sharp contrasts should be avoided by default, especially around smaller details like text. Another occurrence that should be avoided is any web elements that flash while or upon loading. This step needs to be tested under a variety of conditions to make sure that users won’t experience potential epilepsy triggers while a web page is loading. Similar to flashing or blinking content, sometimes photosensitive epilepsy can be triggered by fast moving animations, which overlaps on some of the previous considerations when it comes to motion sensitivity. In making sure a website is safe to use for people who have photosensitive epilepsy or any light sensitive condition, the web content accessibility guidelines provides a detailed set of guidelines on the minimum requirements for a website to be considered accessible with these disorders. One specific example is the three flashes or below principle, which states that nothing on the web page may flash more than three times in a second. It is important that front end developers be well versed in the WCAG and consult it when making changes that could potentially impact accessibility, no matter how little. Often something as minor as changing an animation will have implications for the site’s accessibility, so all developers working on web page design need to stay aware of what the implications of a change could be to people who rely on proper accessibility practices to access the site. The WCAG is also a starting point, meaning that going beyond the basic requirements is always a good idea as long as it doesn’t hamper the website’s functionality or visual appeal. Like in the cases of eye strain and motion sensitivity, giving the users control to prevent seeing content that may be harmful to them is advisable. Similar to the case with motion sickness, users should have the ability to access a high accessibility version of any page. Likewise, no media or potentially triggering animations should show on screen until the user consciously elects to be exposed to them, as in the case of clicking on something. It is important for both the user and the owner of the website that potentially harmful content to those with photosensitive epilepsy or any other visual sensitivity is handled appropriately if it is present at all, and adding more user control over what content they see helps to improve safety and mitigate liability on behalf of the website owner. ## References https://www.health.harvard.edu/staying-healthy/blue-light-has-a-dark-side https://sighteyeclinic.com/dealing-with-digital-eye-strain/#:~:text=Colors%20with%20shorter%20wavelengths%20(blues,red%20side%20of%20the%20spectrum. https://www.freecodecamp.org/news/web-sensitivity-how-to-design-accessible-animations/#:~:text=Bouncing%20or%20Elastic%20Motions,interaction%20or%20elastic%2Dscrolling%20effects. https://www.webaxe.org/vestibular-issues-parallax-design/ https://developer.mozilla.org/en-US/docs/Web/Accessibility/Seizure_disorders https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html