锚点链接跳转后屏幕阅读器读不到目标内容，因焦点未落到目标元素上；需为目标加tabindex="-1"或用javascript调用focus()，链接本身用aria-label说明意图，避免在目标上滥用aria。
锚点链接能跳转，但屏幕阅读器可能完全读不到目标内容——这不是 bug，是语义缺失导致的可访问性断裂。
锚点跳转后焦点没落到目标元素上
用户点击 #skills 链接，页面滚动到位，但键盘 Tab 仍从顶部开始，屏幕阅读器也继续朗读上一节。根本原因是：浏览器默认不把焦点移到 id="skills" 元素，除非它本身是可聚焦元素（如 button、a、带 tabindex 的元素）。
- 给目标容器加
tabindex="-1"，例如<section id="skills" tabindex="-1"></section>，跳转后焦点会落在该节点，屏幕阅读器随之朗读 - 不要用
tabindex="0"，否则它会混入自然 Tab 顺序，干扰键盘导航流 - 配合 JavaScript 在跳转后主动
.focus()，更可靠（尤其在 SPA 中 hash 变化不触发原生行为时）
aria-labelledby 和 aria-label 不该套在锚点目标上
有人为“提升可访问性”，给 <h2 id="experience">工作经历</h2> 加 aria-label="跳转到工作经历章节"，这反而会让屏幕阅读器重复播报两次：“工作经历” + “跳转到工作经历章节”，造成冗余和混淆。
- 锚点目标本身应保持语义纯净：用
h2就是标题，用section就是区域，不需要额外 ARIA 描述其“被跳转”的动作 - 真正要加 ARIA 的是链接本身：
@#@#@#@#@#@#@#@#@#@0，明确告知用户点击后的意图 - 若目标是纯视觉分隔（如空
<div id="contact"></div>），必须配tabindex="-1"+aria-hidden="true"或改用语义化元素（如<main></main>、<aside></aside>）
单页应用中 hashchange 事件与路由劫持冲突
Vue/React 项目里，点击 #projects 链接，URL 变了，但页面没滚动——因为前端路由拦截了默认行为，却没手动触发滚动或焦点管理。
- 监听
hashchange事件，提取location.hash（如"#projects"），再用document.querySelector(hash)?.scrollIntoView({ behavior: 'smooth' }) - 紧接着调用
document.querySelector(hash)?.focus()，确保焦点跟上 - 注意兼容性：IE 不支持
scrollIntoView({ behavior: 'smooth' })，需降级为scrollIntoView()或用 polyfill - 如果目标元素在异步加载的内容里（如 tab 切换后才渲染），得等 DOM 真实挂载后再执行 scroll/focus
最常被忽略的一点：锚点可访问性不是“加上 ARIA 就完事”，而是整条链路——链接声明意图、跳转触发行为、目标承载语义、焦点准确落位——缺一不可。少一个环节，对屏幕阅读器用户来说，就等于页面突然“断层”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
