html5禁止button嵌套在a中，因二者均为交互元素导致语义冲突；浏览器自动纠错但屏幕阅读器仍会误读、焦点错乱；正确做法是用a包裹div/span并补全role和键盘支持。

按钮嵌套在里为什么会被屏幕阅读器报错

因为 HTML5 明确禁止将 <button></button> 嵌套在 <a></a> 中——两者都是交互式元素，语义冲突。浏览器会自动纠错（比如把 <a><button></button></a> 解析成两个独立节点），但屏幕阅读器仍可能读出“链接内含按钮”，或跳过其中一者，导致焦点顺序错乱、朗读重复、键盘导航中断。

• 实际现象：Tab 键跳过某个按钮、朗读两次“跳转到 GitHub”、aria-label 不生效
• 根本原因不是样式问题，而是 DOM 结构违反了 WAI-ARIA 实践指南中“避免嵌套可聚焦元素”的原则
• 即使视觉上正常，role="link" 加在 <button></button> 上也无效——按钮的默认 role="button" 优先级更高，无法覆盖

用

模拟按钮并包裹才是合规写法

想让一个带样式的区域既像按钮又可跳转，正确路径是放弃 <button></button>，改用 <div> 或 <code><span></span> 作为容器，再用 <a></a> 包裹它，并显式声明角色和键盘行为。

• HTML 必须闭合完整：<a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6"><div class="btn">关于我们</div></a>
• CSS 中给 .btn 加 cursor: pointer 和 tabindex="0"（如果 <div> 非直接子元素） <li>必须补全可访问性属性：<code><a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6" role="link" aria-label="跳转到关于我们页面"></a>
• 不要依赖 onclick + window.location 模拟跳转——这绕过了原生链接语义，对屏幕阅读器和搜索引擎都不友好

按钮需要 JS 跳转时怎么保持可访问性

当跳转逻辑复杂（如打开新窗口、带参数、需鉴权），必须用 <button></button> + onclick，但不能丢掉语义和键盘支持。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 明确写 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，但可访问性靠结构、属性和事件逻辑三者咬合——缺一不可。