用 ol + li 实现语义化数字导航最稳妥，浏览器自动编号且屏幕阅读器可识别；每个 li 内嵌 button，设 aria-current="true" 和 tabindex 控制焦点，样式需重置 padding、min-width 和 line-height 保证可点性与可读性，javascript 必须同时监听 click 和 keydown（enter/space），响应式下用视觉隐藏而非 aria-hidden 保障可访问性。
用 ol + li 实现语义化数字导航按钮
直接用 ol（有序列表）是最稳妥的做法，浏览器自动编号，屏幕阅读器能正确识别顺序和当前状态。别用 div + 手动写“1 2 3”，那样既不可访问，又难维护。
常见错误是把数字当纯文本塞进 span 或 button 里，结果失去语义、无法键盘聚焦、也不能被 aria-current 正确标记当前项。
-
ol的start属性可指定起始编号（比如start="0"），但多数场景保持默认从 1 开始更自然 - 每个
li内放一个button，而不是把button套在ol外——否则编号会丢失或错位 - 给当前激活的
button加aria-current="true"和disabled（或仅用 CSS 视觉区分），避免重复操作
按钮样式要兼顾点击热区与视觉清晰度
默认 button 在 ol 里会继承缩进和行高，容易挤在一起或太小。必须重置部分样式，否则移动端点不准、桌面端看起来像文字而非按钮。
关键不是“怎么好看”，而是“能不能点准”和“是否一眼看出当前在哪”。很多人只改背景色，却忘了 padding 和 min-width。
- 给
button设padding: 6px 12px（至少），避免窄按钮误触 - 加
min-width: 28px，确保单个数字不被压缩变形 - 用
line-height: 1配合vertical-align: middle对齐数字，别依赖默认基线 - 禁用
button的默认边框（border: none），用box-shadow或背景色做焦点反馈
JavaScript 绑定时别漏掉键盘支持
只监听 click 事件会让键盘用户（Tab + Enter）失效。实际中 20%+ 的桌面用户依赖键盘导航，尤其内容管理系统后台。
错误写法：btn.addEventListener('click', handler) —— 这样按空格/回车没反应。
- 统一监听
click和keydown，并在keydown中判断e.key === 'Enter' || e.key === ' ' - 触发前先
e.preventDefault()，防止空格导致页面滚动 - 切换激活态时，同步更新
aria-current和tabindex：当前项tabindex="0"，其他设为-1 - 不要用
onclick="handler()"行内绑定，不利于复用和测试
响应式断点下数字按钮的隐藏策略
图片多到需要横向滚动时，数字导航若还强行并排显示，会撑宽容器、引发横向滚动条，体验比省略号还差。
这时候不能简单 display: none，而应保留可访问性结构，仅视觉隐藏。
- 小屏用
display: flex横向滚动（overflow-x: auto），配合scroll-snap提升滑动体验 - 极窄屏（如 iPhone SE）可只显示当前项 + 左右各 1 个，其余用
visibility: hidden（保留占位）或clip-path裁剪 - 绝对不要用
aria-hidden="true"隐藏非当前按钮——这会让屏幕阅读器跳过整个导航 - 考虑用
data-index存储原始序号，方便服务端或 SSR 场景下还原逻辑
最易被忽略的是：数字标号和图片索引必须严格一致，哪怕某张图加载失败，标号也不能跳号——否则用户点“第 4 个”却看到第 5 张图，问题就出在数据映射层，不在 HTML 结构本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
