如何仅用XHTML和CSS修正文档末尾导航的正确Tab顺序

关于Tab顺序的猜测是否正确？ #

完全正确。浏览器的默认Tab跳转顺序严格遵循HTML文档的DOM流顺序，和CSS设置的视觉位置无关。只要你的<nav>元素在HTML结构的末尾，里面的导航链接就会在所有位于它之前的可聚焦元素（比如内容区域的链接、按钮）之后被Tab到，处于Tab顺序的最后。

能否用tabindex解决Tab顺序问题？ #

可以，但要注意遵循无障碍最佳实践，避免反向破坏体验：

• 禁止使用大于0的tabindex值：这类值会强制让元素的Tab优先级高于所有默认可聚焦元素（链接、按钮等默认tabindex="0"的元素），打乱用户预期的逻辑顺序，同时会干扰屏幕阅读器的正常交互。
• 推荐的兼容方案：
  1. 若想保持当前DOM结构（nav在末尾），同时让导航链接的Tab顺序符合视觉逻辑，最稳妥的方式是添加一个视觉隐藏的跳转链接：

     <!-- 放在HTML最开头 -->
     <a href="#nav-first-link" class="visually-hidden">跳转到导航</a>
     <!-- 导航的第一个链接加上id -->
     <nav>
       <a id="nav-first-link" href="/">首页</a>
       <!-- 其他导航链接 -->
     </nav>
     

     对应的视觉隐藏CSS：

     .visually-hidden {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       border: 0;
     }
     

     这个链接会作为第一个可聚焦元素，用户Tab到它后按回车就能直接跳转到导航的第一个链接，既不影响视觉，又解决了Tab顺序问题，同时兼容所有现有可聚焦元素。
  2. 如果一定要用tabindex，只能给导航链接依次设置tabindex="1"、tabindex="2"……但这种方式不推荐，因为会破坏自然的Tab顺序逻辑，对依赖键盘导航的用户不友好。

内容的提问来源于stack exchange，提问作者Cecil Ward