详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性


Posted in HTML / CSS onMay 25, 2021

文本将介绍 CSS 媒体查询中新增的几个特性功能:

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

利用好它们,能够很好的提升我们网站的健壮性与可访问性!

互联网发展到今天,对于我们的前端而言,我们的关注点不应该仅仅是我们产出的页面能不能用,也需要更多的去关注我们的页面好不好用,有没有照顾到更多的用户群体?

要知道,截至 2020 年 12 月,中国网民规模达 9.89 亿(数据来源 - 第47次《中国互联网络发展状况统计报告》 ),并不是每个用户都在使用 iPhone12 Pro Max 这种高端旗舰,更多的人群可能使用的还是百元机、千元机,十几年前的 PC。也并非每个用户都是身体或者生理上完全健全的,会存在各种视觉障碍、听觉障碍、行动障碍等用户。

我们的页面需要渐进增强,使用各种新的、花里胡哨的特性,添加各种酷炫的效果。

同时,也要考虑一些使用低端机型的用户体验,考虑部分残障人士的使用,或者是尊重用户的个性化配置。基于此,CSS 规范提出了一系列有益的属性,用于适配用户的一些个性化配置,提升页面的可访问性及健壮性。

也就是上面提到的 5 个 prefers-* 的内容,下面我们逐一介绍。

CSS @media 规范

prefers-reduced-motionprefers-color-schemeprefers-contrastprefers-reduced-transparencyprefers-reduced-data 都属于 CSS @media 规范中的内容,最新的 CSS @media 规范出到了第五版 - Media Queries Level 5

它们的用法基本一致,像是这样,与我们常写的视口媒体查询类似,以 prefers-reduced-motion 为例子:

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

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

那么,它们都有什么用呢?

prefers-reduced-motion 减弱动画效果

prefers-reduced-motion 规则查询用于减弱动画效果,除了默认规则,只有一种语法取值 prefers-reduced-motion: 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.

vestibular motion disorders 是一种视觉运动障碍患者,中文我只能谷歌翻译,翻译出来是前庭运动障碍,我感觉不太对,谷歌了一下是一种会导致眩晕的一类病症,譬如一个动画一秒闪烁多次,就会导致患者的不适。

使用方法,还是上面那段代码:

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

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

如果我们有一些类似这样的动画:

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

在用户开启了 prefers-reduced-motion: reduce 时,就应该把它去掉。那么该如何开启这个选项呢?MDN -- prefers-reduced-motion 给出的是:

  • 在 GTK/Gnome 中,可以通过 GNOME Tweaks (在“通用”或“外观”菜单中,取决于具体版本) 的配置,设置 gtk-enable-animations 的值为 false
  • 可以在 GTK 3 的配置文件中的 [Settings] 模块下设置 gtk-enable-animations = false
  • 在 Windows 10 中:设置 > 轻松获取 > 显示 > 在 Windows 中显示动画
  • 在 Windows 7 中:控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画
  • 在 MacOS 中:系统偏好 > 辅助使用 > 显示 > 减少运动
  • 在 iOS 上:设置 > 通用 > 辅助性 > 减少运动
  • 在 Android 9+ 上:设置 > 辅助性 > 移除动画

prefers-color-scheme 适配明暗主题

prefers-color-scheme 还是非常好理解的,它用于匹配用户通过操作系统设置的明亮或夜间(暗)模式。它有两个不同的取值:

  • prefers-color-scheme: light: 明亮模式
  • prefers-color-scheme: dark: 夜间(暗)模式

语法如下,如果我们默认的是明亮模式,只需要适配夜间模式即可:

body {
    background: white;
    color: black;
}

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

当然,上述只是 CSS 代码示意,要做到两套主题的切换肯定不是这么简单,方法也很多,本文不赘述,读者可以自行了解各种实现主题切换,或者是明暗切换的方案。

prefers-contrast 调整内容色彩对比度

prefers-contrast 该 CSS 媒体功能是用来检测用户是否要求将网页内容以更高或者更低的对比度进行呈现。其中:

  • prefers-contrast: no-preference:默认值,不作任何变化
  • prefers-contrast: less:希望使用对比度更低的界面
  • prefers-contrast: more:希望使用对比度更高的界面

prefers-contrast: less 为例子,语法如下:

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

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

上面只是伪 CSS 代码,具体可能需要对具体的一些元素进行处理,或者使用 filter: contrast() 全局统一处理,当开启配置时,用于实现类似这样的功能:

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

那为什么需要调整页面的对比度呢?此举是为了让一些视觉障碍的用户有更好的体验,这里补充一些对比度可访问性相关的知识。内容取自我的这篇文章 -- 前端优秀实践不完全指南

可访问性 -- 色彩对比度

颜色,也是我们天天需要打交道的属性。对于大部分视觉正常的用户,可能对页面的颜色敏感度还没那么高。但是对于一小部分色弱、色盲用户,他们对于网站的颜色会更加敏感,不好的设计会给他们访问网站带来极大的不便。

什么是色彩对比度

是否曾关心过页面内容的展示,使用的颜色是否恰当?色弱、色盲用户能否正常看清内容?良好的色彩使用,在任何时候都是有益的,而且不仅仅局限于对于色弱、色盲用户。在户外用手机、阳光很强看不清,符合无障碍标准的高清晰度、高对比度文字就更容易阅读。

这里就有一个概念 -- 颜色对比度,简单地说,描述就是两种颜色在亮度(Brightness)上的差别。运用到我们的页面上,大多数的情况就是背景色(background-color)与内容颜色(color)的对比差异。

最权威的互联网无障碍规范 —— WCAG AA规范规定,所有重要内容的色彩对比度需要达到 4.5:1 或以上(字号大于18号时达到 3:1 或以上),才算拥有较好的可读性。

借用一张图 -- 知乎 -- 助你轻松做好无障碍的15个UI设计工具推荐

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

很明显,上述最后一个例子,文字已经非常的不清晰了,正常用户都已经很难看得清了。

检查色彩对比度的工具

Chrome 浏览器从很早开始,就已经支持检查元素的色彩对比度了。以我当前正在写作的页面为例子,Github Issues 编辑页面的两个按钮:

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

审查元素,分别可以看到两个按钮的色彩对比度:

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

可以看到,绿底白字按钮的色彩对比度是没有达到标准的,也被用黄色的叹号标识了出来。

除此之外,在审查元素的 Style 界面的取色器,改变颜色,也能直观的看到当前的色彩对比度:

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

prefers-reduced-transparency 减少透明元素

prefers-reduced-transparency 该 CSS 媒体功能是用来检测用户是否要求减少网页中的透明元素:

  • prefers-contrast: no-preference:默认值,不作任何变化
  • prefers-contrast: reduce:希望界面元素存在尽可能少的透明元素

prefers-contrast: reduce 为例子,语法如下:

.ele {
    opacity: 0.5;
}

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

不过,这是仍处于实验室的功能,暂时没有任何浏览器支持该媒体查询~ ?

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

prefers-reduced-data 减少数据传输

对于部分网速较差的地区,或者流量很贵的情况,用户会希望减少页面中的流量请求,基于此有了 prefers-reduced-data

prefers-reduced-data 该 CSS 媒体查询功能是用于告知用户代理,希望减少页面的流量请求。

  • prefers-reduced-data: no-preference:默认值,不作任何变化
  • prefers-reduced-data: reduce:希望界面元素消耗更少的互联网流量

prefers-reduced-data: reduce 为例子,语法如下:

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

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

当检测到用户开启了 prefers-reduced-data: reduce,我们将提供压缩度更高,尺寸更小,消耗流量更少的图片。

当然,上述代码只是个示意,我们可以做的其实有更多。

不过,这是仍处于实验室的功能,暂时没有任何浏览器支持该媒体查询~ ?

当然,从 Chrome 85+ 开始,可以通过开启 #enable-experimental-web-platform-features 实验室选项开启该功能!

最后

提升网站的可访问性与用户体验并非易事,规范在持续优化进步的同时我们也需要同步提升自己的相关知识技能。用户群体的扩大必然会存在各种需求的用户,现在不太受重视可访问性未来一定会越来越重要。

好了,本文到此结束,希望对你有帮助 ?

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

到此这篇关于使用 CSS prefers-* 规范,提升网站的可访问性与健壮性的文章就介绍到这了,更多相关CSS prefers-* 规范内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3使用多列制作瀑布流
May 10 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
CSS filter 有什么神奇用途
HTML5来实现本地文件读取和写入的实现方法
May 25 #HTML / CSS
详解CSS不受控制的position fixed
May 25 #HTML / CSS
详解CSS伪元素的妙用单标签之美
浅谈由position属性引申的css进阶讨论
详解CSS玩转图片Base64编码
详解CSS不定宽溢出文本适配滚动
May 24 #HTML / CSS
You might like
phpmyadmin操作流程
2006/10/09 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
浅谈PHP进程管理
2019/03/08 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Vuex简单入门
2017/04/19 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Python内存映射文件读写方式
2020/04/24 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
生物科学专业职业规划书范文
2014/02/11 职场文书
预备党员的自我评价
2014/03/12 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
给老婆的道歉信
2015/01/20 职场文书