快捷跳转链接必须同时满足「可点击」「可聚焦」「可键盘触发」三个条件，否则对键盘用户或屏幕阅读器使用者不可用；单纯加accesskey或只写href都不够，因accesskey存在浏览器兼容性、冲突及无提示等问题，而href="#"会破坏历史栈且滚动生硬，正确做法是使用语义化锚点（如href="#top"）配合scroll-behavior: smooth，并确保目标元素可聚焦。
直接说结论：快捷跳转链接必须同时满足「可点击」「可聚焦」「可键盘触发」三个条件，否则对键盘用户或屏幕阅读器使用者就是不可用的。单纯加 accesskey 或只写 href 都不够。
为什么 accesskey 基本不能单独用
它看起来是“快捷键”，但实际落地时问题一堆：浏览器组合键不统一（Windows 是 Alt+S，Mac 是 Ctrl+Option+S），容易和系统快捷键冲突（比如 accesskey="f" 和 Firefox 的地址栏焦点冲突），而且用户根本不知道你设了什么键——页面上没提示，title 也不显示，等于白设。
- 真正可用的做法是：把
accesskey当作辅助手段，同时提供可见的、语义清晰的链接或按钮 - 必须给带
accesskey的元素加上title属性，例如<button accesskey="s" title="搜索（快捷键：Alt+S）">搜索</button> - 避免使用数字或标点作
accesskey值，优先选单字母，且避开浏览器保留键（如e、r、f在多数浏览器中已被占用）
href="#" 跳转到顶部的坑怎么避
很多人写 @#@#@#@#@#@#@#@#@#@0，点一下页面跳到顶，但实际会触发 URL 变成 example.com/#，破坏浏览器历史栈，按返回键可能卡住或跳错位置；更严重的是，它默认会触发 scrollTo(0, 0)，但没做平滑滚动，体验生硬。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法是绑定
id="top"到页面最顶端的元素（比如<header id="top"></header>），然后链接写成@#@#@#@#@#@#@#@#@#@1 - 如果需要平滑效果，加一行 CSS：
html { scroll-behavior: smooth; }，比 JS 更轻量、更可靠 - 千万别用
javascript:void(0)或空href，那会让键盘用户无法聚焦、屏幕阅读器读不出目的
跳转链接必须支持键盘操作的实操要点
快捷跳转不是“能点就行”，而是要让 Tab 键能依次到达、Enter/Space 能触发、焦点状态有视觉反馈——这是 WCAG 2.1 的硬性要求。
- 所有跳转目标（
a、button）必须是天然可聚焦的，避免用div+onclick模拟链接 - 给链接加
tabindex="0"是多余操作，a[href]和button默认就可聚焦；只有非交互元素才需手动加 - 用 CSS 显式定义
:focus-visible样式，别依赖浏览器默认轮廓线（有些 OS 会关掉） - 如果跳转后目标区域没有明确焦点，比如锚点跳转到
<section id="contact"></section>，建议在 JS 中补一句document.getElementById("contact").focus()，并给该元素加tabindex="-1"
相对路径跳转失效的常见原因
本地测试时好好的，一放服务器就 404，大概率是路径写错了。HTML 不像 Node.js 有模块解析规则，它纯看文件系统结构。
-
href="about.html"表示“同目录下”；href="pages/about.html"表示“子目录 pages 下”；href="../index.html"表示“上级目录” - 绝对路径从根开始写，用
/开头，比如href="/assets/css/style.css"，但注意：这个/指的是网站根目录，不是项目文件夹根目录 - 部署到子路径（如
https://example.com/myapp/）时，相对路径仍以当前 HTML 文件位置为基准，不是以域名后缀为基准 - 检查浏览器开发者工具的 Network 标签页，看跳转请求发出去的 URL 是什么，比猜更准
最容易被忽略的点：快捷跳转不是“快就行”，而是“任何人在任何设备、任何输入方式下都能一致触发”。一个没设 tabindex 的图片链接、一个没加 title 的 accesskey、一段没处理焦点的锚点跳转，都会让部分用户彻底失去访问能力——而这往往在开发阶段完全测不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
