ol是制作问卷步骤列表最合理、最符合语义的html元素，因其天然表达线性有序流程，对屏幕阅读器友好；每个li应封装一个逻辑完整的步骤（而非单个问题），并通过css重置序号视觉但保留语义，js控制显隐时需用class切换配合aria-hidden与tabindex管理可访问性。
ol 本身不带“步骤”语义，但它是制作问卷步骤列表最合理、最符合语义的 HTML 元素——前提是正确使用 li 结构和 CSS 控制视觉层级，而不是依赖 type 属性硬编码序号。
为什么不用 ul 或 div 套数字？
问卷步骤本质是线性、不可跳过的流程，有明确先后顺序。ol 天然表达这种「有序序列」，对屏幕阅读器友好，且浏览器默认渲染为 1. 2. 3.，语义清晰。用 ul 加手动编号（如 <li>1. 基本信息</li>）会丢失结构信息；用 div 更是彻底放弃语义，影响可访问性和 SEO。
常见错误现象：ol 里嵌套了 form 或多个 fieldset 却没把每个步骤封装成独立 li，导致步骤边界模糊，JS 控制显隐时逻辑混乱。
ol 中每个 li 应该只包裹一个完整步骤
一个步骤 ≠ 一个问题，而是一组逻辑关联的表单控件集合。比如「基本信息」步骤应包含姓名、年龄、性别等字段，统一放在一个 li 内，而不是每个 input 单独占一个 li。
- ✅ 正确：
-
基本信息
- ❌ 错误：
- （这会让步骤变成“填一个字段就走一步”，体验断裂）
- ⚠️ 注意：
li内可以合法包含form、fieldset、legend等块级元素，无需担心嵌套违规
隐藏默认序号但保留语义，靠 CSS 重置 ol
很多设计稿要求步骤用圆点、图标或进度条展示，而非 1. 2. 3.。此时不能删掉 ol 改用 div，而应通过 CSS 移除默认计数并自定义视觉：
示例 CSS：
ol.steps {
counter-reset: step;
list-style: none;
padding: 0;
}
ol.steps li {
position: relative;
padding-left: 40px;
}
ol.steps li::before {
content: counter(step);
counter-increment: step;
position: absolute;
left: 0;
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
background: #007bff;
color: white;
border-radius: 50%;
font-size: 14px;
}
关键点：
– list-style: none 关闭默认序号
– counter-reset + counter-increment 保证语义序号仍在（辅助技术可读）
– ::before 仅控制视觉，不影响 DOM 结构
JS 控制步骤显隐时，别直接操作 li 的 display
用 JS 切换步骤时，如果简单设置 li.style.display = 'none'，会导致该步骤完全从渲染流中移除，焦点管理、表单验证、键盘导航都会出问题。
推荐做法：
- 给当前激活步骤加
class="step-active"，其余步骤加class="step-hidden" - 用 CSS 控制可见性：
.step-hidden { opacity: 0; visibility: hidden; position: absolute; }（保留占位与可访问性） - 配合
aria-hidden="true"和tabindex="-1"管理焦点流 - 切勿在
ol上用innerHTML动态拼接步骤——破坏语义和状态同步
最容易被忽略的是：当用户用键盘 Tab 导航时，隐藏步骤里的 input 仍可能被聚焦。必须同步控制 tabindex 和 aria-hidden，否则无障碍体验直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
