用 +/ 表示“完成全部课程”最贴切，写条件（如“课程进度”），放状态并设 data-status 属性，配合 aria-live 和 css 属性选择器实现语义化、可访问、易维护的动态提示。
HTML里怎么用语义化标签表示“完成全部课程”条件
直接用 <dl></dl> + <dt></dt>/<dd></dd> 是最贴切的——它天然适合描述「条件-结果」关系，比用 <div> 堆砌更利于屏幕阅读器识别，也方便后续用 CSS 或 JS 精准控制提示状态。
<p>常见错误是套用 <code><ul></ul> 或 <ol></ol>：课程完成不是列表项的简单罗列，而是一个逻辑判断结果（“全部完成”才触发证书发放），语义错位会导致无障碍体验下降，也增加 JS 判断负担。
-
<dt></dt>写条件（如“课程进度”），<dd></dd>放实时状态（如“12/12 已完成”） - 给
<dd></dd>加data-status="complete"属性，JS 可直接监听该属性变化来启用证书按钮 - 避免把“完成全部课程”写成纯文本提示，否则无法被自动化工具识别为可交互条件节点
如何让“完成全部课程”提示动态响应学习进度
关键不在 HTML 结构本身，而在它和 JS 的协作方式。HTML 只负责声明「这里有个完成条件」，JS 负责更新它的状态值和视觉反馈。
典型陷阱是把进度判断逻辑硬编码进 HTML（比如用 style="display:none" 控制显示），这会让维护变得脆弱——一旦后端返回字段名变更（如 completed_count → finished_modules），前端就得同步改两处。
- 保持 HTML 静态：只写结构，不写初始状态（如不要预设
<dd>已完成</dd>） - JS 获取用户实际进度后，统一调用
document.querySelector('dd[data-status]').dataset.status = 'complete' - CSS 用属性选择器控制样式：
dd[data-status="complete"]::after { content: "✅"; }，比 class 切换更直观对应数据源
证书获取条件提示容易被忽略的兼容性细节
移动端小屏下，“完成全部课程”提示如果紧贴按钮或折叠在展开区域里，用户可能根本看不到。这不是 HTML 写法问题，而是它嵌入上下文时的布局风险。
更隐蔽的问题是：当页面用 display: none 隐藏未完成状态的提示时，部分读屏软件会直接跳过该节点，导致视障用户无法感知“还差几步才能领证”。
- 用
visibility: hidden或opacity: 0替代display: none隐藏未达成提示，保证 DOM 存在且可访问 - 给
<dd></dd>加aria-live="polite"，进度更新时自动播报（如“课程已全部完成，可领取证书”） - 避免把提示放在
<details></details>或手风琴组件内部——这类交互容器默认不渲染内容，JS 更新可能失效
为什么不用
<progress></progress> 表示任务进行中，<meter></meter> 表示标量范围内的值（如磁盘使用率）。但“完成全部课程”是个布尔型终态条件，不是过程或比例度量。
强行套用会误导辅助技术：读屏软件会把 <progress value="12" max="12"></progress> 读作“进度100%”，而非“满足证书领取条件”，语义偏差直接影响用户决策。
- 若需同时展示进度条 + 终态提示，应分开两个元素：
<progress></progress>专注可视化进度，<dd></dd>专注条件声明 - 不要给
<progress></progress>加aria-label="已完成全部课程"—— 这属于用 ARIA 掩盖语义错误，审查工具会报 warning - 服务端返回的完成状态字段最好是布尔值（
"cert_eligible": true），而非数字（"completed_count": 12），减少前端二次判断
/api/user/progress 接口取 cert_eligible 字段）比任何 HTML 技巧都重要。
