Use CSS prefers-* specifications to improve the accessibility and robustness of the website

The text will introduce several new features in CSS media queries:

• prefers-reduced-motion
• prefers-color-scheme
• prefers-contrast
• prefers-reduced-transparency
• prefers-reduced-data

Making good use of them can improve the robustness and accessibility of our website!

With the development of the Internet today, for our front-end, our focus should not only be whether the pages we produce can be used, but also whether our pages are useful or not, and whether we take care of more Client?

You know, as of December 2020, the number of Chinese Internet users reached 989 million ( data source-the 47th "Statistical Report on Internet Development in China" ), not every user is using iPhone12 Pro Max For high-end flagships, more people may use 100-yuan phones, thousand-yuan phones, and PCs more than a decade ago. Not every user is physically or physically sound, and there will be various users with visual impairment, hearing impairment, and mobility impairment.

Our page needs to be progressively enhanced, using a variety of new and fancy features, and adding a variety of cool effects.

At the same time, we should also consider the user experience of some low-end models, consider the use of some people with disabilities, or respect the personalized configuration of users. Based on this, the CSS specification proposes a series of beneficial attributes to adapt to some of the user's personalized configuration and improve the accessibility and robustness of the page.

That is, the contents of the five prefers-* mentioned above, we will introduce them one by one below.

CSS @media specification

prefers-reduced-motion , prefers-color-scheme , prefers-contrast , prefers-reduced-transparency , prefers-reduced-data all belong to the content of the CSS @media specification. The latest CSS @media specification has fifth edition of 160ac613908d14-Media Queries Level 5 .

Their usage is basically the same, like this, similar to the viewport media query we often write. Take prefers-reduced-motion as an example:

.ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

So, what use are they all?

prefers-reduced-motion to reduce the animation effect

The prefers-reduced-motion rule query is used to reduce the animation effect. In addition to the default rule, there is only one syntax value prefers-reduced-motion: reduce . After the rule is turned on, it is equivalent to telling the user agent that you can delete or replace some of the pages you want to see. The type of animation that makes some visual movement impaired people uncomfortable.

Specification original: 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.

Vestibular motion disorders is a kind of visual movement disorder. I can only Google translation in Chinese. The translation is vestibular dyskinesia . I don’t feel right. Google it is a kind of disease that can cause dizziness, such as an animation. Flashing multiple times per second can cause discomfort to the patient.

How to use it, or the above piece of code:

.ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

If we have some animations like this:

When the user turns on prefers-reduced-motion: reduce , it should be removed. So how to turn on this option? MDN - prefers-reduced-motion gives:

• In GTK/Gnome, you can set the value of gtk-enable-animations to false through the configuration of GNOME Tweaks (in the "General" or "Appearance" menu, depending on the specific version)
• You can set gtk-enable-animations = false under the [Settings] module in the GTK 3 configuration file
• In Windows 10: Settings> Easy Access> Display> Show Animation in Windows
• In Windows 7: Control Panel> Easy Access>? Is the computer easier to view> Turn off unnecessary animations
• In MacOS: System Preferences> Accessibility> Display> Reduce Exercise
• On iOS: Settings> General> Accessibility> Reduce Exercise
• On Android 9+: Settings> Accessibility> Remove Animation

prefers-color-scheme adapts light and dark themes

prefers-color-scheme is still very easy to understand, it is used to match the bright or night (dark) mode set by the user through the operating system. It has two different values:

• prefers-color-scheme: light : Bright mode
• prefers-color-scheme: dark : Night (dark) mode

The syntax is as follows, if our default is bright mode, we only need to adapt to night mode:

body {
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: white;
    }
}

Of course, the above is just a CSS code indication. It is certainly not that simple to switch between the two sets of themes, and there are many methods. This article will not go into details. Readers can learn about various implementations of theme switching or light and dark switching.

prefers-contrast adjust the content color contrast

prefers-contrast The CSS media function is used to detect whether the user requires the web page content to be presented with higher or lower contrast. among them:

• prefers-contrast: no-preference : the default value, without any change
• prefers-contrast: less : Want to use a lower contrast interface
• prefers-contrast: more : Want to use a higher contrast interface

Take prefers-contrast: less as an example, the syntax is as follows:

body {
    background: #fff; // 文字与背景对比度为 5.74
    color: #666;
}

// 提升对比度
@media (prefers-contrast: more) {
    body {
        background: #fff; // 文字与背景对比度为 21
        color: #000;
    }
}

The above is just pseudo-CSS code. Specific elements may need to be processed, or filter: contrast() may be used for global unified processing. When the configuration is turned on, it is used to implement functions like this:

So why do you need to adjust the contrast of the page? This move is to allow some visually impaired users to have a better experience, here we add some knowledge about contrast accessibility. The content is taken from this article by - 160ac6139090a9 Incomplete guide to front-end good practices

Accessibility - color contrast

Color is also an attribute we need to deal with every day. For most users with normal vision, the color sensitivity of the page may not be so high. However, for a small number of color-blind and color-blind users, they will be more sensitive to the color of the website, and poor design will cause great inconvenience to them when visiting the website.

What is color contrast

Have you ever cared about the display of page content, and whether the colors used are appropriate? Can users with color weakness and color blindness see the content normally? Good use of color is beneficial at all times, and it is not limited to color weak and color-blind users. When you use your mobile phone outdoors, you can’t see clearly when the sun is strong, and the high-definition, high-contrast text that meets barrier-free standards is easier to read.

Here is a concept- color contrast , in simple terms, the description is the difference in brightness between two colors. When applied to our pages, most of the cases are the contrast between the background color (background-color) and the content color (color).

The most authoritative Internet accessibility specification- WCAG AA specification stipulates that the color contrast of all important content needs to reach 4.5:1 or above (3:1 or above when the font size is larger than 18), in order to have a better performance. Readability.

Borrow a picture- know almost-15 recommended UI design tools to help you easily do barrier-free :

Obviously, in the last example above, the text is very unclear, and it is already difficult for normal users to see clearly.

Tool to check color contrast

The Chrome browser has supported checking the color contrast of elements since a long time ago. Take the page I am currently writing as an example, Github Issues edit the two buttons of the page:

Examining the elements, you can see the color contrast of the two buttons respectively:

It can be seen that the color contrast of the white button on the green background is not up to the standard, and it is also marked with a yellow exclamation mark.

In addition, by changing the color in the color picker of the Style interface of the review element, you can also see the current color contrast intuitively:

prefers-reduced-transparency reduce transparent elements

prefers-reduced-transparency This CSS media function is used to detect whether the user requests to reduce the transparent elements in the webpage:

• prefers-contrast: no-preference : The default value, without any change
• prefers-contrast: reduce : Hope that the interface elements have as few transparent elements as possible

Take prefers-contrast: reduce as an example, the syntax is as follows:

.ele {
    opacity: 0.5;
}

// 减少透明元素
@media (prefers-contrast: reduce) {
    .ele {
        opacity: 1;
    }
}

However, this is a function that is still in the laboratory, and no browser supports this media query for the time being~ 😢

prefers-reduced-data to reduce data transmission

For some areas with poor Internet speeds, or where the traffic is very expensive, users will want to reduce traffic requests on the page. prefers-reduced-data

prefers-reduced-data This CSS media query function is used to inform user agents that they want to reduce page traffic requests.

• prefers-reduced-data: no-preference : The default value, without any change
• prefers-reduced-data: reduce : Hope that interface elements consume less Internet traffic

Take prefers-reduced-data: reduce as an example, the syntax is as follows:

.ele {
    background-image: url(image-1800w.jpg);
}

// 降低图片质量
@media (prefers-reduced-data: reduce) {
    .ele {
        background-image: url(image-600w.jpg);
    }
}

When it is detected that the user has enabled prefers-reduced-data: reduce , we will provide images with higher compression, smaller size, and less data consumption.

Of course, the above code is just an indication, there are actually more we can do.

However, this is a function that is still in the laboratory, and no browser supports this media query for the time being~ 😢

Of course, starting from Chrome #enable-experimental-web-platform-features , you can turn on this feature by turning on the 060ac613909383 lab option!

At last

Improving the accessibility and user experience of the website is not an easy task. While the norms continue to optimize and progress, we also need to simultaneously improve our knowledge and skills. The expansion of user groups will inevitably have users with various needs, and accessibility will become more and more important in the future.

Okay, this concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don’t miss my public - 160ac6139093c7 iCSS front-end facts 160ac6139093c8 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which is continuously updated, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing styles, lack of knowledge, and if there are any irregularities in the article, please let me know.