页脚链接必须用<nav aria-label="页脚导航">包裹真实跳转链接，禁用纯文本、版权信息或伪链接；多列布局推荐CSS Grid，需确保点击热区≥44px、颜色对比度≥4.5:1并定义:focus-visible样式。
页脚里的链接区不是随便堆几个 <a> 就完事的，它得有语义、可访问、能响应，否则在屏幕阅读器里读不出来，小屏上点不到，SEO 也收不到信号。
页脚链接必须用 <nav> 包裹
很多人直接写：<p><a href="/about">关于我们</a> | <a href="/contact">联系我们</a></p>。这看着能用，但问题一堆：搜索引擎不识别这是导航，NVDA 等读屏软件会把它当普通段落读，跳过“导航区块”提示；而且无法通过键盘 Tab 快速进入/退出该区域。
- ✅ 正确写法：
<nav aria-label="页脚导航"><a href="/about">关于我们</a><a href="/contact">联系我们</a></nav> -
aria-label是必须加的——因为页脚里可能有多个<nav>（比如一个主导航、一个社交媒体导航），不加 label，读屏器分不清哪个是哪个 - 不要把版权信息塞进
<nav>里：<nav><p>© 2026 公司</p></nav>是错的，<nav>只装跳转链接
多列链接布局用 flex 还是 grid？
桌面端想并排三列“快速链接”“法律条款”“产品支持”，移动端要垂直堆叠——flex 和 grid 都能做，但选错会影响维护性和语义清晰度。
- 推荐用
display: grid：grid-template-columns: repeat(3, 1fr)+@media (max-width: 768px)改成1fr，结构更直观，列数变化时不用重写 flex 方向和换行逻辑 - 如果用
flex，必须加flex-wrap: wrap，否则小屏下链接会溢出或横向滚动——很多人漏掉这一句，导致移动端链接被切掉 - 别用
float或inline-block做多列：它们对空白符敏感，容易产生意外间隙，且无法真正控制列高对齐
链接文字和样式常见踩坑点
页脚链接看着简单，但点击热区、颜色对比、焦点状态稍一疏忽，就变成无障碍缺陷。
立即学习“前端免费学习笔记（深入）”；
- 最小点击区域至少
44px × 44px：给<a>加padding: 0.5rem 0.75rem，别只靠文字大小撑空间 - 文字颜色对比度必须 ≥ 4.5:1：深灰文字 (#666) 在浅灰背景 (#f5f5f5) 上不合格，用 #333 或加粗提升可读性
- 必须定义
:focus-visible样式：默认浏览器焦点框在页脚里常被 CSS 重置掉，导致键盘用户找不到当前焦点位置 - 避免纯图标链接（如仅一个 Twitter 图标）：没文字，读屏器读不出用途；至少加
aria-label="关注我们的 Twitter"
动态年份链接要不要用 JavaScript？
版权年份写成 <p>© <span id="year" ><>，然后用 JS 填充，听着很酷，但没必要，还可能出错。</span>
- 服务端渲染（PHP/Node/Jinja）直接输出当前年份最稳，无 JS 依赖，SEO 友好
- 如果真要用 JS，别写
document.getElementById('year').innerText = new Date().getFullYear()—— 页面未加载完成就执行会报错；加个DOMContentLoaded包裹 - 静态站点生成器（如 Hugo、Jekyll）用内置变量
{{ now.Year }}或{{ 'now' | date: '%Y' }}更干净 - 注意：年份本身不是链接，别误包进
<a>里，否则语义混乱、爬虫误判
页脚链接区最难的不是写几行 HTML，而是让每个链接都经得起键盘操作、读屏验证、小屏点击和 Lighthouse 审计——这些细节不补全，再漂亮的布局也是半成品。
