“跳到主要内容”生效需四要素协同：跳过链接、匹配ID、tabindex="-1"、正确DOM位置；ID须语义化唯一且不嵌套，目标元素需可聚焦并避免遮挡CSS，跳过链接须为首个可聚焦元素且视觉隐藏但可访问。

标签本身不自动触发跳转，它只是语义容器；真正让“跳到主要内容”生效的，是一套配合机制：**跳过链接 + 正确 ID + tabindex="-1" + DOM 位置**。单靠

或单加链接，都不行。

跳过链接必须指向

的 ID

链接 href 值必须严格匹配

上的 id 属性，且带 # 号：

• ✅ 正确：<a href="#main">跳到主要内容</a> + <main id="main"></main>
• ❌ 错误：href="main"（被当成外部链接）、href=".main"（CSS 选择器，无效锚点）、href="#Main"（大小写不一致）
• ID 名称建议用语义化短名，如 main-content、primary，避免数字或随机字符串

必须唯一且位置正确

页面只能有一个

，且不能嵌套在

、

、

等语义容器内：

• ✅ 正确结构：<body><header>...</header><main id="main-content">...</main><footer>...</footer></body>
• ❌ 错误结构：<header><main>...</main></header>（W3C 明确禁止，读屏器可能忽略）
• 里只放当前页面独有的核心内容，比如文章正文、产品详情、表单主体，不包括全局导航、页脚版权

目标元素要能接收焦点

点击跳过链接后，浏览器需把焦点落到

上，但

默认不可聚焦：

• 必须添加 tabindex="-1"，例如：<main id="main-content" tabindex="-1">
• 不能用 tabindex="0"，否则会多出一个 Tab 停留点，干扰键盘导航顺序
• 不要给
  加 overflow: hidden、position: fixed 等会切断滚动流的 CSS

跳过链接本身的位置和样式很关键

它得是页面第一个可聚焦元素，视觉隐藏但对屏幕阅读器完全可见：

• 必须紧贴 <body> 开头，不能包在
  或任何组件里
• 推荐 CSS 隐藏方式：position: absolute; left: -9999px;，聚焦时恢复为 left: 1rem; top: 1rem;
• 禁用 display: none、visibility: hidden、aria-hidden="true"，这些会让链接彻底不可访问
• 聚焦时要有明显视觉反馈，比如高对比色块、清晰 outline 或 box-shadow