skip-link是键盘和屏幕阅读器用户的刚需入口，必须作为页面首个可聚焦元素置于后，用绝对定位隐藏并确保聚焦时可见、目标id真实唯一、语义结构完整。
跳过导航链接不是锦上添花的装饰，而是键盘用户和屏幕阅读器用户的刚需入口——没它，很多人得按 100+ 次 Tab 才能触达主内容。
skip-link 必须是页面第一个可聚焦元素
它得在 开头紧贴着放，不能嵌在 <header></header> 或 <nav></nav> 里，否则 Tab 顺序会跳过它。常见错误是把它塞进页眉组件或用 tabindex="-1" 锁死，结果键盘用户根本碰不到。
- 正确写法：
@#@#@#@#@#@#@#@#@#@0紧跟在后 - 目标 ID 必须真实存在且唯一，比如
<main id="main-content"></main>，不能只靠role="main" - 别用
aria-hidden="true"或display: none隐藏它，这两者会让读屏器完全忽略该链接
隐藏逻辑必须用 position + left 移出视口
视觉隐藏 ≠ 语义隐藏。很多团队误用 clip-path、transform: scale(0) 或 opacity: 0，这些在部分读屏器（如旧版 NVDA）中不触发重绘，焦点来了也不显示。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐方案：
.skip-link { position: absolute; left: -9999px; }—— 兼容性最稳 - 聚焦时恢复可见：
.skip-link:focus { left: 1rem; top: 1rem; }，别依赖top: 0，容易被固定头部遮挡 - 确保有足够对比度（至少 4.5:1）和可点击区域（
padding≥ 8px），否则键盘用户难以定位
href 锚点跳转失败的常见原因
点了 skip-link 却没滚动？大概率是目标元素不可聚焦或被 CSS 干扰了锚点行为。
-
<main id="main-content"></main>上不能加tabindex="-1"，否则跳转后焦点不会落在它身上 - 避免对目标元素设
overflow: hidden或position: fixed/absolute，这会切断浏览器原生锚点滚动流 - ID 大小写敏感：HTML 中写的是
id="main-content"，但href="#Main-Content"就失效 - 如果用 JS 动态渲染主内容区，确保
id="main-content"在 DOM 加载完成时已存在，否则跳转会静默失败
最容易被忽略的一点：skip-link 不是“加完就完事”的功能。它必须和 <nav></nav>、<main></main> 的语义结构配合使用——单独加个链接，但导航没包在 <nav></nav> 里，或主内容没用 <main></main> 标记，整体可访问性依然残缺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
