Web 中的可访问性 (CSS)
这是我关于 Web 上的可访问性的第二篇文章。在里面 上一篇文章 ，我在 HTML 中谈到了 Web 上的可访问性，而这一次，我将谈论 CSS。
可访问性是让我们的网页可供所有人使用。那些是屏幕阅读器用户或键盘使用用户以及互联网连接不良的用户。
在这里，我们谈论使所有人都可以访问我们的网站的事情。
键盘使用用户
如果您为他们准备好的功能，喜欢在没有鼠标的情况下使用键盘的用户可以在您的网站上获得出色的体验。就个人而言，我在 youtube 或 Netflix 等网站上经常使用键盘，我喜欢使用键盘浏览内容。在 HTML 中拥有良好的语义结构可以为我们的网站带来这个功能，我在之前的文章中已经谈到过。但是在这里我们遇到了 CSS 的问题。
重要的是不要在没有新样式的情况下删除焦点样式。这是一个例子。
*：重点{
大纲：无；
边框：3px 红色虚线；
}
屏幕阅读器
关于屏幕阅读器可访问性的 CSS 相关问题是未在 CSS 中使用 content 属性。 CSS 用于样式化而不是将内容写入您的网站。所以请下次不要在你的 CSS 中使用这个代码。因为屏幕阅读器无法访问它。
输入[类型=密码]::之后{
内容：“输入您的密码”
}
网速慢的用户
并非所有人都有高速互联网，也有一些国家禁止网站，所以人们不得不使用代理，这使得他们的连接速度变慢。
CSS 异步加载
CSS 是一种渲染锁定资源，这意味着浏览器首先加载样式表，然后显示内容。这会导致 First Contentful Paint 的增加。因此最好在链接标签中使用 preload 和 preconnect 属性来将样式导入 HTML 表单，这会导致 CSS 异步加载。
<link rel="preload" as=”style” href="mystyle.css”>
减小样式文件大小
样式的大小对于加载文件的速度很重要。有一些无用的样式。例如，有些样式只在大屏幕上使用，有些只在小屏幕上使用。所以我们可以把这两种样式分开，像这样导入。
<link rel="preload"as=”style” type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> <link rel="preload"as=”style” type="text/css" media="only screen and (min-device-width: 1000px)" href="laptop-device.css" />
浏览器支持
有些功能并非在所有浏览器中都可用，我们可以使用以下列表解决此问题：
- 使用浏览器前缀。
- 具有不支持的样式的后备样式
- 使用特征查询，如 @ 支持
用户偏好
用户可以更改浏览器的字体大小、使用缩放、使用暗模式等。为了获得更好的结果，我们作为开发人员应该使 Web 适合这些自定义更改。
使用 rem 单位
要拥有一个与浏览器字体相关的单位，我们可以使用 rem。通过拥有 rems 用户将获得更好的体验。
就个人而言，我使用
像素仅用于媒体查询。然后，我用大众和vh对于应根据设备尺寸进行缩放的布局，雷姆对于固定的布局和字体大小和%对于应该与其父布局成比例的子布局——所有这些都是相对单位。
黑暗模式
为了对暗模式产生影响，我们可以使用这个媒体查询 prefers-color-scheme。
身体{背景颜色：白色；颜色：黑色}
@media（喜欢颜色方案：深色）{
身体{背景颜色：黑色；白颜色}
}
结论
CSS可以通过以适当的方式使用它来对可访问性产生良好的影响，我们可以对键盘使用用户、阅读屏幕用户、网速慢的用户以及具有自定义偏好的用户产生良好的影响。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/14330/13090500
标签：Web,浏览器,样式,用户,访问,使用,CSS 来源： https://www.cnblogs.com/amboke/p/16656636.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。