Use CSS preferences – * specification to improve the accessibility and robustness of the website

Time:2021-7-28

The text will introduce several new features and functions in CSS media query:

  • 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 need to pay more attention to whether our pages are easy to use, and whether we take care of more user groups?

You know, by December 2020, the number of Chinese Internet users had reached 989 million(Data source: the 47th statistical report on China’s Internet development), not every user is using itiPhone12 Pro MaxFor this high-end flagship, more people may still use hundred yuan machines, thousand yuan machines, and PCs more than ten years ago. Not every user is physically or physically sound, and there will be all kinds of users with visual impairment, hearing impairment, movement impairment and so on.

Our pages need to be incrementally enhanced, using a variety of new and fancy features to add a variety of cool effects.

At the same time, we should also consider the user experience of some low-end models, the use of some disabled people, or respect the personalized configuration of users. Based on this, CSS specification puts forward a series of useful attributes to adapt some personalized configurations of users and improve the accessibility and robustness of pages.

That is, the five mentioned aboveprefers-*Let’s introduce the contents one by one.

CSS @ media specification

prefers-reduced-motionprefers-color-schemeprefers-contrastprefers-reduced-transparencyprefers-reduced-dataAll belong to the content of CSS @ media specification, and the latest CSS @ media specification has arrivedFifth Edition – media queries level 5

Their usage is basically the same, like this, which is similar to the viewport media query we often writeprefers-reduced-motionFor example:

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

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

So what’s the use of them?

Preferences reduced motion attenuates the animation effect

The preferences reduced motion rule query is used to weaken the animation effect. In addition to the default rule, there is only one syntax valueprefers-reduced-motion: reduce, after the rule is enabled, it is equivalent to telling the user agent that the page he wants to see can be deleted or replaced with some animation types that will make some visually impaired people uncomfortable.

Indications that user has notified the system that they prefer an interface that removes or replaces the types of motion based animation that trigger discovery for those with volatile motion disorders

Vestibular motion disorders is a kind of patients with visual movement disorders. I can only Google translate it in ChineseVestibular dyskinesia, I don’t feel quite right. Google said that it is a kind of disease that can lead to vertigo. For example, an animation flashes many times a second, which will lead to the discomfort of patients.

Use method, or the above code:

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

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

If we have some animations like this:

Use CSS preferences - * specification to improve the accessibility and robustness of the website

When the user is turned onprefers-reduced-motion: reduceIt should be removed. So how do I turn on this option?MDN — prefers-reduced-motionGiven are:

  • In GTK / gnome, you can set the value of GTK enable animations to false through the configuration of Gnome tweets (in the “general” or “appearance” menu, depending on the specific version)
  • GTK enable animations = false can be set under the [settings] module in the configuration file of GTK 3
  • 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 animation
  • In MacOS: System Preferences > assisted use > display > reduce motion
  • On IOS: Settings > General > accessibility > reduce motion
  • On Android 9 +: Settings > accessibility > remove animation

Preferences color scheme adapts to light and dark themes

prefers-color-schemeIt is also 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 the default mode is bright mode, we only need to adapt to the 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 diagram. It is certainly not so simple to switch between two sets of topics, and there are many methods. This article will not repeat it. Readers can understand various schemes to realize topic switching or light and dark switching by themselves.

Preferences contrast adjust content color contrast

prefers-contrastThe CSS media function is used to detect whether users require web content to be presented with higher or lower contrast. Of which:

  • prefers-contrast: no-preference: default, no change
  • prefers-contrast: less: you want a lower contrast interface
  • prefers-contrast: more: want to use a higher contrast interface

withprefers-contrast: lessAs an example, the syntax is as follows:

body {
    background: #fff; //  The contrast between text and background is 5.74
    color: #666;
}

//Enhance contrast
@media (prefers-contrast: more) {
    body {
        background: #fff; //  The contrast between text and background is 21
        color: #000;
    }
}

The above is only pseudo CSS code. You may need to process some specific elements or usefilter: contrast()Global unified processing is used to realize functions like this when configuration is enabled:

Use CSS preferences - * specification to improve the accessibility and robustness of the website

So why do you need to adjust the contrast of the page? This is to make some visually impaired users have a better experience. Here we add some knowledge related to contrast accessibility. The content is taken from this article of self–Incomplete guide to front-end good practice

Accessibility – color contrast

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

What is color contrast

Have you ever cared about the display of page content and whether the color is appropriate? Can color weak and color blind users see the content normally? Good color use is beneficial at any time, and is not limited to color weak and color blind users. When you use a mobile phone outdoors, the sun is very strong and you can’t see clearly. The high-definition and high contrast text that meets the accessibility standard is easier to read.

Here is a concept–Color contrastIn short, description is the difference in brightness between the two colors. When applied to our pages, most cases are the contrast difference between background color and content color.

The most authoritative Internet accessibility specification——WCAG AAThe specification stipulates that the color contrast of all important contents needs to reach 4.5:1 or above (3:1 or above when the font size is greater than 18) to have good readability.

Borrow a picture–Zhihu — 15 UI design tools to help you easily do a good job of accessibility

Use CSS preferences - * specification to improve the accessibility and robustness of the website

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

Tool for checking color contrast

Chrome browser has supported checking the color contrast of elements since a long time ago. Take the page I’m currently writing as an example,Github IssuesTwo buttons for editing pages:

Use CSS preferences - * specification to improve the accessibility and robustness of the website

Review the elements, and you can see the color contrast of the two buttons:

Use CSS preferences - * specification to improve the accessibility and robustness of the website

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

In addition, you can also directly see the current color contrast by changing the color in the color finder of the style interface of the review element:

Use CSS preferences - * specification to improve the accessibility and robustness of the website

Preferences reduced transparency

prefers-reduced-transparencyThe CSS media function is used to detect whether users require to reduce transparent elements in web pages:

  • prefers-contrast: no-preference: default, no change
  • prefers-contrast: reduce: you want the interface elements to have as few transparent elements as possible

withprefers-contrast: reduceAs an example, the syntax is as follows:

.ele {
    opacity: 0.5;
}

//Reduce transparent elements
@media (prefers-contrast: reduce) {
    .ele {
        opacity: 1;
    }
}

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

Use CSS preferences - * specification to improve the accessibility and robustness of the website

Preferences reduced data reduce data transmission

For some regions with poor network speed or high traffic, users will want to reduce traffic requests in the page. Based on this, there areprefers-reduced-data

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

  • prefers-reduced-data: no-preference: default, no change
  • prefers-reduced-data: reduce: want interface elements to consume less Internet traffic

withprefers-reduced-data: reduceAs an example, the syntax is as follows:

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

//Reduce picture quality
@media (prefers-reduced-data: reduce) {
    .ele {
        background-image: url(image-600w.jpg);
    }
}

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

Of course, the above code is just a schematic. There are actually more we can do.

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

Of course, starting with chrome 85 +, you can open#enable-experimental-web-platform-featuresThe lab option enables this function!

last

It is not easy to improve the accessibility and user experience of the website. While continuously optimizing and making progress, we also need to improve our relevant knowledge and skills at the same time. With the expansion of user groups, there are bound to be users with various needs. Now they are not paid much attention to, and accessibility will become more and more important in the future.

Well, this article ends here. I hope it will help you:)

If you want Get to get the most interesting CSS information, don’t miss my official account.ICSS front end anecdotes 😄

More wonderful CSS technical articles are summarized in myGithub — iCSS, continuously updated. Welcome to a star subscription collection.

If you have any questions or suggestions, you can communicate more. The original articles have limited writing style and shallow talents. If there is anything wrong in the article, please let me know.

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]