Are you missing out on users because your app isn’t accessible? We can help. Whether you need design support, engineering know-how, or a strategy update, we can help. Get in touch to learn how.
There’s plenty to consider when it comes to web accessibility. And while we should strive for universal design that is inclusive for as many users as possible from the start, there are often cases where one size doesn’t fit all.
Users may have different – even conflicting! – needs when it comes to motion on web pages, color contrast, and input methods. In this blog post, we’ll go over some CSS media queries that can help us tailor a good user experience in these situations where “special-casing” is desirable or necessary.
Reduced Motion
@media (prefers-reduced-motion: reduced) { }
While motion and animation can be a useful tool for adding feedback or flavor, users with vestibular disorders (which affect “the parts of the inner ear and brain that process the sensory information involved with controlling balance and eye movements”) could potentially have nausea, headaches, and other symptoms triggered by motion effects, and others may find them distracting or overwhelming.
Reduced motion is an accessibility setting that can be toggled in the system preferences of all major desktop and mobile operating systems. It signals a user preference to keep motion to a minimum. Developers can also toggle this preference in browser dev tools (in Chrome, it can be found under the Rendering tab).
The reduced motion query can be used to replace motion with a different animation or remove it entirely. For instance, sliding movements could be replaced with a gentle crossfade, and smooth scroll and parallax effects can be disabled using this query.
Light and Dark Color Schemes
@media (prefers-color-scheme: light) { }
@media (prefers-color-scheme: dark) { }
Light and dark modes for apps and websites are increasingly common these days, and while many people may not think of this media query as geared toward accessibility per se, I think it’s a great example of how accessibility benefits everyone. For some users, the choice between light and dark modes may be entirely an aesthetic preference. But dark mode can be extremely helpful for people with light sensitivity, and personally, as someone with astigmatism, I prefer light mode for text legibility!
This preference is also a system setting, and many operating systems have a setting that will switch between modes depending on the time of day. This media query is great for adjusting color palettes, and works extremely well in conjunction with a design system that uses CSS custom properties to store common interface colors.
Increased Contrast
@media (prefers-contrast: more) { }
@media (forced-colors: active) { }
Ideally, color contrast and legibility have already been taken into account in the designs. Low-vision users who need consistently strong contrast for better UI visibility may also be using an increased or high contrast mode. This is typically set as a global preference found on mobile and desktop operating systems that shifts the look of UI elements, adding stronger outlines around interactive elements and guaranteeing contrast between the text and background.
However, there are some differences in behavior on different systems. On macOS, the increased contrast setting will cause styles in the prefers-contrast: more media query to be applied. But, the high contrast mode on Windows will change the color theme of a website entirely, and styles inside prefers-contrast: more may have no visible effect, since Windows is applying its own color overrides. Android includes a high contrast system toggle, but as of this writing, this does not seem to change the designs.
There are certain situations where providing specific overrides for certain elements may be desirable. Some examples are zebra-striping on a table or grid view (where forced colors may actually end up removing a contrast feature that existed in the original design), or areas of the page where preserving the background or text color is important to what’s being communicated. In these special situations, the forced-colors media query can be used in conjunction with the forced-color-adjust property to allow targeted overrides that retain the intended legibility and meaning of these elements.
Hover and Pointer
@media (hover: none) { }
@media (hover: hover) { }
@media (pointer: coarse) {}
@media (pointer: fine) {}
The hover and pointer media queries do not rely on any user setting or preference, but are triggered automatically based on the user’s hardware. They are commonly used to map onto input devices such as touchscreen and mouse pointer, but they are generic enough to apply to a broad range of input modalities. For instance, although we think of tablets as touchscreens, some tablet styluses now support fine pointing and hover behavior. Thanks to their generality, these media queries also allow us to accommodate input devices such as eye tracking input or the joystick-like controls provided by some assistive technologies.
The hover and pointer queries can be used to adjust the target size of interactive areas for different pointing elements. They can also provide alternatives for UI elements like menus or tooltips, which may have different behaviors depending on whether hover is available or not. Similar to light and dark mode, using these queries is a good example of practicing universal (rather than just accessible) design.
Media Queries of the Future
These media queries are not yet ready to be used in production, but are included in the User Preference Media Features spec and beginning to be implemented by browser vendors. Keep an eye out for them!
Inverted Colors (Safari Only)
This query detects whether the user has toggled a system setting for inverted colors. I can see it being useful for situations similar to those we explored when covering prefers-contrast: more or forced-colors: forced , to targeting elements where the specific colors have a semantic meaning that needs to be preserved.
Reduced Transparency (Chrome Canary Only) This query detects whether the user has toggled a system setting for less transparent elements. Should browser vendors implement this, I can see it being something like a lightweight version of increased contrast, where the user preference can be honored by using solid backdrops and opaque text to increase contrast and legibility.
Conclusion
When it comes to web accessibility, CSS media queries can be a very useful tool for customizing an experience for a user’s specific needs and preferences. We should always carefully consider first whether a media query is necessary at all when perhaps it could be incorporated into the overall design, but in the cases that require more targeted accommodation, these media queries might be just the thing that’s needed!
