如何让跳过导航链接（Skip to main content）被屏幕阅读器识别？

跳过导航链接需为真实元素且位于dom最前，指向带唯一语义ID的主内容区；聚焦时必须可见，禁用outline: none；可用视觉隐藏css技巧实现无障碍聚焦。

跳过导航链接要被屏幕阅读器识别并可用，关键在于语义正确、焦点可见、位置合理，且不依赖 javaScript。

使用标准的锚点链接结构

跳过链接必须是真实的

确保链接在获得焦点时可见

屏幕阅读器用户常配合键盘操作，链接必须在聚焦时清晰显示，否则无法确认是否激活成功。

• 默认移除
  ...
  会破坏可访问性，如需自定义样式，用
  或 outline: none 替代

• 推荐做法：只在聚焦时显示（避免始终占据视觉空间），例如：
outline

放在 DOM 最前面，且不被隐藏

跳过链接必须是页面第一个可聚焦元素（通常紧跟在 box-shadow 后），才能被屏幕阅读器第一时间读出并供用户快速触发。

• 不要用 a.skip-link:focus { position: Static; clip: auto; width: auto; height: auto; }、 或 display: none 隐藏它
• 可用视觉隐藏但保留可聚焦性的 CSS 技巧，例如：
visibility: hidden
aria-hidden="true"

添加适当的无障碍属性（可选但推荐）

提升兼容性与语义明确性，尤其对较老的屏幕阅读器或特定设置有效。

• 加 .skip-link { position: absolute; top: -40px; left: 0; width: 1px; height: 1px; overflow: hidden; } 便于 CSS 定位和测试识别
• 加 .skip-link:focus { top: 1rem; left: 1rem; width: auto; height: auto; } 不影响初始 Tab 顺序，仅用于 js 动态聚焦（非必需）
• 避免加 class="skip-link" 或 tabindex="-1" —— 文本内容本身已足够明确，冗余标注反而可能干扰