无障碍的几项基础改动,顺带也有利于检索
无障碍常被当成额外成本。本文列出几项成本很低的改动,它们同时改善了机器对页面的理解,因此对检索和 AI 引用也有帮助。
- 无障碍要求的多数内容,本质是让页面结构可被程序理解,抓取器也是程序。
- 用标题标签表达层级而非字号,加粗段落充当标题会让结构变成一片平文本。
- 替代文本要描述图片传达的信息,装饰性图片应留空以便跳过。
- 占位符不能替代标签,它在输入后消失,用户会忘记该字段是什么。
- 不要仅用颜色传达状态,应同时提供文字或图标。
无障碍在企业站项目里常被当作可选项,理由是「我们的用户里没有视障人士」。这个判断通常不准确,而且忽略了一点:无障碍要求的很多东西,本质是让页面结构可被程序理解 —— 而搜索引擎和 AI 抓取器正是程序。
标题层级要有结构
用标题标签表达层级关系,而不是用字号。一个页面一个一级标题,二级标题划分主要章节,不要为了视觉效果跳级。屏幕阅读器靠这个结构让用户快速浏览,抓取器也靠它理解页面的组织方式。
常见问题是整页用加粗的段落充当标题 —— 看起来一样,结构上却是一片平的文本,两类程序都读不出层次。
图片替代文本写内容而不是文件名
替代文本应当描述图片传达的信息。产品图写出产品名与关键特征,图表写出它说明的结论,纯装饰性的图片则应当留空以便被跳过。写成「图片1」或文件名,对任何一方都没有价值。
表单标签要和输入框关联
每个输入框都要有显式关联的标签,而不是只在占位符里写提示 —— 占位符在输入后就消失了,用户填到一半忘记这个框是什么。错误提示也要与对应字段关联,并用文字说明具体问题,不能只靠变红。
对比度与键盘可达
- 正文与背景的对比度要达到可读标准,浅灰字配白底是最常见的不达标情况;
- 所有交互元素都要能用键盘操作,且焦点状态可见。只靠鼠标悬停才出现的菜单对键盘用户不可用;
- 不要仅用颜色传达信息,例如只用红绿区分状态,应同时有文字或图标。
为什么它对检索也有帮助
语义化的结构让抓取器能正确划分章节、识别哪部分是主要内容;替代文本让图片承载的信息可被读取;清晰的表单结构减少解析歧义。这些并不是为了取悦机器而做的额外工作,它们和给人读的改进是同一件事。
完整要求可以参考 W3C 的无障碍指南,但不必一次做到全部。先把上面几项纳入开发规范,新页面默认满足,存量页面随改版逐步补齐。我们在企业官网定制里把这几项列入验收检查,具体流程见合作流程。
常见问题
无障碍改造成本高吗?
基础几项成本很低:标题层级、图片替代文本、表单标签关联、对比度和键盘可达,多数在开发阶段按规范写就不会产生额外工作量。真正费时的是存量页面的补齐,建议随改版逐步进行而不是单独立项。
无障碍对 SEO 有帮助吗?
有间接帮助。语义化结构让抓取器正确识别章节与主要内容,替代文本让图片信息可被读取,清晰的表单结构减少解析歧义。这些改动同时服务于人和程序,不是为搜索引擎额外做的工作。
必须完全符合 WCAG 吗?
不必一次做到全部。可行的路径是把基础几项写进开发规范,保证新页面默认满足,存量页面随改版补齐。完整合规通常适用于有明确法规或招标要求的场景,届时需要专门的评估与整改。
参考资料
- Web Content Accessibility Guidelines (WCAG) 2.2 · W3C
- SEO Starter Guide: The Basics · Google Search Central