SEO 百科

无障碍

本页目录

无障碍

无障碍 是让能力受限的人也能使用网站，为此有一整套做法，包括语义化的 HTML、键盘可用的控件、足够的颜色对比等[1]。做 SEO 的人关心它，因为让辅助技术读懂页面的那些改动，同时也让搜索引擎更容易读懂页面。

无障碍覆盖的对象

W3C 把无障碍定义为把网站、工具和技术设计得让残障人士也能使用[2]。受益的人不只有残障用户，还包括老年人、临时受伤的人、在强光下看屏幕的人。

因此无障碍与通用可用性高度重叠。一份对轮椅用户友好的页面，通常对用手机单手操作的人也友好。

对机器理解页面的帮助

语义化标签、alt 文字、lang 属性，本来都是无障碍要求，同时也成了搜索引擎理解页面的线索。

W3C 指出，图片的替代文本“可供无法看到图片的技术使用，例如搜索引擎”[2]。一份无障碍做得好的页面，结构与文本都更规范，机器读得更准。

常见做法

  • 语义化 HTML：用 <nav>、<main>、<h1> 这类元素说明结构；
  • ARIA：给动态控件补充角色与名称，注意 aria-* 只加语义，不会改变行为；
  • 键盘可达：所有功能都能用键盘操作，焦点要看得见；
  • 颜色对比：正文与背景的对比度要达到 AA 的门槛，普通文字至少 4.5 比 1，大号文字至少 3 比 1[3]。

现状与代价

WebAIM 在 2026 年调查了 100 万个首页，95.9% 存在可检测的 WCAG 失败[5]。最常见的三类是低对比度文字（83.9%）、图片缺替代文本（53.1%）、表单控件缺标签（51%）。

同为第三方统计，Web Almanac 的 2025 年报告显示，移动端只有约 31% 的站点达到最低颜色对比要求[6]。

国内也有对应的规范。工信部要求网站参照《互联网网站适老化通用设计规范》等文件改造，并由中国互联网协会负责评测[4]。

与抓取和收录的关系

无障碍本身不直接决定收录，但它用的语义与文本规范，与爬虫的理解方式重合。

图片替代文本、链接文字、标题层级这几项，两边都要用对。同一处改动，既帮了屏幕阅读器，也帮了爬虫。

常见误用

  • 给本来就有语义的元素再加 aria-label，反而制造噪音。
  • 只为应付自动化检测改分数，忽略真实可用性。
  • 用图片做按钮，又不给替代文本。
  • 用颜色单独表达状态，看颜色的人之外读不出区别。

附录

参见

参考资料

官方（境外）

  1. 《无障碍》，MDN Web 文档，2025-03-22 更新。
  2. 《Introduction to Web Accessibility》，W3C Web Accessibility Initiative，2026-02-03 更新。
  3. 《Web Content Accessibility Guidelines (WCAG) 2.2》，W3C，2024-12-12。

官方（国内）

  1. 《互联网网站适老化通用设计规范》，工业和信息化部，2021-04-06。

第三方

  1. 《The WebAIM Million》，WebAIM，2026-02。
  2. 《Accessibility》，HTTP Archive《Web Almanac》，2026-01-15。

外部链接

无。