前端焦点管理与键盘导航：从 Tab 顺序到无障碍交互的工程实践
前端焦点管理与键盘导航：从 Tab 顺序到无障碍交互的工程实践
一、键盘导航的"焦点黑洞"：从鼠标优先到全输入方式支持
前端应用的焦点管理是最容易被忽视的工程环节。大多数开发者在鼠标交互下验证功能，却忽略了键盘用户（包括屏幕阅读器用户、运动障碍用户和效率型用户）的导航体验。常见的焦点问题包括：模态框关闭后焦点丢失、动态内容加载后焦点未转移、自定义组件无法通过 Tab 键聚焦。
更严重的是，焦点管理不当直接影响无障碍合规性。WCAG 2.1 的 2.4.3 焦点顺序（Level A）和 2.4.7 焦点可见（Level AA）要求焦点顺序符合逻辑且焦点指示器清晰可见。不合规的焦点管理可能导致法律风险。
二、焦点管理的底层机制：从 Tab 序列到焦点陷阱
flowchart TD A[Tab 键按下] --> B[浏览器查找下一个可聚焦元素] B --> C{当前元素在焦点陷阱内?} C -->|否| D[按 DOM 顺序查找下一个] C -->|是| E[在陷阱范围内循环查找] D --> F{找到可聚焦元素?} E --> F F -->|是| G[聚焦该元素] F -->|否| H[焦点不变] subgraph 可聚焦元素判定 I[原生元素: a/button/input 等] J[tabindex=0: 加入 Tab 序列] K[tabindex>0: 优先聚焦, 不推荐] L[tabindex=-1: 可编程聚焦, 不在 Tab 序列] end B --> I B --> J B --> K B --> L subgraph 焦点陷阱场景 M[模态对话框] N[下拉菜单] O[侧边抽屉] end C --> M C --> N C --> O焦点管理的核心概念：Tab 序列（按 DOM 顺序遍历tabindex ≥ 0的元素）、焦点陷阱（限制焦点在特定区域内循环）、编程式聚焦（通过element.focus()转移焦点）。模态对话框是最典型的焦点陷阱场景——打开时焦点应进入对话框，关闭时焦点应返回触发元素。
三、生产级代码实现与最佳实践
/** * 焦点陷阱管理器 * 用于模态对话框、侧边抽屉等需要限制焦点范围的场景 */ class FocusTrap { private container: HTMLElement; private previouslyFocusedElement: HTMLElement | null = null; private focusableSelectors = [ 'a[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', '[tabindex]:not([tabindex="-1"])', ].join(', '); constructor(container: HTMLElement) { this.container = container; } /** * 激活焦点陷阱 * 记录当前焦点元素，将焦点移入容器 */ activate(): void { // 记录触发元素，关闭时需要恢复焦点 this.previouslyFocusedElement = document.activeElement as HTMLElement; // 将焦点移入容器内的第一个可聚焦元素 const firstFocusable = this.getFirstFocusable(); if (firstFocusable) { // 使用 requestAnimationFrame 确保 DOM 已渲染 requestAnimationFrame(() => firstFocusable.focus()); } // 监听 Tab 键，实现焦点循环 document.addEventListener('keydown', this.handleKeyDown); } /** * 停用焦点陷阱 * 将焦点恢复到触发元素 */ deactivate(): void { document.removeEventListener('keydown', this.handleKeyDown); // 恢复焦点到触发元素 if (this.previouslyFocusedElement) { this.previouslyFocusedElement.focus(); this.previouslyFocusedElement = null; } } /** * Tab 键处理：在容器内循环焦点 * Shift+Tab 反向循环 */ private handleKeyDown = (event: KeyboardEvent): void => { if (event.key !== 'Tab') return; const focusableElements = this.getFocusableElements(); if (focusableElements.length === 0) { event.preventDefault(); return; } const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; if (event.shiftKey) { // Shift+Tab: 从第一个元素跳到最后一个 if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { // Tab: 从最后一个元素跳到第一个 if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } }; private getFocusableElements(): HTMLElement[] { return Array.from( this.container.querySelectorAll<HTMLElement>(this.focusableSelectors) ).filter(el => !el.hasAttribute('disabled') && el.offsetParent !== null); } private getFirstFocusable(): HTMLElement | null { const elements = this.getFocusableElements(); return elements.length > 0 ? elements[0] : null; } } /** * 模态对话框组件 * 集成焦点陷阱、Escape 关闭和 ARIA 属性 */ class ModalDialog { private trap: FocusTrap; private overlay: HTMLElement; private triggerElement: HTMLElement | null = null; constructor(dialogElement: HTMLElement) { this.overlay = dialogElement; this.trap = new FocusTrap(dialogElement); this.setupAria(); } /** * 打开模态框 * 设置 ARIA 属性、激活焦点陷阱、阻止背景滚动 */ open(triggerElement?: HTMLElement): void { this.triggerElement = triggerElement || (document.activeElement as HTMLElement); this.overlay.setAttribute('aria-hidden', 'false'); this.overlay.setAttribute('aria-modal', 'true'); // 阻止背景滚动 document.body.style.overflow = 'hidden'; // 激活焦点陷阱 this.trap.activate(); // 监听 Escape 键关闭 document.addEventListener('keydown', this.handleEscape); } /** * 关闭模态框 * 恢复焦点、移除 ARIA 属性、恢复背景滚动 */ close(): void { this.overlay.setAttribute('aria-hidden', 'true'); this.overlay.removeAttribute('aria-modal'); document.body.style.overflow = ''; // 停用焦点陷阱（会自动恢复焦点到触发元素） this.trap.deactivate(); document.removeEventListener('keydown', this.handleEscape); } private handleEscape = (event: KeyboardEvent): void => { if (event.key === 'Escape') { this.close(); } }; private setupAria(): void { // 确保对话框有 role="dialog" 和 aria-label if (!this.overlay.hasAttribute('role')) { this.overlay.setAttribute('role', 'dialog'); } if (!this.overlay.hasAttribute('aria-label') && !this.overlay.hasAttribute('aria-labelledby')) { console.warn('对话框缺少 aria-label 或 aria-labelledby'); } this.overlay.setAttribute('aria-hidden', 'true'); } } /** * 动态内容焦点管理 * 内容加载完成后将焦点转移到新内容 */ class DynamicContentFocusManager { /** * 内容加载完成后转移焦点 * 使用 aria-live 区域通知屏幕阅读器 */ static focusAfterLoad( container: HTMLElement, announceText?: string, ): void { // 标记容器为 aria-live 区域 container.setAttribute('aria-live', 'polite'); container.setAttribute('role', 'region'); // 将焦点移入新内容 requestAnimationFrame(() => { const firstFocusable = container.querySelector<HTMLElement>( 'a[href], button, input, [tabindex="0"]' ); if (firstFocusable) { firstFocusable.focus(); } else { // 无可聚焦元素时，将容器本身设为可聚焦 container.setAttribute('tabindex', '-1'); container.focus(); } // 通知屏幕阅读器 if (announceText) { const announcer = document.createElement('div'); announcer.setAttribute('role', 'status'); announcer.setAttribute('aria-live', 'polite'); announcer.className = 'sr-only'; // 视觉隐藏但可被屏幕阅读器读取 announcer.textContent = announceText; document.body.appendChild(announcer); setTimeout(() => announcer.remove(), 1000); } }); } }四、焦点管理的工程权衡：焦点指示器样式、性能与兼容性
焦点指示器样式。默认的焦点轮廓（outline）在视觉上不够美观，但完全移除会违反 WCAG 2.4.7。建议使用:focus-visible伪类，仅在键盘导航时显示焦点指示器，鼠标点击时不显示。这样既满足无障碍要求，又不影响视觉设计。
动态内容焦点。SPA 中页面内容动态替换后，焦点可能停留在已移除的元素上，导致焦点丢失。建议在路由切换时，将焦点转移到新页面的主内容区域（<main>），并使用aria-live通知屏幕阅读器。
兼容性。:focus-visible在旧版浏览器中不支持，需要使用:focus作为回退。inert属性（用于标记不可交互区域）在部分浏览器中需要 polyfill。
适用边界：焦点管理适用于所有需要无障碍合规的 Web 应用。对于内部工具或短期项目，可以适当降低焦点管理的优先级，但基本的焦点陷阱和焦点恢复仍应实现。
五、总结
前端焦点管理是无障碍合规和键盘导航体验的基础。焦点陷阱确保模态对话框内的焦点循环，焦点恢复确保关闭后焦点回到触发元素。动态内容加载后需主动转移焦点并通知屏幕阅读器。工程实践中，使用:focus-visible区分键盘和鼠标焦点，使用aria-live通知内容变化，使用inert标记不可交互区域。焦点管理不是可选功能，而是 Web 应用的基本工程要求。