标签仅表示线性顺序，不传达推荐强度；需通过文案、ARIA或样式显式表达推荐逻辑，确保可理解、可验证、可访问。
ol 标签本身不表示“推荐强度”，只表达线性顺序
用 <ol></ol> 做商品推荐列表，核心误区是以为编号数字（1、2、3）天然代表“推荐优先级”。其实不然：<ol></ol> 仅声明项之间有明确先后关系，浏览器和辅助技术只读作“第一项、第二项……”，不隐含“第1个最值得买”这种业务语义。真要传达推荐强度，必须靠文案、样式或 ARIA 补充。
如何让 ol 列表真正体现推荐逻辑
关键不是改编号样式，而是让顺序本身可理解、可验证、可访问：
- 把推荐依据写进
<li>文本中，例如 “<li>销量最高（月销 2.4 万件）</li>”，而非只靠“1.”暗示 - 用
aria-label显式标注推荐理由：<li aria-label="首选推荐：综合评分 4.9，售后无忧">…</li> - 避免嵌套无关内容——比如在某个
<li>里塞完整商品卡片（含图片、价格、按钮），会破坏屏幕阅读器对“顺序项”的识别粒度；应保持每项聚焦一个推荐维度或一个主推商品 - 若需区分“主推”“备选”“补充款”，建议拆成多个
<ol></ol>并用<h3></h3>或<section></section>标明层级，而不是在一个<ol></ol>里混用start和reversed
type 和 start 属性的实用边界
type 和 start 只影响编号外观，不影响语义权重：
-
<ol type="A" start="2"></ol>渲染为 “B. C. D.”，但不会让 B 商品比 A 更重要——因为根本没 A - 用
type="I"（罗马数字）容易造成认知负担，普通用户难判断 “IV” 是第 4 还是第 6；电商场景慎用 - 如果推荐顺序可能动态变化（如按实时销量重排），别依赖
start手动调整；应由 JS 重排 DOM 节点，并触发aria-live提示更新
容易被忽略的可访问性断点
很多团队加了 <nav aria-label="热门推荐"><ol>…</ol></nav> 就以为完成，但实际问题常出在细节：
立即学习“前端免费学习笔记（深入）”；
- 当用 CSS 隐藏原生序号（
list-style: none）并改用图标或颜色强调“首位”时，必须同步提供aria-current="true"或role="application"上下文，否则屏幕阅读器仍只读“列表项 1 / 共 5 项” - 移动端双指滑动浏览
<ol></ol>时，若内部有<button></button>或<a></a>，需确保每个操作目标最小尺寸 ≥ 44×44px，否则触控失败率陡增 - 服务端渲染时若
<ol></ol>内容为空（如无商品可推），不要留空标签；应移除整个<ol></ol>或用aria-hidden="true"隐藏，并给父容器加说明文本
