必须用语义化标签实现可访问的专家预约入口：按钮用<button type="button">或<a href>，禁用onclick内联事件，添加aria-label；避免误用<input type="submit">；弹窗需role="dialog"、aria-modal="true"并管理焦点；注意移动端触控区与iOS延迟问题。
怎么用 <button> 实现可访问的专家预约入口
纯视觉按钮（比如只靠 div + CSS）没法被键盘 Tab 切入，屏幕阅读器也读不出来——这不是“能点就行”，而是合规和可用性的底线。
必须用语义化标签起步：
-
<button type="button">预约专家</button>是最安全的起点；如果跳转到预约页，改用<a href="/booking">预约专家</a> - 别写
onclick行内事件，统一用 JS 绑定：避免内联脚本污染结构，也方便后续加埋点或拦截逻辑 - 加上
aria-label（如aria-label="预约呼吸科张医生"）能让语音助手读出上下文，尤其当按钮文字是“立即预约”这种泛化文案时
表单类预约入口为什么不能只靠 <input type="submit">
很多人一想到“提交预约”就本能写 <input type="submit">，但它天生绑定父 <form>，而多数专家预约入口其实是跳转或弹窗，不是立刻发请求。
常见翻车现场：
立即学习“前端免费学习笔记（深入）”；
- 没包
<form>却用input[type=submit]→ 点击无反应，控制台可能报错"submit is not a function" - 包了
<form>但没设action或onsubmit→ 页面刷新或跳about:blank - 移动端点击区域小，
input默认样式难调整，不如button容易控制padding和min-width
弹窗式预约入口的 DOM 结构要点
如果点击后弹出预约表单（非跳转），DOM 层级和属性要经得起检验：
- 触发按钮需有
data-modal-target="#booking-modal"这类明确关联，别靠 JS 里写死querySelector('#modal') - 弹窗容器必须带
role="dialog"、aria-modal="true"，且初始状态display: none或hidden，不能只靠opacity: 0 - 打开后焦点必须手动移到弹窗内第一个可交互元素（如
document.querySelector('#booking-modal input').focus()），否则键盘用户卡在背景页
移动端点击失效或延迟的典型原因
在 iOS Safari 或部分安卓 WebView 里，“点不动”大概率不是 JS 错了，而是底层交互被拦了：
- 父容器写了
touch-action: none或pointer-events: none→ 检查上层轮播图、地图容器的 CSS - 按钮用了
display: inline且内容只有文字 → 加min-height: 44px（iOS 最小触控区）和line-height对齐 - JS 里用了
preventDefault()但没判isTrusted→ 真实点击会被误杀，模拟点击（如测试用的click()）反而生效
复杂点往往藏在组合场景里：比如弹窗按钮同时要兼容键盘导航、屏幕阅读器、微信内置浏览器、以及老版本 iOS 的 300ms 延迟——这些不是“加个库就能好”，得一层层验 DOM、事件流和 CSS 渲染树。
