页脚必须用包裹链接，须为直接子元素且位于末尾，链接需满足点击热区≥44×44px、对比度≥4.5:1、显式:focus-visible样式，备案号须精准链接至miit.gov.cn并文字完整，版权年份推荐范围写法。
页脚链接必须用 <nav aria-label="页脚导航"></nav> 包裹
纯文本或 <p></p> 里堆“关于我们|联系我们”看似能用，但读屏器（如 NVDA、VoiceOver）会把它当普通段落读，不提示“这是导航”，键盘用户也无法用 Tab 快速进入/退出该区域。更糟的是，如果页面里有多个 <nav></nav>（比如主导航 + 社交链接），不加 aria-label，读屏器根本分不清哪个是页脚的。
常见错误：<nav><p>© 2026 公司</p></nav>——<nav></nav> 只能装跳转链接，版权信息塞进去就语义错乱。
- ✅ 正确结构：
<nav aria-label="页脚导航"><a href="/about">关于我们</a><a href="/contact">联系我们</a></nav> - ❌ 禁止混入：
<nav><a>…</a><p>© 2026</p></nav> - 多组链接（如“快速链接”“法律条款”）应各自独立用
<nav></nav>包裹，并配不同aria-label，例如aria-label="法律条款导航"
<footer></footer> 必须是
DOM 结构错位是页脚“不贴底”“JS 拿不到”“CSS 失效”的根源。浏览器虽会自动纠错，但 document.querySelector('footer') 可能返回 null，flex 布局也容易崩。尤其在单页应用中，路由切换后若没重挂 <footer></footer>，读屏器可能完全跳过它。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：
<header>…</header><main>…</main><footer>…</footer> - ❌ 错误写法：
<div class="wrapper"><footer>…</footer></div>（<footer></footer>不再是直接子元素） - 别用
<div role="contentinfo"> 冒充——它只是降级方案，语义权重远低于原生 <code><footer></footer>点击热区、颜色对比、焦点状态三者缺一不可
页脚链接常被当成“装饰性内容”忽略可访问细节，结果小屏点不到、色弱用户看不清、键盘用户找不到当前焦点。
- 最小点击热区 ≥ 44px × 44px：仅靠文字大小撑不够，必须加
padding: 0.5rem 0.75rem或等效尺寸 - 文字与背景对比度 ≥ 4.5:1：浅灰背景
#f5f5f5上用#666不合格；改用#333或加粗+提升字号 -
:focus-visible样式必须显式定义：很多项目重置了全局outline，却忘了给页脚链接单独补上，导致键盘用户失去视觉锚点 - 禁用纯图标链接（如仅一个 Twitter 图标）：至少加
aria-label="关注我们的 Twitter"，否则读屏器读不出用途
备案号和版权年份的可访问实现要点
国内网站的备案号不是摆设，它必须真实可点击、链接精准、文字完整；版权年份若靠 JS 更新，得确保无脚本时仍可读——这两点一旦出错，监管平台会直接标记“页脚信息不规范”。
- 备案号链接必须是
https://beian.miit.gov.cn，且文字完全一致（含空格、“号”字），不能加rel="nofollow" - 年份推荐写成范围形式：
<footer>© 2024–2026 MySite</footer>——两年内不用动，无 JS 依赖，爬虫可抓取 - 若必须用 JS 动态更新，执行时机要早于 DOM 渲染完成，且不能用
document.write()（会清空页面） - 备案号和版权信息建议分两个
<p></p>，不要挤在同一段落里，避免小屏换行断裂（如“京ICP备”和数字被拆到两行）
真正难的不是写出那几行 HTML，而是让每个链接有明确语义、每处文字有足够对比、每次点击有可靠反馈——这些细节在开发后期最容易被跳过，但恰恰是无障碍检测最先卡住的地方。
- 最小点击热区 ≥ 44px × 44px：仅靠文字大小撑不够，必须加
