长表单让屏幕阅读器用户“迷路”是因为缺乏语义结构，需用fieldset/legend分组、aria-current标记步骤、aria-invalid+aria-describedby精准报错，并确保自定义下拉实现combobox语义。

长表单为什么会让屏幕阅读器用户“迷路”

因为屏幕阅读器默认按DOM顺序线性朗读，没有结构锚点的长表单，用户会听到一连串、、

，根本分不清哪段是“收货信息”，哪段是“发票信息”，更找不到“提交按钮”在哪。这不是语速问题，是语义缺失——就像在没路标的高速公路上开车。

用fieldset和legend切分逻辑区块

别用div加CSS标题模拟分组，屏幕阅读器完全无视它。必须用fieldset包裹一组相关控件，并把标题作为legend（且必须是fieldset的第一个子元素）。

• legend内容要具体，比如“配送地址”比“地址”更明确，“开票信息（如需发票请填写）”比“发票”更友好
• 嵌套fieldset时，每个都必须有独立legend，不能复用父级文本
• 单个控件（如一个“是否开具电子发票”的开关）不需要fieldset，加了反而增加冗余播报
• 避免legend里塞太多操作按钮或复杂HTML，它会被完整朗读，干扰主信息

让屏幕阅读器知道“现在在哪”：用aria-current="step"标记进度

多步骤表单（如注册三步流程）光靠视觉进度条没用。必须给当前活跃步骤的容器加aria-current="step"，并配合aria-label说明位置。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 不要只写aria-current="true"——它不被所有读屏软件识别，必须用step、page或location
• 示例：<div role="region" aria-labelledby="step2-label" aria-current="step"> <h2 id="step2-label">第二步：验证手机号</h2>...</div>
• role="region"能让用户用快捷键跳转到该区域，比单纯靠aria-current更可靠
• 切换步骤时，必须同步更新aria-current和焦点——否则用户卡在上一步，键盘Tab也进不去新区域

错误提示必须能被“立刻听见”，且定位精准

提交后弹个红色Toast、页面顶部滚动显示错误摘要，对键盘/读屏用户毫无意义。他们需要错误信息实时播报，并自动聚焦到第一个出错字段。

• 每个输入框校验失败时，设aria-invalid="true"，并通过aria-describedby指向唯一ID的错误文案
• 错误文案容器必须加aria-live="polite"，且不能display: none——要用visually-hidden类隐藏视觉但保留读屏可读
• JavaScript提交失败后，调用element.focus()聚焦第一个aria-invalid="true"的输入框，别指望浏览器自动处理
• 避免把所有错误堆在form顶部再用aria-describedby关联整个表单——读屏会从头开始读，用户得等十几秒才能听到自己错在哪

最常被忽略的是：长表单里混用原生select和自定义下拉组件时，后者若没手动实现role="combobox"、aria-expanded和键盘导航（ArrowDown/Enter），屏幕阅读器就会把它当成普通div跳过——用户根本不知道这个“下拉框”能点、能输、能选，直接卡死。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！