需先完成语义化HTML提示：用<aside>包裹，内含动词文案如“需先完成”+有效链接；多课程用role="list"结构；禁用CSS生成关键文字；按钮禁用时明确说明原因。
HTML里怎么写“需先完成XX课程”的提示文字
直接用语义化标签 + 简单样式控制，别套模板、别加 JS。核心是让用户一眼看懂依赖关系，同时让屏幕阅读器能读出逻辑。
- 用
<aside>或<section>包裹提示块，比<div>更准确——它表示“与主内容相关但可独立理解的补充信息” - 提示文案必须包含动词，比如“需先完成”“建议先学习”，避免只写“先修：XX”这种模糊表达
- 如果课程名是链接，
<a>必须指向对应课程页，不能是#或空href，否则对键盘用户和读屏器不友好
为什么不能只靠 CSS 添加“先修”标识
CSS 的 ::before 或 content 生成的内容无法被读屏器识别，也不能被搜索引擎索引。用户复制整段文字时，“需先完成”这几个字会直接消失。
- 错误写法：
<span class="prereq">Course-101</span>+ CSS 添加“需先完成”文字 - 正确写法：
<span>需先完成 <a href="/course/101">Course-101</a></span> - 如果要强调状态（如用户尚未完成），再加一个
aria-label，例如：<span aria-label="先修课程：Course-101，当前未完成">需先完成 Course-101</span>
遇到“多个先修课程”怎么标
别堆成一长串逗号分隔的文字。并列关系要清晰，且保留每个课程的可操作性（比如单独跳转、单独标记完成状态）。
- 用
<ul>不合法（你只能用允许的 HTML 标签），改用带role="list"的<div>，每个项用<div role="listitem"> - 示例结构：
<div role="list"><div role="listitem">需先完成 <a href="/c1">Intro to Python</a></div><div role="listitem">需先完成 <a href="/c2">Web Basics</a></div></div> - 如果后端能判断用户是否已完成某门课，给对应
<a>加aria-current="false"或加 class 控制样式，比全靠前端 JS 判断更可靠
容易被忽略的无障碍细节
很多团队加了提示却没考虑键盘焦点流和语义顺序，导致用户 Tab 到这里时卡住，或读屏器跳过关键约束。
立即学习“前端免费学习笔记（深入）”；
- 先修提示块不要放在课程标题之后、简介之前这种“逻辑断层”位置；理想位置是紧贴在“立即报名”或“开始学习”按钮上方
- 如果该课程当前不可进入（因先修未完成），按钮应设为
disabled，同时<button>内容明确说明原因，例如：<button disabled>请先完成 Course-101</button> - 避免用颜色唯一表达状态，比如仅靠红色文字表示“未满足先修”。加图标（✅ / ⚠️）或文字前缀更稳妥
