使用带有效href的锚点标签打开模态框是否符合无障碍规范？

你这套实现方案完全合理，且满足无障碍合规要求，相比原来嵌套form的触发方案鲁棒性更强，对各类用户都更友好。

• 原生语义层面没有硬伤：带有效href属性的<a>标签本身就是原生可聚焦、可通过键盘触发的交互元素，不需要额外添加tabindex、手动绑定Enter/空格键盘响应事件这类为了补无障碍做的额外逻辑，不会出现div/span模拟控件常见的键盘无法操作、辅助技术识别错误的问题。很多开发者有个误区，觉得触发模态框必须用<button>元素，实际上只要有可正常访问的降级跳转路径，锚点标签完全符合交互语义，尤其在你这种需要拉取独立服务端内容的场景下，比没有原生降级能力的button更适配多元的用户需求。
• 渐进增强逻辑完全符合WCAG无障碍标准：你设计的降级逻辑覆盖了所有异常场景——JS运行失效、用户主动选择新标签页打开链接时，用户依然能访问到精简版的目标内容，不会出现点击无响应、功能完全不可用的问题，既照顾了禁用JS、低带宽、使用屏幕阅读器的用户，也满足了习惯开新标签页浏览内容的用户需求，是无障碍设计里明确推荐的容错思路。
• 从根源上规避了原有方案的隐性问题：原来把触发按钮包在嵌套form里的实现本身就违反HTML规范，部分屏幕阅读器会错误解析嵌套表单的控件结构，反而会给辅助技术用户造成操作困扰，新方案完全避开了这个限制，布局灵活度高的同时也没有合规风险。

不要觉得加了有效href就万事大吉，触发模态框的交互逻辑还要补几个必备的无障碍处理：

• 给触发弹窗的锚点加aria-haspopup="dialog"属性，提前告知辅助技术用户点击这个链接会弹出模态对话框，不是普通的页面跳转。
• 模态框正常弹出后，第一时间把页面焦点移动到模态框容器内，同时给模态框加上role="dialog"、aria-modal="true"属性，明确告知辅助技术当前弹窗是模态状态，背景内容暂时不可交互。
• 模态框关闭时，必须把焦点交回原来触发弹窗的锚点元素，不要让焦点丢失在页面背景里，不然键盘导航用户会完全不知道自己当前在页面的哪个位置。
• 拦截锚点默认跳转的event.preventDefault()逻辑，要放在AJAX请求正常发起、模态框可以正常渲染的判断分支里，不要一进点击事件就直接阻止默认行为，避免JS报错时用户点链接完全没反应。
• 不要为了美观去掉锚点的默认聚焦轮廓，如果要自定义聚焦样式，也要保证聚焦态有足够高的颜色对比度，让键盘用户能清晰看到当前选中的元素。

内容的提问来源于stack exchange，提问作者lobati