HTML键盘导航[编辑 | 编辑源代码]

HTML键盘导航是网页可访问性（Web Accessibility）的核心组成部分，它确保用户无需依赖鼠标，仅通过键盘（如Tab、Enter、方向键等）即可与网页交互。这对于行动不便的用户、屏幕阅读器用户以及需要高效键盘操作的专业人士至关重要。

基本概念[编辑 | 编辑源代码]

键盘导航依赖于HTML元素的焦点管理（Focus Management）。浏览器默认支持通过Tab键（向前）和Shift+Tab（向后）在可聚焦元素间切换。可聚焦元素包括：

表单控件（<input>, <select>, <button>等）
带有href的链接（<a>）
显式设置tabindex属性的元素

焦点顺序示例[编辑 | 编辑源代码]

关键实现技术[编辑 | 编辑源代码]

1. tabindex属性[编辑 | 编辑源代码]

tabindex控制元素的聚焦行为：

tabindex="0"：元素按DOM顺序可聚焦
tabindex="-1"：元素可通过JS聚焦但不参与键盘导航
正值（不推荐）：破坏自然阅读顺序

<!-- 可聚焦的div -->
<div tabindex="0" onclick="handleClick()">点击我或按Tab选择</div>

<!-- 通过JS聚焦但不参与Tab顺序 -->
<div tabindex="-1" id="modal">模态框内容</div>

2. 键盘事件处理[编辑 | 编辑源代码]

通过JavaScript增强键盘交互：

document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowDown') {
        // 向下箭头键逻辑
        moveSelectionDown();
    } else if (event.key === 'Enter') {
        // 回车键触发点击
        activeElement.click();
    }
});

3. ARIA角色补充[编辑 | 编辑源代码]

使用WAI-ARIA增强语义：

<div role="menu">
    <div role="menuitem" tabindex="0">文件</div>
    <div role="menuitem" tabindex="0">编辑</div>
</div>

实际案例[编辑 | 编辑源代码]

自定义下拉菜单[编辑 | 编辑源代码]

完整键盘可访问的实现：

<div class="dropdown" role="combobox" aria-expanded="false">
    <button 
        id="dropdown-btn"
        aria-haspopup="listbox"
        tabindex="0"
    >选择选项</button>
    <ul role="listbox" tabindex="-1">
        <li role="option" tabindex="0">选项1</li>
        <li role="option" tabindex="0">选项2</li>
    </ul>
</div>

需配合JavaScript处理：

方向键导航选项
Enter/Space选择
Esc关闭菜单

高级技巧[编辑 | 编辑源代码]

焦点陷阱（Focus Trap）[编辑 | 编辑源代码]

模态对话框需要限制焦点在内部循环：

function trapFocus(element) {
    const focusable = element.querySelectorAll(
        'button, [href], input, select, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    last.addEventListener('keydown', (e) => {
        if (e.key === 'Tab' && !e.shiftKey) {
            e.preventDefault();
            first.focus();
        }
    });
}

跳过导航链接[编辑 | 编辑源代码]

帮助键盘用户快速跳过重复内容：

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

<style>
    .skip-link {
        position: absolute;
        left: -9999px;
    }
    .skip-link:focus {
        left: 0;
    }
</style>