页脚导航必须用footer包裹nav实现语义化结构，nav需添加唯一aria-label属性，链接须带真实href，当前页用aria-current="page"标记，html结构应始终完整且按用户心智模型排序。
底部链接栏不是“随便放几个 a 就完事”的区域，它直接影响 SEO 权重分发、辅助技术可访问性、移动端点击体验，以及爬虫能否抓取关键页面。直接用 div 套链接，等于放弃语义、丢掉无障碍支持、弱化搜索引擎对站点结构的理解。
必须用 footer + nav 组合，不能只用一个标签
常见错误是只写 <footer>@#@#@#@#@#@#@#@#@#@0</footer> —— 这会让屏幕阅读器把整个页脚当成一块“文本容器”，无法识别其中的导航意图。
-
footer是容器语义：表示页面/区段的结尾，适合放版权、联系方式、备案号等非导航内容 -
nav是功能语义：专指“一组导航链接”，必须包裹所有跳转类链接（如“隐私政策”“用户协议”“加入我们”） - 如果页脚里既有版权信息又有多个功能链接，正确结构是：
<footer><nav aria-label="页脚导航"><ul>...</ul></nav><p>© 2026 公司名称</p></footer>
aria-label 不是可选装饰，是读屏软件定位依据
当页面存在多个 nav（比如顶部主导航 + 页脚导航），不加 aria-label，屏幕阅读器会统称它们为“导航”，用户无法区分哪个是页脚里的快捷入口。
- 值必须具体且唯一，例如：
aria-label="页脚快速链接"或aria-label="法律与支持" - 避免模糊表述，如
aria-label="链接"或aria-label="底部"—— 对键盘用户毫无意义 - 服务端渲染时应动态注入该属性；前端路由切换后，也要同步更新（尤其 SPA 应用）
链接必须带真实 href，禁用 href="#" 或空值
很多开发者为了“先占位再加逻辑”，写 @#@#@#@#@#@#@#@#@#@1，这会导致三个实际问题：键盘 Tab 焦点卡死、爬虫跳过该链接、读屏软件报“无效目标”。
- 即使暂未上线，也应指向一个真实路径（如
/contact）或使用mailto:/tel:协议 - JavaScript 控制跳转时，优先用事件监听，而非覆盖
href行为；保留语义锚点更健壮 - 当前页链接要用
aria-current="page"标记，而不是仅靠 CSS 类；否则自动化测试工具会报无障碍失败
响应式折叠时，HTML 结构不能被 JS 动态销毁
移动端常把页脚链接收进“更多”下拉菜单，但很多人用 JS 在 DOM 中增删 ul，导致首屏无链接、SEO 抓不到、JS 失效后导航彻底消失。
- HTML 必须始终包含完整链接结构，哪怕在小屏下默认隐藏
- 用
display: none或max-height: 0+overflow: hidden控制显隐，而非innerHTML = "" - 切换按钮必须是
<button></button>，并绑定aria-expanded和aria-controls属性
最易被忽略的是：页脚导航的链接顺序应该按用户心智模型排列，不是按后台菜单顺序。比如“隐私政策”“用户协议”“Cookie 设置”这类法律项要前置，“微信公众号”“抖音号”等社交入口靠后——这不是样式问题，而是信息架构问题，影响用户信任感和合规风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
