必须用<nav>+<ol>+，禁用<button>和<ul>；当前页不能有href，且须同时带class="active"和aria-current="page"。因页码严格有序，<ol>明确表达顺序语义，屏幕阅读器读作“第1项、第2项”，而<ul>被视作无序，丢失导航意图；<div>或<span>拼凑则无法被辅助技术识别为分页。
必须用 <nav> + <ol> + <a>，禁用 <button> 和 <ul>；当前页不能有 href，且必须同时带 class="active" 和 aria-current="page"。
为什么必须用 <ol> 而不是 <ul>
页码是严格有序的（1→2→3→…→N），<ol> 明确表达这种顺序语义，屏幕阅读器会读作“第1项，第2项”，而 <ul> 会被当作无序列表，丢失导航意图。键盘 Tab 焦点也会按 DOM 顺序自然流转，不会跳乱。若用 <div> 或一堆 <span> 拼凑，辅助技术根本识别不出这是“分页”。
常见错误：
- 用
<ul class="pagination">—— Bootstrap 默认结构不等于正确语义 - 把所有页码都塞进一个
<li>里，比如<li>1 2 3 4</li>—— 这等于只提供一个焦点项，无法逐页操作 - 省略
<nav>外层包裹 —— 辅助工具无法将该区域识别为独立导航区
当前页怎么标记才真正可访问
只加 class="active" 不够，CSS 类只是视觉提示，对屏幕阅读器无效。必须同步设置 aria-current="page"，且该 <li> 内部的 <a> 必须移除 href 属性（或设为 href="" 并配合 aria-disabled="true"）。否则用户按回车会刷新页面或跳转到自身 URL，破坏状态一致性。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
<nav aria-label="页码导航">
<ol>
<li><a href="/page/1.html">1</a></li>
<li><a href="/page/2.html">2</a></li>
<li class="active" aria-current="page">3</li>
<li><a href="/page/4.html">4</a></li>
</ol>
</nav>
关键点：
-
<li>上加class="active"和aria-current="page" - 当前页的
<a>必须不存在，或被移除（不能留空href="#"） - 上一页/下一页链接应带
rel="prev"/rel="next"，利于搜索引擎理解内容序列
禁用状态（如首页点“上一页”）该怎么处理
仅靠 CSS 灰掉文字或加 opacity: 0.5 完全没用——键盘用户仍能聚焦、按空格/回车触发，屏幕阅读器也感知不到“已禁用”。正确做法是：移除 href，加 aria-disabled="true"，并确保该 <a> 不再响应点击事件。
错误写法：<a href="#" class="disabled">上一页</a>（href="#" 导致跳顶，class="disabled" 无语义）
正确写法：<a href="" aria-disabled="true" tabindex="-1">上一页</a>
注意：
- 不要用
disabled属性——HTML 规范不支持它在<a>上生效 -
tabindex="-1"防止键盘聚焦，但保留鼠标可点击（如果后续 JS 启用，可再改） - 若整个
<li>禁用，应在<li>上加aria-disabled="true"，而非只作用于内部链接
移动端和键盘导航容易忽略的细节
小屏下页码横向溢出时，别急着加 JS 折叠逻辑。纯 CSS 媒体查询就能解决：用 flex-direction: column + align-items: flex-start 把页码转为垂直排列，保持语义和焦点顺序不变。键盘用户按 Tab 依然能线性遍历，不会漏项或跳错。
另外，<nav> 必须带 aria-label，值不能是空或泛泛的“导航”，得明确写成 aria-label="页码导航" 或 aria-label="文章列表分页"。否则屏幕阅读器只会说“导航”，用户不知道这是干啥的。
最后提醒：所有路径必须用绝对路径（如 /blog/page/3.html）或配 <base href="/subpath/">，相对路径在子目录页点击必然 404——这不是可访问性问题，是基础路径逻辑错误，但常被混为一谈。
