如何通过建立HTML工程规范彻底解决按钮与链接混用导致的可访问性降低-html教程-PHP中文网

按钮和链接混用会直接损害可访问性，因屏幕阅读器将二者视为不同控件，错误嵌套或语义错位会导致播报矛盾、焦点异常及行为重复。

如何通过建立html工程规范彻底解决按钮与链接混用导致的可访问性降低

为什么按钮和链接混用会直接损害可访问性

屏幕阅读器会把 <button></button> 和 @#@#@#@#@#@#@#@#@#@0 —— 违反 W3C 嵌套规则，<button></button> 是交互式元素，不能作为 @#@#@#@#@#@#@#@#@#@1 —— 若未显式添加 role="link" 和 tabindex="0"，部分 AT 仍会将其误判为按钮

工程规范中必须落地的三项强制约定

不是建议，是上线前 CI 检查项：

所有跳转类操作统一用 <a></a>，并确保 href 值非空、协议完整（如 href="/page" 或 href="https://example.com"），禁止用 javascript:void(0) 或 #
所有表单提交类操作统一用 <button type="submit"></button>，禁止用 <input type="submit">（样式难控制）或 <button></button>（默认 type="submit" 易误触）
所有 JS 触发类操作（如弹窗、折叠、复制）必须用 <button type="button"></button>，且需配套 aria-label 或可见文本说明意图

CSS 布局与无障碍必须同步设计

视觉上并排的“提交”和“返回”按钮，结构上必须分离，但样式需一致：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

HTML 中保持语义隔离：

CSS 用 Flex 统一控制外观，不依赖内联样式：

.action-group {
  display: flex;
  gap: 12px;
}
.btn-link,
button[type="submit"] {
  padding: 8px 16px;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
/* 必须声明 focus 样式，否则键盘用户不可见 */
button:focus, .btn-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

真正容易被忽略的点是：即使视觉上两个按钮看起来一样，<a></a> 的 focus 样式必须独立定义，不能只靠继承；否则键盘用户 tab 到 <a></a> 时会丢失焦点指示。