四个最基础的修复点
图片要写 alt。这不只是给读屏软件用的，图片加载失败时 alt 会显示出来，搜索引擎也靠它理解图片内容。装饰性图片可以写空 alt，让读屏软件跳过，但不要干脆不写。
表单控件要有关联的标签。每个输入框配一个 label，用 for 属性绑定到输入框的 id。只写占位文字是不够的，占位文字在输入后消失，读屏软件也读不到稳定信息。
标题层级要按顺序用。页面里先有一级标题，再二级、三级，别跳级也别为了字号乱用。读屏用户靠标题层级快速跳转，层级乱了等于导航坏了。
文字和背景的对比度要够。浅灰字配白底是最常见的可读性杀手，尤其在小字号下。用对比度检查工具测一下，正文至少达到常规可读水平。
内容层面的可读性
句子别太长。长句对所有人都是负担，对有阅读障碍的人更是。一段控制在三四行，一句话控制在能一口气读完的长度。
链接文字要能说明去哪。别用点这里、更多这种写法，读屏软件会把链接文字单独念出来，脱离上下文就完全不知道指向哪里。写成查看全部 AI 工具这种。
少用纯图片承载信息。一张图里写着活动规则，读屏用户完全拿不到。要么在 alt 里写清楚，要么在图片下方补一段文字说明。
字号和行高别抠。正文至少十六像素，行高留够，字间距不要挤。这些是所有人都会受益的改动，不只是无障碍。
导航站这种结构的特殊点
导航站的核心是大量卡片和链接。卡片如果全用 div 加点击事件实现，键盘用户根本进不去，读屏软件也识别不出这是链接。用真正的链接标签，或者至少加角色和键盘支持。
列表要有语义。站点列表用列表标签包起来，读屏软件会念出这是第几项、共几项，用户心里有数。一堆 div 堆出来的列表，读屏里就是一串没有结构的文字。
焦点样式要可见。很多人为了好看把焦点框去掉了，结果键盘用户不知道现在选中了哪个链接。删掉默认样式可以，但要给一个清楚的替代。
图标按钮要有可读的名字。纯图标的收藏、分享按钮，读屏软件只会念出一个空按钮或者乱码属性值，要加可读文本或者隐藏的文字标签。
自查与长期维护
先用工具扫一遍。浏览器自带的检查面板里有无障碍检测，Lighthouse 也能跑。工具能发现大部分结构性问题，比如缺 alt、对比度不足、标签没关联。
工具扫不出的靠人工。开一次键盘，只用 Tab 键走一遍全站，能不能走到每个可点的地方、焦点看不看得见。这一遍走下来问题会暴露得很直接。
再开一次读屏。手机和电脑都有自带的读屏功能，打开听五分钟，你会发现很多平时完全意识不到的问题。
把检查放进流程。新模板上线前跑一遍工具，新功能开发时顺手加标签。一次性整改完，之后新增内容又退化，等于没做。
为什么值得做
无障碍的用户不只是视障人群。临时受伤、光线太强看不清、用键盘的老手、网络慢导致图片加载不出的人，都会从这些改动里受益。它是通用设计，不是特殊照顾。
对站点自身也有好处。语义清晰的页面，搜索引擎更容易理解；结构规范的模板，后期维护和改版成本更低。这些改动看起来是为少数人做的，实际收益是全面的。
对比度和字号的具体做法
正文文字和背景的对比不要太低。浅灰配白底在设计师的显示器上看着高级，在用户的手机屏幕上就是一片糊。正文宁可用深一点的灰，别为了所谓的高级感牺牲可读性。
辅助文字可以浅，但不要浅到看不见。时间、作者、阅读数这类信息，颜色可以比正文浅一档，但依然要能轻松读出来，不要做成装饰。
字号在移动端尤其注意。很多模板把正文设成十四像素，加上行高不够，看两段眼睛就累。正文十六像素起步，这是现在的通行做法。
还有一个细节：不要用小字号加浅色同时出现在一个元素上。这两个因素叠加，可读性会断崖式下降，是最典型的反面例子。
常见误区
以为无障碍就是给盲人做的。实际上受益最大的是普通用户：光线不好、屏幕反光、临时手抖、赶时间扫一眼的人，都在其中。
以为做了自动检查就完事。工具只能查结构，查不出语义是否清楚、文案是否有歧义、操作是否顺手。工具扫完还要人走一遍。
以为一次性整改就能长期有效。新模板、新功能、新内容一直在加，不把检查做进流程，三个月后又会退化回去。
从哪儿开始最划算
如果时间只够做一件事，先补 alt 和表单标签。这两项工作量小、覆盖面广，几乎所有页面的图片和表单都能受益。
如果还有时间，做焦点可见和键盘可走。这一个改动能让整站的键盘操作从不可用变成可用，投入产出比很高。
剩下的细节可以随着改版慢慢补。无障碍不是一次到位的项目，是持续维护的习惯。每次动某个页面，顺手把它弄好一点，一年下来整站就都过关了。
