html5的tabindex标签

tabindex属性用于控制HTML元素的键盘导航（Tab键）顺序，这对网页的可访问性(accessibility)非常重要。让我详细解释：

1. tabindex的基本值：

```html

<div tabindex="0">可聚焦元素</div>

<input tabindex="1">
<button tabindex="2">

<div tabindex="-1">程序控制聚焦</div>
```

2. 默认可聚焦的元素（不需要tabindex）：

```html
<a href="...">链接</a>
<button>按钮</button>
<input type="text">
<select>
<textarea>
```

3. 常见使用场景：

a) 自定义组件使其可聚焦：

```html
<div role="button" tabindex="0" onclick="handleClick()">
    自定义按钮
</div>
```

b) 创建模态框焦点陷阱：

```html
<div class="modal" tabindex="-1">
    <button tabindex="1">确认</button>
    <button tabindex="2">取消</button>
</div>
```

c) 跳过导航：

```html
<a href="#main-content" tabindex="1">跳到主要内容</a>
<nav tabindex="2">...</nav>
<main id="main-content" tabindex="-1">...</main>
```

4. 最佳实践：

✅ 推荐做法：

```html

<div role="button" tabindex="0">点击我</div>

<div tabindex="-1" id="error-message">错误提示</div>

<nav>
    <a href="#" tabindex="0">首页</a>
    <a href="#" tabindex="0">关于</a>
</nav>
```

❌ 避免的做法：

```html

<button tabindex="5">第五个</button>
<button tabindex="1">第一个</button>

<div tabindex="0">普通文本不需要聚焦</div>
```

5. 注意事项：

1) 可访问性考虑：

- 确保键盘导航顺序合理
- 为可聚焦元素提供适当的视觉反馈

```css
[tabindex]:focus {
    outline: 2px solid blue;
    /* 确保有清晰的焦点样式 */
}
```

2) 性能考虑：

- 避免过多使用tabindex
- 优先使用原生可聚焦元素

3) 用户体验：

- 保持导航顺序符合用户预期
- 确保重要功能容易访问

6. 与ARIA结合使用：

```html
<div role="button" 
     tabindex="0" 
     aria-label="关闭"
     onclick="closeDialog()">
    ×
</div>
```

使用tabindex时的关键建议：

1. 尽量使用HTML原生的可聚焦元素
2. 只在必要时使用tabindex="0"或"-1"
3. 避免使用正整数值的tabindex
4. 确保键盘导航顺序符合逻辑
5. 测试网站的键盘可访问性