separator · 分隔线
分隔线有两种，必须分清：装饰性的只分开内容块， 语义性的分开不同的东西。对辅助技术的意义完全不同。
装饰性
基本信息
这条线只分开内容块，读屏不需要播报
装饰性（紧凑档）
上一块
间距更小，用在同组内部
语义性（带文字）
这条线分开的是不同性质的设置，读屏应当播报
两侧都画线
两档颜色的实测差别
本库实测（vs --surface，WCAG 1.4.11 非文字对比要 ≥ 3:1）：
--border-decor 浅 1.26 · 暗 1.23 → < 3
--border-control 浅 3.42 · 暗 4.34 → ✅ ≥ 3
差 2.7 倍。装饰性用 --border-decor ——
1.4.11 不适用于它（不承担语义）。语义性用 --border-control ——
它是读屏用户唯一能看到的线索，视觉上必须够明显。
反例
反例：语义分隔用装饰色
基本信息
高级设置
分隔"基本信息"与"高级设置"——这是两类不同的东西，
但如果用 --border-decor（1.26:1），
低视力用户与暗色显示下几乎看不见这条线，
而读屏只会念"分隔符"、不会解释两边是什么。
⇒ 该线是唯一线索时，必须用达标的档。
❌ div + border-bottom
基本信息
高级设置
线画得一模一样 —— 连颜色都对齐了。但读屏走到这里是 两段独立的文字，中间什么都没有： 它不知道这两段被分成了一组。
✅ hr（或 role="separator"）
基本信息
高级设置
同一条线，读屏会念「分隔符」。0 个 <hr> 与 1 个，
就是"看得见"和"念得出"的全部差别。