重学前端008 --- CSS 无障碍 Quiz
文章目录
- meta 总结
- html 页面结构
- img 尺寸
- 子选择器 >
- a 锚点
- 仅屏幕阅读器可见
- li 元素的悬停设置
- 小屏幕防止溢出
meta 总结
<head><!-- 基础字符编码声明 --><meta charset="UTF-8"><!-- 视口设置，响应式设计必备 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 页面描述（SEO重要元素） --><meta name="description" content="这里是网页的简要描述，约150-160字符"><!-- 关键词（现代SEO中重要性降低） --><meta name="keywords" content="关键词1, 关键词2, 关键词3"><!-- 作者信息 --><meta name="author" content="作者名"><!-- 告诉搜索引擎爬虫如何索引页面 --><meta name="robots" content="index, follow"> <!-- 可选项：noindex, nofollow --><!-- 控制IE浏览器渲染模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 社交媒体分享优化（Open Graph协议） --><meta property="og:title" content="页面标题"><meta property="og:type" content="website"><meta property="og:url" content="https://example.com/page"><meta property="og:image" content="https://example.com/image.jpg"><meta property="og:description" content="分享时显示的描述"><!-- Twitter卡片元数据 --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="页面标题"><meta name="twitter:description" content="Twitter分享描述"><meta name="twitter:image" content="https://example.com/image.jpg"><!-- 移动端主题颜色（Chrome/Android） --><meta name="theme-color" content="#ffffff"><!-- 禁止电话号码自动识别（移动端） --><meta name="format-detection" content="telephone=no"><!-- 禁止邮箱地址自动识别（移动端） --><meta name="format-detection" content="email=no"><!-- 禁止地址自动识别（移动端） --><meta name="format-detection" content="address=no"><!-- 禁止日期自动识别（移动端） --><meta name="format-detection" content="date=no"><!-- 其他可能用到的meta标签 --><meta name="generator" content="生成此页面的工具名称"><meta name="copyright" content="版权信息">
</head>
html 页面结构
<body><header><img/><h1>H1 Title</h1><nav></nav></header><main></main>
</body>
- header 元素将用于介绍页面，以及提供导航菜单。
- main 元素将包含页面的核心内容。
img 尺寸
img 当前是默认尺寸，这个尺寸太大。 CSS 提供了一个 max 函数，它返回一组由逗号分隔的值中最大的值。 例如：
img {width: max(250px, 25vw);
}
在以上示例中，如果视口宽度小于 1000 像素，图像的宽度将为 250px。 如果视口宽度大于 1000 像素，图像宽度将为 25vw。 这是因为 25vw 相当于视口宽度的 25%。
徽标应保持35/4的纵横比，并在文本周围添加填充。
img {width: max(10rem, 18vw);background-color: #0a0a23;aspect-ratio: 35/4; # 纵横比padding: 0.4rem;
}
h1 {font-size: min(5vw, 1.2em);font-family: Verdana, Tahoma;
}
子选择器 >
子组合子选择器>用于选择器之间，仅针对与第二个选择器匹配并且是第一个选择器的直接子元素的元素。
可以使用role属性向辅助技术指示页面上元素背后的目的。role属性是Web Accessibility Initiative（WAI）的一部分，接受预设值。
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz"><section role="region" aria-labelledby="html-questions"><h2 id="html-questions">HTML</h2></section><section role="region"></section><section role="region"></section>
</form>
a 锚点
a 元素的锚点给定，对应元素的id，写法如下：
<a href="#html-questions"></a>
input type="date"
仅屏幕阅读器可见
.sr-only（Screen Reader Only，仅屏幕阅读器可见）是一种常见的 CSS 类，用于创建仅对辅助技术（如屏幕阅读器）可见，但对普通视觉用户不可见的内容。它通常用于增强网页的可访问性（A11Y），例如为图标添加隐藏的文本描述，或为视觉元素提供额外的上下文信息。
.sr-only {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);clip-path: inset(50%);white-space: nowrap;
}
| 属性 | 作用 | 为什么需要？ |
|---|---|---|
| position: absolute; | 将元素脱离文档流 | 避免占据布局空间，防止影响其他元素的排列。 |
| width: 1px; height: 1px; | 设置极小尺寸 | 让元素在视觉上“消失”，但保留 DOM 存在。 |
| overflow: hidden; | 隐藏溢出内容 | 确保内容不会从极小尺寸的盒子中溢出。 |
| clip: rect(0, 0, 0, 0); | 裁剪到 0 大小 | 彻底裁剪内容，确保不可见（旧版浏览器支持）。 |
| clip-path: inset(50%); | 现代裁剪方式 | 更灵活的裁剪（兼容现代浏览器，作为 clip的补充）。 |
| white-space: nowrap; | 禁止文本换行 | 防止文本换行导致内容意外可见。 |
兼容性覆盖：
clip是旧版属性（已废弃，但部分旧浏览器仍支持）。
clip-path是现代替代方案（如 Firefox 需要它才能完全隐藏内容）。
防御性设计：多重属性确保在各种浏览器和缩放级别下内容均不可见，避免因渲染差异导致意外暴露。
<textarea rows='3' cols="50"></textarea>
本项目的两个最终语义HTML元素是页脚和地址元素。页脚元素是与页面相关内容集合的容器，而地址元素则是页面作者联系信息的容器。
li 元素的悬停设置
nav > ul > li:hover {background-color: #dfdfe2;color: #1b1b32;cursor: pointer;
}
小屏幕防止溢出
在小屏幕上，导航栏中的无序列表会溢出到屏幕右侧。
通过使用Flexbox来包含ul内容来解决此问题。然后，设置以下CSS属性以正确对齐文本：
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
.info label, .info input {display: inline-block;
}
这行 CSS 代码的作用是为 所有 HTML 元素（* 是通配符选择器）应用 scroll-behavior: smooth 属性，实现页面滚动时的平滑过渡效果（非瞬间跳转）.
让浏览器在滚动到某个位置时（如锚点跳转、JavaScript 触发的滚动），平滑过渡而不是瞬间跳转，提升用户体验。
* {scroll-behavior: smooth;
}
这段CSS代码的作用是为页面添加平滑滚动效果，但会优先考虑用户的无障碍偏好。
@media (prefers-reduced-motion: no-preference) {html {scroll-behavior: smooth;}
}
prefers-reduced-motion
这是一个CSS媒体查询，用于检测用户是否在系统设置中启用了“减少动画”选项（常见于无障碍需求）。 no-preference
表示用户未明确要求减少动效。
scroll-behavior: smooth 为所有元素（* 通配符）启用平滑滚动效果。 当用户点击锚点链接（如
#section）或调用 window.scrollTo() 时，页面会平滑滚动而非瞬间跳转。