HTML5禁止button嵌套在a中，因二者均为交互元素导致语义冲突；浏览器自动纠错但屏幕阅读器仍会误读、焦点错乱；正确做法是用a包裹div/span并补全role和键盘支持。
按钮嵌套在里为什么会被屏幕阅读器报错
因为 HTML5 明确禁止将 <button> 嵌套在 <a> 中——两者都是交互式元素，语义冲突。浏览器会自动纠错（比如把 <a><button></button></a> 解析成两个独立节点），但屏幕阅读器仍可能读出“链接内含按钮”，或跳过其中一者，导致焦点顺序错乱、朗读重复、键盘导航中断。
- 实际现象：Tab 键跳过某个按钮、朗读两次“跳转到 GitHub”、
aria-label不生效 - 根本原因不是样式问题，而是 DOM 结构违反了 WAI-ARIA 实践指南中“避免嵌套可聚焦元素”的原则
- 即使视觉上正常，
role="link"加在<button>上也无效——按钮的默认role="button"优先级更高，无法覆盖
用模拟按钮并包裹才是合规写法
想让一个带样式的区域既像按钮又可跳转，正确路径是放弃 <button>，改用 <div> 或 <span> 作为容器，再用 <a> 包裹它，并显式声明角色和键盘行为。
- HTML 必须闭合完整：
<a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6"><div class="btn">关于我们</div></a>
- CSS 中给
.btn 加 cursor: pointer 和 tabindex="0"（如果 <div> 非直接子元素）
- 必须补全可访问性属性：
<a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6" role="link" aria-label="跳转到关于我们页面">
- 不要依赖
onclick + window.location 模拟跳转——这绕过了原生链接语义，对屏幕阅读器和搜索引擎都不友好
按钮需要 JS 跳转时怎么保持可访问性
当跳转逻辑复杂（如打开新窗口、带参数、需鉴权），必须用 <button> + onclick，但不能丢掉语义和键盘支持。
- 明确写
type="button"，防止表单内意外提交
- 用
aria-label 或 aria-labelledby 补充意图，例如：<button type="button" aria-label="在新窗口打开 GitHub 仓库" onclick="window.open('https://github.com/xxx', '_blank')">GitHub</button>
- 若跳转目标是外部 URL，加
rel="noopener noreferrer"（虽对按钮无效，但习惯性保留可避免误用）
- 别用
accesskey——它在主流浏览器中已基本失效，且与系统快捷键高频冲突，反而降低可用性
Flex gap 是唯一安全的按钮间距方案
按钮之间出现“空白可点击”或“焦点跳跃异常”，90% 源于用 margin 或换行空格制造间隙。这些空白属于文本节点，会被屏幕阅读器识别为可聚焦内容，且在键盘导航中产生多余 Tab 停留点。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：父容器设
display: flex + gap: 8px，gap 生成的是布局间隙，不参与任何可聚焦树
- 绝对禁用：
font-size: 0 技巧、white-space: nowrap 强制连排、负 margin 重叠——这些都会破坏焦点顺序和缩放适配
- 验证方式：用键盘 Tab 导航，看是否只停在按钮上，空白区域完全跳过
实际项目中最容易被忽略的，是把“视觉像按钮”等同于“可访问性达标”。按钮外观靠 CSS，但可访问性靠结构、属性和事件逻辑三者咬合——缺一不可。
想让一个带样式的区域既像按钮又可跳转，正确路径是放弃 <button>，改用 <div> 或 <span> 作为容器，再用 <a> 包裹它，并显式声明角色和键盘行为。
- HTML 必须闭合完整：
<a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6"><div class="btn">关于我们</div></a> - CSS 中给
.btn加cursor: pointer和tabindex="0"（如果<div>非直接子元素） - 必须补全可访问性属性：
<a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6" role="link" aria-label="跳转到关于我们页面"> - 不要依赖
onclick+window.location模拟跳转——这绕过了原生链接语义，对屏幕阅读器和搜索引擎都不友好
按钮需要 JS 跳转时怎么保持可访问性
当跳转逻辑复杂（如打开新窗口、带参数、需鉴权），必须用 <button> + onclick，但不能丢掉语义和键盘支持。
- 明确写
type="button"，防止表单内意外提交 - 用
aria-label或aria-labelledby补充意图，例如：<button type="button" aria-label="在新窗口打开 GitHub 仓库" onclick="window.open('https://github.com/xxx', '_blank')">GitHub</button> - 若跳转目标是外部 URL，加
rel="noopener noreferrer"（虽对按钮无效，但习惯性保留可避免误用） - 别用
accesskey——它在主流浏览器中已基本失效，且与系统快捷键高频冲突，反而降低可用性
Flex gap 是唯一安全的按钮间距方案
按钮之间出现“空白可点击”或“焦点跳跃异常”，90% 源于用 margin 或换行空格制造间隙。这些空白属于文本节点，会被屏幕阅读器识别为可聚焦内容，且在键盘导航中产生多余 Tab 停留点。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：父容器设
display: flex+gap: 8px，gap生成的是布局间隙，不参与任何可聚焦树 - 绝对禁用：
font-size: 0技巧、white-space: nowrap强制连排、负margin重叠——这些都会破坏焦点顺序和缩放适配 - 验证方式：用键盘 Tab 导航，看是否只停在按钮上，空白区域完全跳过
