Photo by KOBU代理商 on 不飞溅

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" />

浏览器支持

有些功能并非在所有浏览器中都可用，我们可以使用以下列表解决此问题：

1. 使用浏览器前缀。
2. 具有不支持的样式的后备样式
3. 使用特征查询，如 @ 支持

用户偏好

用户可以更改浏览器的字体大小、使用缩放、使用暗模式等。为了获得更好的结果，我们作为开发人员应该使 Web 适合这些自定义更改。

使用 rem 单位

要拥有一个与浏览器字体相关的单位，我们可以使用 rem。通过拥有 rems 用户将获得更好的体验。

就个人而言，我使用 像素 仅用于媒体查询。然后，我用 大众 和 vh 对于应根据设备尺寸进行缩放的布局， 雷姆 对于固定的布局和字体大小和 % 对于应该与其父布局成比例的子布局——所有这些都是相对单位。

黑暗模式

为了对暗模式产生影响，我们可以使用这个媒体查询 prefers-color-scheme。

 身体{背景颜色：白色；颜色：黑色}  
  
 @media（喜欢颜色方案：深色）{  
 身体{背景颜色：黑色；白颜色}  
 }

结论

CSS可以通过以适当的方式使用它来对可访问性产生良好的影响，我们可以对键盘使用用户、阅读屏幕用户、网速慢的用户以及具有自定义偏好的用户产生良好的影响。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11862/27020323