tabindex未按预期工作，问题出在哪里？

你对MDN文档的理解没错——规范里明确要求，带正tabindex值的元素应该在tabindex=0和默认可聚焦元素（比如未设置tabindex的链接、按钮）之前获得焦点，顺序按tabindex数值从小到大，数值相同则按DOM顺序。但你遇到的反常情况，大概率是以下几个原因：

1. DOM环境的隔离问题 #

如果你的地图标记点是在Shadow DOM中（Leaflet的部分组件可能会使用Shadow DOM封装元素），它们的焦点序列会和主DOM中的图例按钮隔离开。此时主DOM的正tabindex元素不会优先于Shadow DOM里的tabindex=0元素，因为两者属于不同的焦点上下文。

2. 初始焦点位置的干扰 #

页面加载后，如果初始焦点落在某个tabindex=0的元素上，按Tab键会沿着当前DOM顺序继续向下遍历，不会跳转到正tabindex的元素。只有当你把焦点退回到页面最开头（比如多次按Shift+Tab），再按Tab才会触发规范定义的顺序：先遍历所有正tabindex元素，再处理tabindex=0的元素。

3. 动态属性被覆盖 #

检查你的图例按钮是否真的保留了tabindex="1"——Leaflet的某些插件或脚本可能会动态修改元素的tabindex属性，导致你的设置被覆盖失效。

更合理的解决方案 #

依赖正tabindex调整焦点顺序其实并不推荐，因为它会破坏默认的文档流顺序，对屏幕阅读器用户不友好（这类用户依赖DOM顺序理解内容结构）。更优的做法是：

• 将地图标记点的tabindex设为**-1**：这样标记点无法通过Tab键访问，但仍可通过点击聚焦，既满足键盘用户跳过大量标记点的需求，又不影响鼠标用户操作。
• 让图例按钮保持默认的可聚焦状态（不手动设置tabindex），并调整DOM结构，把按钮放在标记点的DOM节点之前，这样按Tab键会先聚焦按钮，再遍历其他元素。

验证测试代码 #

在标准独立HTML页面中（非iframe环境），你的测试代码应该遵循规范顺序：
tabindex=1按钮 → tabindex=2复选框 → tabindex=3链接 → tabindex=4链接 → 无tabindex链接 → tabindex=0按钮
如果在iframe环境中测试出现反常，大概率是iframe的焦点上下文导致的特殊行为，并非浏览器本身违反规范。

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