prefers-reduced-motion - CSS: Cascading Style Sheets
important: an embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation. syntax no-preference indicates that the user has made no preference known to the system. reduce indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders. ...
... animation by default. if reduce motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers. html <div class="animation">animated box</div> css .animation { animation: pulse 1s linear infinite both; } /* tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. ...
... editor's draft initial definition. ...

Web accessibility for seizures and physical reactions - Accessibility
n 3 hz (flickers per second) and lower than 55 hz. the epilepsy foundation's article "take advantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os. see the mdn document, "accessibility: what users can to to browse more safely" 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 infi...
...support is emerging. ...
... 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. ...
...And 2 more matches

Accessibility: What users can do to browse more safely - Accessibility
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. css transition events are now supported. examples include: transitionrun transitionstart transitionend transitioncanc...
...d support to detect whether the user has requested a reduced motion experience. the user would access this through an accessibility interface, as seen below. css transition events are now supported. ...
...is through an accessibility interface, as seen below. css transition events are now supported. examples include: transitionrun transitionstart transitionend transitioncancel 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 wo...

@media - CSS: Cascading Style Sheets
nism a pointing device, and if so, how accurate is it? added in media queries level 4. prefers-color-scheme detect if the user prefers a light or dark color scheme added in media queries level 5. prefers-contrast detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors added in media queries level 5. prefers-reduced-motion the user prefers less motion on the page added in media queries level 5. prefers-reduced-transparency the user prefers reduced transparency added in media queries level 5. resolution pixel density of the output device scan scanning process of the output device scripting detects whether scripting (i.e. javascript) is available add...
... width width of the viewport including width of scrollbar accessibility concerns to best accommodate people who adjust a site's text size, use ems when you need a <length> for your media queries. both em and px are valid units, but em works better if the user changes the browser text size. also consider using level 4 media queries to improve the user's experience. for example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses. security because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to ...
....4; } } @media (400px <= width <= 700px) { body { line-height: 1.4; } } for more examples, please see using media queries. specifications specification comment feedback media queries level 5the definition of '@media descriptors' in that specification. reinstates light-level, inverted-colors and custom media queries, which were removed from level 4. adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features. css working group drafts github issues css conditional rules module level 3the definition of '@media' in that specification. defines the basic syntax of the @media rule. css working group drafts github issues media queries level 4the definition of '@media' in that specification. ...

Accessibility documentation index - Accessibility
rceived. the two images below are from nasa research, specifically, from the article, "designing with blue" 84 accessibility documentation index accessibility, index this document provides a list of links to all accessibility articles on the mozilla developer network. 85 accessibility: what users can do to browse more safely color, epilepsy, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, user settings, web animation this article discusses making web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems. taking advantage of personalization settings can help prevent exposure to content lead...
...es in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders. 105 web accessibility for seizures and physical reactions media queries, peat, photosensitve epilepsy analysis tool, the harding test, color, epilepsy, musicogenic seizures, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, web animation this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions. ...

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
nt of movement or animation, preferably to the point where all non-essential movement is removed. example this example has an annoying animation unless you turn on reduce motion in your accessibility preferences. html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation. this will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direc...

Using media queries - CSS: Cascading Style Sheets
nism a pointing device, and if so, how accurate is it? added in media queries level 4. prefers-color-scheme detect if the user prefers a light or dark color scheme added in media queries level 5. prefers-contrast detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors added in media queries level 5. prefers-reduced-motion the user prefers less motion on the page added in media queries level 5. prefers-reduced-transparency the user prefers reduced transparency added in media queries level 5. resolution pixel density of the output device scan scanning process of the output device scripting detects whether scripting (i.e. javascript) is available add...

scale() - CSS: Cascading Style Sheets
sx000sy0001 sx0000sy0000100001 [sx 0 0 sy 0 0] accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. if you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide. also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> ...

transform - CSS: Cascading Style Sheets
m right to left. none specifies that no transform should be applied. accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. if you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide. also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size ...