网站无障碍这件事，过去被认为是"公益项目"，现在有了法律依据。无障碍环境建设法实施后，公共服务类网站有明确要求，企业官网虽然不全是强制对象，但一旦有老年用户投诉，处理起来并不轻松。
更现实的原因是用户结构。四十岁以上用户占比逐年上升，视力下降、操作不熟练是普遍情况。字号小、对比度低、按钮太密，这批人直接用不了。
四类最常见的障碍
1. 对比度不足
浅灰字配白底，在设计稿上很高级，在阳光下就是一片模糊。正文文字与背景的对比度至少要达到 4.5:1，大字号（18px 以上加粗，或 24px 以上）可以放宽到 3:1。
检查方法很土但有效：把页面截图转成灰度，还能不能看清。看不清就是对比度不够。
2. 字号和行高
正文建议不小于 16px，行高 1.6 到 1.8。老年用户偏好的字号更大，可以做一个"大字模式"开关，把根字号提到 18px，全站用 rem 的地方会一起变大。
3. 只能鼠标操作
下拉菜单鼠标移上去才展开，弹窗只能点右上角的叉，表单只能鼠标点选。用键盘 Tab 键走一遍，看焦点能不能到达每个可操作元素，有没有明显的焦点框。很多站做完这一步就会发现，导航的第二级根本进不去。
4. 图片和图标没有替代文本
读屏软件读到没有 alt 的图片，会念出文件名或者直接跳过。装饰性图片可以 alt=""，有信息量的图片必须写清内容。图标按钮尤其要注意，"搜索"按钮如果没有文字，读屏只会念"按钮"。
改造清单：先做这八项
- 正文对比度提到 4.5:1 以上，去掉浅灰小字。
- 正文字号不低于 16px，行高不低于 1.6。
- 所有图片补 alt，装饰图用空 alt。
- 所有图标按钮补 aria-label。
- 下拉菜单支持键盘和点击展开，不只靠 hover。
- 焦点样式可见，不要全局 outline:none。
- 表单 label 与输入框关联，错误提示用文字说明而不只是红框。
- 视频提供字幕，动效提供暂停。
这八项覆盖了实际使用中八成的障碍，改动集中在 CSS 和模板，工作量通常在两到三天。
适老化可以再加三件事
一是放大字体开关，位置固定在页头，状态用 Cookie 记住。二是简化导航，老年用户不擅长多级菜单，重要入口尽量放在一级。三是把电话放大，老年用户更习惯打电话，号码要大、要能直接点按拨号。
怎么验收
三个办法组合用。第一，键盘走查：只用 Tab、Enter、Esc，能不能完成"找产品—看详情—提交咨询"这条主路径。第二，读屏走查：用 NVDA（Windows）或 VoiceOver（Mac）听一遍首页，看信息是否可理解。第三，灰度模式：切灰度看对比度，切 200% 缩放看布局是否错乱。
改造从哪里开始最划算
如果预算只够做一件事，先改对比度和字号。这两项覆盖的用户最多，改动也最小——调 CSS 变量就能完成，不需要动模板结构。第二步补 alt 和 aria-label，工作量集中在模板，一次改完全站生效。第三步才做键盘导航和焦点样式，这部分要逐个组件测，最费时间。
不建议一上来就买无障碍插件。市面上的悬浮工具大多只做字体放大和对比度切换，解决不了语义化问题，还会往页面里塞一个几十 KB 的脚本，拖慢首屏。真正有效的改造在模板层，工具替代不了。
常见问题
会不会影响设计效果
会有一点，但没有想象中大。提高对比度、放大字号、增加留白，本身也是提升可读性的设计手法。真正冲突的是"为了高级感用浅灰小字"，这种设计对所有人都不友好。
有没有必要做无障碍声明
做了改造建议加一个说明页，写清改造范围、反馈渠道和更新时间。既是态度，也是遇到投诉时的说明材料。
小程序也要做吗
同样适用。小程序的字体缩放、对比度、可点击区域大小，标准与网页一致。可点击区域建议不小于 44×44 像素。
无障碍改造和 SEO 有很多重叠：语义化标签、alt 文本、清晰的标题层级，两边都受益。标题层级怎么写，见文章结构模板。
