含提交按钮的空表单是否具备可访问性？分步表单设计咨询

提交空表单跳转的潜在问题 #

• 语义混淆：提交按钮的原生语义是提交表单数据完成操作，但这里点击后仅做跳转，没有实际数据提交，会让依赖屏幕阅读器的用户困惑——他们预期提交按钮会触发数据处理，而非页面跳转。
• 无效交互干扰：空表单里的输入框（哪怕是空白的）会占用Tab键导航的步骤，用户用键盘操作时得跳过这些无用元素，降低操作效率；如果开启了HTML原生表单验证，空提交还会触发不必要的错误提示，增加用户负担。
• 不符合无障碍规范：这种设计违背了表单元素的预期用途，不符合Web内容无障碍指南中“语义正确”的原则。

更优方案：使用带明确标题的链接 #

用链接实现分段跳转，更贴合Web语义和无障碍标准：

• 语义清晰：链接的核心用途就是跳转，屏幕阅读器会明确告知用户这是一个跳转操作，不会产生误解。
• 操作效率更高：用户用Tab键导航时，能直接聚焦到链接，无需跳过无用的表单输入框，键盘操作更顺畅。
• 引导性更强：可以给链接设置精准文案，比如“继续填写个人信息”“进入下一步：联系方式”，让用户清楚点击后会进入哪个环节，比模糊的“提交”按钮更友好。

特殊场景的折中调整 #

如果出于设计需求必须保留信息展示区的按钮式交互，可做以下优化来提升可访问性：

• 用<button>元素替代表单提交按钮，通过JavaScript实现跳转，同时给按钮添加aria-label="跳转到表单下一步"属性，明确告知屏幕阅读器按钮的真实用途。
• 移除空表单内所有无用的输入框，避免干扰用户导航。

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