{"id":302,"date":"2023-08-01T11:00:00","date_gmt":"2023-08-01T11:00:00","guid":{"rendered":"http:\/\/suimy.me\/?p=302"},"modified":"2024-05-01T17:01:44","modified_gmt":"2024-05-01T17:01:44","slug":"css-and-accessibility-inclusion-through-user-choice","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2023\/08\/01\/css-and-accessibility-inclusion-through-user-choice\/","title":{"rendered":"CSS And Accessibility: Inclusion Through User Choice"},"content":{"rendered":"<p>              <title>CSS And Accessibility: Inclusion Through User Choice<\/title><\/p>\n<article>\n<header>\n<h1>CSS And Accessibility: Inclusion Through User Choice<\/h1>\n<address>Carie Fisher<\/address>\n<p>                  2023-08-01T11:00:00+00:00<br \/>\n                  2024-05-01T16:05:07+00:00<br \/>\n                <\/header>\n<p>We make a series of choices every day. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea? Tabs or spaces? Our choices, even the seemingly insignificant ones, shape our identities and influence our perspectives on the world. In today\u2019s modern landscape, we have come to expect a broad range of choices, regardless of the products or services we seek. However, this has not always been the case.<\/p>\n<p>For example, there was a time when the world had only one font family. The first known typeface, a variant of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Blackletter\">Blackletter<\/a>, graced Johannes Gutenberg\u2019s pioneering printing press in 1440. The first set of publicly-available <a href=\"https:\/\/webtrainingguides.com\/css-color-names-the-tragicomedy\">GUI colors<\/a> shipped with the 10th version of the <a href=\"https:\/\/www.x.org\/wiki\/\">X Window System<\/a> consisted of 69 primary shades and 138 entries to account for various color variations (e.g., \u201cdark red\u201d). In September 1995, a Netscape programmer, Brendan Eich, introduced \u201cMocha,\u201d a scripting language that would later be renamed LiveScript and eventually <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">JavaScript<\/a>.<\/p>\n<p>Fast forward to the present day, and we now have access to over <a href=\"https:\/\/kinsta.com\/blog\/web-safe-fonts\">650,000 web fonts<\/a>, a hexadecimal system capable of representing <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_colors\">16,777,216 colors<\/a>, and over <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_JavaScript_libraries\">100 public-facing JavaScript frameworks and libraries<\/a> to choose from. While this is great news for professionals designing and building user interfaces, what choices are we giving actual users? Shouldn\u2019t they have a say in their experience?<\/p>\n<h2 id=\"css-media-features\">CSS Media Features<\/h2>\n<p>While designers and developers may have some insights into user needs, it is very challenging to understand the actual user preferences of 7.8 billion people at any given time. Supporting the needs of individuals with disabilities and assistive technology adds a layer of complexity to an already complex situation. Nonetheless, designers and developers are responsible for addressing these user needs as best we can by providing accessible choices. One promising solution is <strong>user-focused <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media#media_features\">CSS media features<\/a><\/strong> that allow us to customize the user experience and cater to individual preferences.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops\u00a0\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"media-features-for-color\">Media Features For Color<\/h2>\n<p>Let\u2019s first focus on CSS media features for color. Color plays a vital role in design, impacting how we perceive brands. Studies suggest that <a href=\"https:\/\/www.emerald.com\/insight\/content\/doi\/10.1108\/00251740610673332\/full\/html\">color alone<\/a> can influence up to 90% of snap judgments about products. Considering the large number of people worldwide with visual deficiencies such as color blindness and low vision, developers and designers have a significant opportunity to improve accessibility with this element alone.<\/p>\n<h3 id=\"prefers-color-scheme\"><code>prefers-color-scheme<\/code><\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-color-scheme\"><code>prefers-color-scheme<\/code> CSS media feature<\/a> helps identify whether users prefer light or dark color themes. Users can indicate their preferences through settings in the operating system or user agent.<\/p>\n<p>There are two values for this CSS media feature: <code>light<\/code> and <code>dark<\/code>. Typically, the default theme presented to users is the light version, even if the user expresses no preference. However, the opposite can also be true, and websites or apps default to a dark theme and switch to a light theme using the <code>media (prefers-color-scheme: light)<\/code> media feature and corresponding code.<\/p>\n<p>Users opting for a dark mode signifies their preference for a dark-themed page. Using <code>media (prefers-color-scheme: dark)<\/code>, various theme elements, such as text, links, and buttons, are adjusted to ensure they stand out against darker background colors.<\/p>\n<p>In the past, there was also a <code>no-preference<\/code> value to indicate when users had no theme preference. However, user agents now treat light themes as the default, rendering the <code>no-preference<\/code> value obsolete.<\/p>\n<pre><code class=\"language-css\">@media (prefers-color-scheme: dark) {\n  body {\n    background-color: #282828;\n  }\n\n  .without [data-word=\"without\"] .char:before,\n  .without [data-word=\"without\"] .char:after {\n    color: #fff;\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/codepen.io\/cariefisher\/pen\/JjmmRxZ\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"516\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Default color scheme (top) and dark mode (bottom)\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/color-light-dark.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Default color scheme (top) and dark mode (bottom). (<a href=\"https:\/\/codepen.io\/cariefisher\/pen\/JjmmRxZ\">Demo<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_media_prefers-color-scheme\"><code>prefers-color-scheme<\/code><\/a> is one of the most widely used CSS media features today and it has a very large percentage of browser support at 94%. It is so popular that additional values may be introduced in the future to express more specific preferences or color schemes, such as sepia or grayscale.<\/p>\n<p>Switching from the default light mode to dark mode is relatively straightforward. Consult the user setting guides for <a href=\"https:\/\/support.apple.com\/guide\/mac-help\/use-a-light-or-dark-appearance-mchl52e1c2d2\/mac\">Mac<\/a> and <a href=\"https:\/\/support.microsoft.com\/en-us\/windows\/change-colors-in-windows-d26ef4d6-819a-581c-1581-493cfcc005fe\">Windows<\/a> operating systems to learn more (select the relevant hardware and operating system version), then navigate to a browser that supports this CSS media feature.<\/p>\n<p><strong>Pro-tip:<\/strong> <em>A more sophisticated solution to demo user preference settings is using Chrome\u2019s <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\">Rendering tab<\/a> coupled with <a href=\"https:\/\/youtu.be\/gOkM1L6azEI\">CSS media features emulator<\/a> to easily switch from light to dark modes to <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/emulate-css\/#emulate-css-media-feature-prefers-color-scheme\">emulate <code>prefers-color-scheme<\/code><\/a> as users experience it. This solution is convenient for live demos where you need to show the user preference changes quickly or emulate media features not fully supported by your OS or browser.<\/em><\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;526&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>prefers-color-scheme<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>prefers-color-scheme<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"forced-colors\"><code>forced-colors<\/code><\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/forced-colors\"><code>forced-colors<\/code> CSS media feature<\/a> enables the detection of the forced colors mode enforced by the user agent. This mode imposes a limited color palette the user chooses onto the page. This newer media feature provides an alternative approach to handle colors for non-Window devices, and we expect it will replace Windows High Contrast Mode in the future.<\/p>\n<p>There are two values for the forced-colors media feature: <code>none<\/code> and <code>active<\/code>. The <code>media (forced-colors: none)<\/code> value indicates that the forced colors mode is inactive and uses the default color scheme, while the <code>media (forced-colors: active)<\/code> value means that the forced colors mode is active and the user agent enforces the user-selected limited color palette.<\/p>\n<p>It\u2019s worth noting that enabling <code>forced-colors<\/code> mode does not necessarily imply a preference for higher contrast. The color adjustments align with the user\u2019s choice, which may not strictly fit into the low or high-contrast categories.<\/p>\n<p><strong>Note<\/strong>: <em>There are some <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/forced-colors#properties_affected_by_forced-color_mode\">properties affected by the <code>forced-color<\/code> mode<\/a> that you need to be aware of when designing and testing your forced-colors theme. Check out Eric Bailey\u2019s article \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/03\/windows-high-contrast-colors-mode-css-custom-properties\">Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties<\/a>\u201d for more information about this media feature and its integration with CSS custom properties.<\/em><\/p>\n<pre><code class=\"language-css\">@media (forced-colors: active) {\n  body {\n    background-color: #fcba03;\n  }\n\n  .without [data-word=\"without\"] .char:before,\n  .without [data-word=\"without\"] .char:after {\n    color: #ac1663;\n  }\n\n  .without {\n    color: #004a72;\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/codepen.io\/cariefisher\/pen\/JjmmRxZ\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"261\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Forced colors demo\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/color-forced.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Forced colors active. (<a href=\"https:\/\/codepen.io\/cariefisher\/pen\/JjmmRxZ\">Demo<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"http:\/\/caniuse.com\/mdn-css_at-rules_media_forced-colors\"><code>forced-colors<\/code> CSS media feature<\/a> is currently supported by 31% of the most popular browsers, including desktop versions of Chrome, Edge, and Firefox. Although the browser support for this feature is increasing, not all operating systems currently offer a setting to activate the forced colors mode. The <a href=\"https:\/\/support.microsoft.com\/en-us\/windows\/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696\">Windows<\/a> operating system is the only exception, as it provides the necessary functionality for users to create customized themes that override the default ones by utilizing the Windows High Contrast mode.<\/p>\n<p>If you are using a non-Windows machine, you can emulate the behavior of this media feature by following the steps mentioned earlier in the <code>prefers-color-scheme<\/code> section using Chrome\u2019s <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/#open-rendering\">Rendering tab<\/a> and emulator, but with a focus on <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/emulate-css\/#emulate-css-media-feature-forced-colors\">emulating <code>forced-colors<\/code><\/a> instead.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;528&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>@prefers-forced-colors<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>@prefers-forced-colors<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/forced-colors.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"inverted-colors\"><code>inverted-colors<\/code><\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/inverted-colors\"><code>inverted-colors<\/code> CSS media feature<\/a> determines whether to show the content in its standard colors or if it reverses the colors.<\/p>\n<p>Two modes are available for the <code>inverted-colors<\/code> media feature: <code>none<\/code> and <code>inverted<\/code>. The <code>media (inverted-colors: none)<\/code> value indicates that the forced colors mode is not activated and uses the default color scheme. Using the <code>media (inverted-colors: inverted)<\/code> value indicates that all pixels within the displayed area have been inverted and renders the inverted color theme when a user chooses this option.<\/p>\n<p>When writing code for the <code>inverted-colors<\/code> CSS media feature, one option is to write your code using the <a href=\"https:\/\/wtools.io\/invert-color-code-online\"><code>inverted<\/code> value<\/a> of what you want a user to see to ensure correct rendering after applying the user\u2019s setting.<\/p>\n<p>For example, you want your element\u2019s background to be <code>#e87b2d<\/code>, which is a tangerine orange. In the theme code, you would write the opposite color, <code>#1784d2<\/code>, powder blue. Incorporating this inverse color into the code renders the intended tangerine orange instead of its inverse when users enable the <code>inverted-colors<\/code> setting.<\/p>\n<pre><code class=\"language-css\">@media (inverted-colors: inverted) {\n  body {\n    background-color: #99cc66;\n  }\n\n  .without [data-word=\"without\"] .char:before,\n  .without [data-word=\"without\"] .char:after {\n    color: #ee1166;\n  }\n\n  .without {\n    color: #111111;\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors-green-purple.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors-green-purple.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The top (<a href=\"https:\/\/codepen.io\/cariefisher\/pen\/JjmmRxZ\">demo<\/a>) is what the code looks like before it is inverted. The image below (<a href=\"https:\/\/codepen.io\/cariefisher\/pen\/JjmmRxZ\">demo<\/a>) is what can actually be seen when the filter is activated. (Image credit: <a href=\"\"><\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors-green-purple.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Current browser support for <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_media_inverted-colors\"><code>inverted-colors<\/code><\/a> is 20% for Safari desktop and iOS browsers. While Chrome\u2019s Rendering tab and emulator do not work for this particular media feature, you can <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Firefox\/Experimental_features#inverted-colors_media_feature\">emulate <code>inverted-colors<\/code><\/a> using Firefox (version 114 or newer).<\/p>\n<ol>\n<li>Open a new tab in Firefox and type or paste <code>about:config<\/code> in the address bar, and press <kbd>Enter<\/kbd>\/<kbd>Return<\/kbd>. Click the button acknowledging that you will be careful.<\/li>\n<li>In the search box, enter <code>layout.css.inverted-colors<\/code> and wait for the list to be filtered.<\/li>\n<li>Use the toggle button to switch the preference from <code>false<\/code> to <code>true<\/code>.<\/li>\n<li>Enable the inverted colors setting in your operating system and navigate to a webpage or code example with the <code>inverted-colors<\/code> theme to observe the inverted effect.<\/li>\n<\/ol>\n<p>The setting for the <code>inverted-colors<\/code> media feature is available on <a href=\"https:\/\/support.apple.com\/guide\/mac-help\/change-display-settings-for-accessibility-unac089\/mac\">Mac<\/a> and <a href=\"https:\/\/support.microsoft.com\/en-gb\/office\/use-color-and-contrast-for-accessibility-in-microsoft-365-bb11486d-fc7d-4cd9-b344-16e2bc2a2387#bkmk_invertwin11\">Windows<\/a> operating systems.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;523&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>inverted-colors<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>inverted-colors<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/inverted-colors.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops\u00a0\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"media-features-for-contrast\">Media Features For Contrast<\/h2>\n<p>Next, let\u2019s talk about CSS media features related to contrast. Contrast plays a crucial role in conveying visual information to users, working hand in hand with color. When proper levels of color contrast are not implemented, it becomes difficult to distinguish essential elements such as text, icons, and important graphics. As a result, the design can become inaccessible not only to the 46 million people worldwide with low vision but also to older adults, individuals using monochrome displays, or those in specific situations like low lighting in a room.<\/p>\n<h3 id=\"prefers-contrast\"><code>prefers-contrast<\/code><\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-contrast\"><code>prefers-contrast<\/code> CSS media feature<\/a> detects the user\u2019s preference for higher or lower contrast on a page. The feature uses the information to make appropriate adjustments, such as modifying the contrast ratio between colors nearby or altering the visual prominence of elements, such as adjusting their borders, to better suit the user\u2019s contrast requirements.<\/p>\n<p>There are four values for this CSS media feature: <code>no-preference<\/code>, <code>less<\/code>, <code>more<\/code>, and <code>custom<\/code>. The <code>media (prefers-contrast: no-preference)<\/code> value indicates that the user has no preference (or did not choose one since it is the default setting), and the <code>media (prefers-contrast: less)<\/code> value indicates a user\u2019s preference for less contrast. Conversely, the <code>media (prefers-contrast: more)<\/code> value indicates a user\u2019s preference for stronger contrast.<\/p>\n<p>The <code>media (prefers-contrast: custom)<\/code> value is a bit more complex as it allows users to use a custom set of colors \u2014 which could be specific to contrast \u2014 or choose a palette. For example, a user could select a theme composed entirely of shades of blue, primary colors, or even a rainbow theme \u2014 anything they choose.<\/p>\n<p><strong>Note<\/strong>: <em>When a user selects the custom contrast setting, it will align with the color palette defined by users of <code>forced-colors: active<\/code> value, so be sure to account for that in the code.<\/em><\/p>\n<pre><code class=\"language-css\">@media (prefers-contrast: more) {\n  .title2 {\n    color: var(--clr-6);\n  }\n\n  .aurora2__item:nth-of-type(1),\n  .aurora2__item:nth-of-type(2),\n  .aurora2__item:nth-of-type(3),\n  .aurora2__item:nth-of-type(4) {\n    background-color: var(--clr-6);\n  }\n}\n\n@media (prefers-contrast: less) {\n  .title {\n    color: var(--clr-5);\n  }\n\n  .aurora__item:nth-of-type(1),\n  .aurora__item:nth-of-type(2),\n  .aurora__item:nth-of-type(3),\n  .aurora__item:nth-of-type(4) {\n    background-color: var(--clr-5);\n  }\n}\n\n@media (prefers-contrast: custom) {\n  .aurora2__item:nth-of-type(1) {\n    background-color: var(--clr-1);\n  }\n  .aurora2__item:nth-of-type(2) {\n    background-color: var(--clr-2);\n  }\n  .aurora2__item:nth-of-type(3) {\n    background-color: var(--clr-3);\n  }\n  .aurora2__item:nth-of-type(4) {\n    background-color: var(--clr-4);\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-contrast-comparisons.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"358\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Comparing contrast preferences, clockwise starting at top-left: Default, Less, More, and Custom\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-contrast-comparisons.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Comparing contrast preferences, clockwise starting at top-left: Default, Less, More, and Custom. (<a href=\"https:\/\/codepen.io\/cariefisher\/pen\/GRYYmoR\">Demo<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-contrast-comparisons.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Currently, 91% of the most widely used browsers offer support for the <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_media_prefers-contrast\"><code>prefers-contrast<\/code> media feature<\/a>. However, the majority of this support is focused on enhancing contrast rather than reducing it or allowing for personalized contrast themes.<\/p>\n<p>To effectively demo and test all the different contrast options for this CSS media feature, use the Chrome <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/#open-rendering\">Rendering tab<\/a> and emulator as described earlier, but with a specific emphasis on <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/emulate-css\/#emulate-css-media-feature-prefers-contrast\">emulating the <code>prefers-contrast<\/code> media feature<\/a> this time.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;552&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>@prefers-contrast<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>@prefers-contrast<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-color-scheme.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"prefers-reduced-transparency\"><code>prefers-reduced-transparency<\/code><\/h3>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-transparency\"><code>prefers-reduced-transparency<\/code> CSS media feature<\/a> determines if the user has requested the system to use fewer transparent or translucent layer effects.<\/p>\n<p>It takes one of two possible values: <code>no-preference<\/code> and <code>reduce<\/code>. The <code>media (prefers-reduced-transparency: no-preference)<\/code> value indicates that the user has not specified any preference for the system (this is also the default setting). On the other hand, the <code>media (prefers-reduced-transparency: reduce)<\/code> value indicates that the user has informed the system about their preference for an interface that minimizes the application of transparent or translucent layer effects.<\/p>\n<pre><code class=\"language-css\">@media (prefers-reduced-transparency: reduce) {\n  .title,\n  .title2 {\n    opacity: 0.7;\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency-comparison.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"646\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Comparing transparency preferences: Default (top) and Reduced (bottom)\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency-comparison.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Comparing transparency preferences: Default (top) and Reduced (bottom). (<a href=\"https:\/\/codepen.io\/cariefisher\/pen\/GRYYmoR\">Demo<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency-comparison.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The current browser support for <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_media_prefers-reduced-transparency\">@prefers-reduced-transparency<\/a> stands at 0%. This CSS media feature is highly experimental and should not be utilized in production code at the time I\u2019m writing this article.<\/p>\n<p>However, if you wish to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Firefox\/Experimental_features#prefers-reduced-transparency_media_feature\">emulate the <code>prefers-reduced-transparency<\/code> media feature behavior<\/a>, you can follow these steps using Firefox (version 113 or newer).<\/p>\n<ol>\n<li>Open a new tab in Firefox and type or paste <code>about:config<\/code> in the address bar, and press <kbd>Enter<\/kbd>\/<kbd>Return<\/kbd>. Click the button acknowledging that you will be careful.<\/li>\n<li>In the search box, type or paste <code>layout.css.prefers-reduced-transparency<\/code> and wait for the list to be filtered.<\/li>\n<li>Use the toggle button to switch the preference from the default state of false to true.<\/li>\n<li>Adjust your operating system\u2019s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-transparency#user_preferences\">transparency settings<\/a> and navigate to a webpage or code example with the <code>prefers-reduced-transparency<\/code> theme to observe the effect of reduced transparency.<\/li>\n<\/ol>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;575&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>@prefers-reduced-transparency<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>@prefers-reduced-transparency<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-transparency.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"media-features-for-motion\">Media Features For Motion<\/h2>\n<p>Lastly, let\u2019s turn our focus to motion. Whether it involves videos, GIFs, or SVGs, movement can enrich our online experiences. However, this media type can also adversely affect many individuals. People with vestibular disabilities, seizure disorders, and migraine disorders can benefit from accessible media. CSS media features for motion allow us to incorporate both dynamic movement and static states for elements, enabling us to have the best of both worlds.<\/p>\n<h3 id=\"prefers-reduced-motion\"><code>prefers-reduced-motion<\/code><\/h3>\n<p>Using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-motion\"><code>prefers-reduced-motion<\/code> CSS media feature<\/a> helps determine whether the user has requested the system to minimize the usage of non-essential motion.<\/p>\n<p>This CSS media feature accepts one of two values: <code>no-preference<\/code> and <code>reduce<\/code>. The <code>media (prefers-reduced-motion: no-preference)<\/code> value indicates that the user has not specified any preference for the system (this is also the default setting). Conversely, the <code>media (prefers-reduced-motion: reduce)<\/code> value indicates that the user has informed the system about their preference for an interface that eliminates or substitutes motion-based animations that may cause discomfort or serve as distractions for them.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">@media (prefers-reduced-motion: reduce) {\n  .bg-rainbow {\n    animation: none;\n  }\n\n  .perfection {\n    .word {\n      .char {\n        animation: slide-down 5s cubic-bezier(0.75, 0, 0.25, 1) both;\n        animation-delay: calc(#{$delay} + (0.5s * var(--word-index)));\n      }\n    }\n\n    [data-word=\"perfection\"] {\n      animation: slide-over 4.5s cubic-bezier(0.5, 0, 0.25, 1) both;\n      animation-delay: $delay;\n\n      .char {\n        animation: none;\n        visibility: hidden;\n      }\n\n      .char:before,\n      .char:after {\n        animation: split-in 4.5s cubic-bezier(0.75, 0, 0.25, 1) both alternate;\n        animation-delay: calc(\n          3s + -0.2s * (var(--char-total) - var(--char-index))\n        );\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<\/div>\n<p>You can compare the difference in the following videos and by viewing a <a href=\"https:\/\/codepen.io\/cariefisher\/pen\/zYmmZZZ\">live demo<\/a>.<\/p>\n<figure class=\"video-embed-container break-out\">\n<div class=\"video-embed-container--wrapper\"><\/div><figcaption>Default motion<\/figcaption><\/figure>\n<figure class=\"video-embed-container break-out\">\n<div class=\"video-embed-container--wrapper\"><\/div><figcaption>Reduced motion<\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_media_prefers-reduced-motion\"><code>prefers-reduced-motion<\/code><\/a> CSS media feature boasts the broadest browser support among all other CSS media features, with an impressive 94% support across the latest versions of the most popular desktop and mobile browsers. Most operating systems offer a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-motion#user_preferences\">reduced motion setting<\/a> that you can use for demo purposes. Alternatively, you can <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/emulate-css\/#emulate-css-media-feature-prefers-reduced-motion\">emulate <code>prefers-reduced-motion<\/code><\/a> using Chrome\u2019s <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/#open-rendering\">Rendering tab<\/a> and emulator.<\/p>\n<p>Unlike other media features, the main questions regarding the <code>prefers-reduced-motion<\/code> media feature revolve less around browser and operating system support and more around determining the degree and manner of motion reduction. For instance, should the motion be slowed down, prevented from infinite loops, or entirely stopped? There are many aspects to consider when defining the <a href=\"https:\/\/www.smashingmagazine.com\/2020\/09\/design-reduced-motion-sensitivities\">reduced motion states<\/a> of your moving elements. When in doubt, think: <a href=\"https:\/\/web.dev\/prefers-reduced-motion\">less is more<\/a>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;552&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>prefers-reduced-motion<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>prefers-reduced-motion<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-motion.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops\u00a0\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h3 id=\"prefers-reduced-data\"><code>prefers-reduced-data<\/code><\/h3>\n<p>Last but certainly not least, let\u2019s examine the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-data\"><code>prefers-reduced-data<\/code> CSS media feature<\/a>. This media feature determines whether the user prefers to receive alternate content that consumes less data when rendering the page.<\/p>\n<p>This CSS media feature has two possible values: <code>no-preference<\/code> and <code>reduce<\/code>. The <code>media (prefers-reduced-motion: no-preference)<\/code> value indicates that the user has not specified any preference for the system (which is also the default setting). On the other hand, the <code>media (prefers-reduced-data: reduce)<\/code> value indicates that the user has expressed a preference for lightweight alternate content.<\/p>\n<p>Unlike other CSS media features, a user\u2019s preference for the <code>prefers-reduced-data<\/code> media feature could vary. It may be a system-wide setting exposed by the operating system or settings controlled by the user agent. In the case of the user agent, they may determine this value based on the same user or system preference used for setting the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Save-Data\">Save-Data<\/a> HTTP request header.<\/p>\n<p>Note that the Save-Data network client request header is still considered experimental technology, but it has achieved a remarkable <a href=\"https:\/\/caniuse.com\/mdn-http_headers_save-data\">72% browser support<\/a> across various browsers, except Safari and Firefox on desktop and mobile.<\/p>\n<pre><code class=\"language-css\">@media (prefers-reduced-data: reduce) {\n  .bg-rainbow {\n    animation: none;\n  }\n\n  .perfection {\n    .word {\n      .char {\n        animation: none;\n      }\n    }\n\n    [data-word=\"perfection\"] {\n      animation: none;\n\n      .char {\n        animation: none;\n        visibility: hidden;\n      }\n\n      .char:before,\n      .char:after {\n        animation: none;\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;346&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Visual rendering of <code>@media (prefers-reduced-data: reduce<\/code>&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Visual rendering of <code>@media (prefers-reduced-data: reduce<\/code>. (<a href=\"http:\/\/codepen.io\/cariefisher\/pen\/zYmmZZZ\">Demo<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/demo-prefers-redued-data.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Similar to <code>prefers-reduced-transparency<\/code>, the <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_media_prefers-reduced-data\"><code>prefers-reduced-data<\/code><\/a> CSS media feature is highly experimental and should not be utilized in production code at this time as the current browser support for it stands at 0%.<\/p>\n<p>However, if you wish to emulate the <code>prefers-reduced-data<\/code> behavior, you can follow these steps using Chrome (version 85 or newer).<\/p>\n<ol>\n<li>Open a new tab in Chrome and type or paste <code>chrome:\/\/flags<\/code> in the address bar and press <kbd>Enter<\/kbd>\/<kbd>Return<\/kbd>.<\/li>\n<li>In the search box, type or paste <code>experimental-web-platform-features<\/code> and wait for the list to be filtered.<\/li>\n<li>Use the dropdown option to switch the preference from the default state of disabled to enabled.<\/li>\n<li>Use the Chrome <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/rendering\/#open-rendering\">Rendering tab<\/a> and choose the appropriate CSS media feature to emulate.<\/li>\n<\/ol>\n<p>Note that you can also enable the <code>prefers-reduced-data<\/code> feature in Edge, Opera, and Chrome Android (all behind the same <code>experimental-web-platform-features<\/code> flag), but it is less clear how you would emulate the media feature without the rendering tab and emulator found in the desktop version of Chrome.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png\"><\/p>\n<p>    &lt;img<br \/>\n      loading=&quot;lazy&quot;<br \/>\n      decoding=&quot;async&quot;<br \/>\n      fetchpriority=&quot;low&quot;<br \/>\n\t\t\twidth=&quot;800&quot;<br \/>\n\t\t\theight=&quot;552&quot;<\/p>\n<p>\t\t\tsrcset=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png 400w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_800\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png 800w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1200\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png 1200w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_1600\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png 1600w,<br \/>\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_2000\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png 2000w&quot;<br \/>\n\t\t\tsrc=&quot;https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png&quot;<\/p>\n<p>\t\t\tsizes=&quot;100vw&quot;<br \/>\n\t\t\talt=&quot;Browser support for <code>prefers-reduced-data<\/code> at the time of writing&#8221;<br \/>\n\t\t\/&gt;<\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Browser support for <code>prefers-reduced-data<\/code> at the time of writing. (<a href=\"https:\/\/files.smashing.media\/articles\/css-accessibility-inclusion-user-choice\/prefers-reduced-data.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"amplifying-inclusion-through-user-choice\">Amplifying Inclusion Through User Choice<\/h2>\n<p>In the tech world, accessibility often receives criticism, particularly with aesthetics and advanced features. However, this negative perception can be changed. It is possible to incorporate stunning design and innovative functionality while prioritizing accessibility by leveraging CSS user-focused media features that address <strong>color<\/strong>, <strong>contrast<\/strong>, and <strong>motion<\/strong>.<\/p>\n<p>Today, by incorporating all available options for each CSS media feature currently supported by browsers (with support exceeding 90%), you can provide users with 16 combinations of options. However, when the browsers and operating systems implement and support more experimental media features, the impact on user customization expands significantly to a staggering 256 combinations of options. A large number of possible options truly amplifies the potential impact designers and developers can have on user experiences.<\/p>\n<p>As professionals within the technology industry, our goal should be to ensure that digital products are accessible to all individuals. By offering users the ability to personalize their experience, we can include an array of remarkable features in a responsible manner. Our job is to provide options and let people choose their own adventure.<\/p>\n<h3 id=\"further-reading-on-smashingmag\">Further Reading On SmashingMag<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/creating-high-contrast-design-system-css-custom-properties\/\">Creating A High-Contrast Design System With CSS Custom Properties<\/a>,\u201d Brecht De Ruyte<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/02\/guide-building-accessible-carousels\/\">A Step-By-Step Guide To Building Accessible Carousels<\/a>,\u201d Sonja Weckenmann<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/07\/designing-age-inclusive-products-guidelines-best-practices\/\">Designing Age-Inclusive Products: Guidelines And Best Practices<\/a>,\u201d Michal Halperin Ben Zvi<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/11\/guide-keyboard-accessibility-html-css-part1\/\">A Guide To Keyboard Accessibility: HTML And CSS (Part 1)<\/a>,\u201d Cristian D\u00edaz<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk, il)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>CSS And Accessibility: Inclusion Through User Choice CSS And Accessibility: Inclusion Through User Choice Carie Fisher 2023-08-01T11:00:00+00:00 2024-05-01T16:05:07+00:00 We make [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/302"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":1,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"predecessor-version":[{"id":303,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/302\/revisions\/303"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}