应使用系统级媒体查询替代手动适老模式开关，优先落地prefers-reduced-motion等原生特性，并确保表单语义、字体热区、HTML结构及模板片段符合无障碍规范。
用系统级偏好媒体查询替代手动适老模式开关
直接写 prefers-reduced-motion、prefers-contrast 和 color-scheme 媒体查询，比维护一套 JS 切换逻辑更可靠。中老年用户常在操作系统里开启“高对比度”或“减少动画”，浏览器会原生读取这些设置——不用等页面加载完再 JS 检测，也避免 localStorage 同步失败导致的样式错乱。
常见坑点：
-
prefers-contrast: high在 Safari 中需加-webkit-前缀才生效，不加就失效 -
prefers-reduced-motion兼容性最好（Chrome 84+、Firefox 97+、Safari 15.4+），建议优先落地 - 别把所有动画设为
none，而是用animation-duration: 0.01ms，保留关键过渡帧防止布局跳变
表单控件必须显式绑定 <label>，不能靠视觉对齐
中老年用户视力下降、操作精度降低，仅靠 CSS 把文字放在输入框旁边，屏幕阅读器完全无法关联两者。聚焦 <input> 时，听不到这是“手机号”还是“验证码”，极易填错或放弃。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
for属性绑定：<label for="phone">手机号</label><input id="phone" type="tel"> - 或嵌套写法：
<label>验证码<input type="text"></label> - 所有
<input>必须有required或明确提示（如 placeholder="6位数字"），避免空提交后无反馈
字体与点击热区不能只靠 rem 或 zoom
设 html { font-size: 18px } 或 zoom: 1.2 会导致按钮、SVG 图标、表格边框比例失真，部分安卓 WebView 还会直接忽略 zoom。
更稳妥的控制方式：
- 正文用
clamp(1rem, 4vw, 1.5rem)，小屏保可读、大屏防溢出 - 按钮、输入框等交互元素单独设
min-height: 44px+padding，确保点击热区 ≥ 44×44px - 禁用
user-scalable=no的<meta>，iOS Safari 会自动忽略它，但其他 WebView 可能强制锁死缩放 - 图标统一用内联
<svg>或<img height="20">，避免background-image缩放模糊
<main> 必须唯一且不能嵌套在 <header> 或 <nav> 里
很多老旧系统把整个页面包在 <div id="main"> 里，然后在里面塞 <header> 和 <nav>。这违反 HTML5 硬性语义规则，导致屏幕阅读器无法准确定位主体内容，中老年用户用语音导航时容易迷失。
重构时注意：
-
<main>只能出现一次，且必须是顶级元素（同级于<header>、<nav>、<footer>） - 旧 CSS 若依赖
#main .title定位，得先抽离<main>再重写定位逻辑，不能硬套 class - 所有入口页（如
index.html、home.html）优先改，它们被爬虫和用户首访，语义错误影响最大
最易被忽略的是模板片段（如 header.inc）——改一处影响全局，但修复收益也最高。别看修改时间戳，三年没动过的 footer.html 可能正包裹着全站 <script>，一旦语义崩塌就是 JS 阻塞。
