Web 可访问性键盘导航（Accessibility Keyboard Navigation）

1. 键盘导航的基本概念：指用户仅使用键盘（通常是Tab、Shift+Tab、方向键、Enter和空格键）与网页交互的能力。这是视力障碍用户、运动障碍用户及部分效率型用户的刚需，也是WCAG 2.1 AA级合规的核心要求。

2. 焦点指示器（Focus Indicator）的视觉设计：

   • 浏览器默认焦点样式（如Chrome的蓝色轮廓线）可通过CSS的:focus伪类自定义
   • 需确保焦点指示器与背景颜色对比度至少达到3:1，且尺寸大于等于2px
   • 示例代码：

     button:focus {
       outline: 2px solid #005fcc;
       outline-offset: 2px;
     }
     

3. 文档流顺序与DOM顺序的一致性：

   • 使用CSS浮动/定位可能导致视觉顺序与代码顺序脱节
   • 应通过tabindex属性显式控制：
     • tabindex="0"：将元素加入自然Tab序列
     • tabindex="-1"：移出Tab序列但保留JS程序聚焦能力
     • 正数值（已废弃）会破坏正常导航流

4. 复杂组件的键盘操作规范：

   • 下拉菜单：需用方向键展开选项，Enter确认选择
   • 模态对话框：开启时自动聚焦首元素，用Escape键关闭
   • 标签页组：需实现箭头键切换，Home/End键跳转首末项
   • 日期选择器：需支持方向键调整日期，PageUp/Down切换月份

5. 焦点陷阱（Focus Trap）技术：

   • 模态窗口出现时，需用document.activeElement记录原焦点
   • 通过JS监听Tab键，在末元素时循环回首个可聚焦元素
   • 关闭时用element.focus()还原至原焦点位置

6. 跳过导航（Skip Navigation）链接实现：

   • 在页面顶部放置隐藏的锚点链接，仅在获焦时显示
   • 代码示例：

     <a href="#main" class="skip-link">跳至主内容</a>
     <main id="main">...</main>
     

     .skip-link {
       position: absolute;
       top: -40px;
       left: 6px;
     }
     .skip-link:focus {
       top: 6px;
     }
     

7. 动态内容的焦点管理：

   • 使用aria-live区域声明动态更新
   • 通过element.setAttribute('tabindex', '-1')和element.focus()实现程序化焦点转移
   • 单页面应用路由切换时，应自动将焦点移至新加载的内容区域

8. 测试验证方法：

   • 完全禁用鼠标操作进行全流程测试
   • 使用浏览器开发者工具的"Accessibility"面板审查焦点树
   • 配合NVDA/JAWS屏幕阅读器验证语音反馈的准确性