由 dawei 2023年《互联网应用适老化及无障碍改造专项行动方案》升级实施，电商平台成为重点整改领域。其中，CSS作为前端视觉与交互的底层支撑，正从“美化页面”转向“服务所有人”，尤其在字体、对比度、动效和导航结构等维度承担关键角色。
字体大小与行高调整是基础一步。许多老年用户视力下降，固定像素值（如font-size: 12px）易导致阅读困难。改用相对单位rem或em，并配合系统字号设置响应式缩放；行高设为1.6以上，段间距增加，显著降低文字密度过高带来的疲劳感。
颜色对比度关乎信息可辨识性。新规要求文本与背景对比度不低于4.5:1（正常文本）。开发者需摒弃仅凭肉眼判断的习惯，借助工具验证——例如将#999灰字放在#f5f5f5浅灰背景上虽“看起来还行”，实测对比度仅2.1:1，必须强化至深灰或黑色。按钮悬停态与焦点轮廓也需保留足够视觉权重，避免因“简洁设计”牺牲可操作性。
AI生成内容图，仅供参考
动画与过渡效果须兼顾包容性。自动轮播图、快速淡入淡出常引发眩晕或迷失方向。CSS中启用prefers-reduced-motion媒体查询，一旦检测到用户系统开启“减少运动”，立即禁用非必要动画，或将transition时长延长至300ms以上，确保操作节奏可控。
导航结构的语义化与视觉分层同样重要。传统纯图标菜单缺乏文字说明，老年人难以理解；通过CSS配合ARIA属性实现图标+文字并显，并利用font-weight、border-left、阴影等样式强化当前页标识，帮助建立空间认知。面包屑、返回按钮位置稳定、尺寸充足，避免高频误触。
更深层的改造在于“弹性布局思维”。放弃绝对定位和固定宽度，多采用flex或grid配合min-width/max-width控制；表单控件高度统一、点击区域不小于44×44px；链接文字避免过短（如“点此”），CSS可结合::before伪元素补充辅助说明。这些并非妥协，而是让技术回归服务本质——界面不是越酷越好，而是越稳、越直觉、越不费力越好。
当一行CSS代码能同时撑起一位72岁用户的购物车结算，适老化就不再是合规任务，而成了数字平权最朴素的注脚。