为带有landmark角色的div设置tabindex是否合理？

核心原则先明确 #

非交互元素（包括地标、自定义region）绝对不要设置tabindex="0"——这会让它们进入正常tab循环，干扰屏幕阅读器和键盘用户的操作逻辑。只有两种情况需要给非交互区域加tabindex：

• 需要通过编程方式（比如skiplinks）跳转定位
• 区域内没有合适的首个可聚焦元素（比如主内容开头是标题）
  此时应使用tabindex="-1"，它允许跳转定位，但不会出现在tab顺序中。

针对你的场景逐一解决 #

1. 导航地标（如<nav>） #

因为导航内部全是可聚焦的链接元素，直接让skiplinks跳转到第一个链接即可，完全不需要给<nav>加任何tabindex。这样既满足跳转需求，又不会引入多余的tab节点。

2. 主内容地标（如<main>） #

如果主内容开头是<h1>这类不可聚焦的标题，给<main>添加tabindex="-1"，而不是tabindex="0"：

• 这样skiplinks可以直接跳转到<main>，屏幕阅读器会读取“主内容”地标语义，同时光标会定位到区域开头
• 它不会进入tab循环，不会干扰正常键盘操作

3. 自定义区域（如tabpanel） #

遵循ARIA模式的建议：当tabpanel内首个元素不可聚焦时，给panel加tabindex="-1"。这和主内容地标的逻辑一致——支持从tab跳转定位到面板，同时不破坏tab顺序。

统一跳转体验的方案 #

不管是地标还是自定义区域，统一遵循以下逻辑：

• 优先跳转到区域内第一个可聚焦元素（如导航的第一个链接、内容区的第一个按钮）
• 当区域内首个元素不可聚焦时，给区域本身加tabindex="-1"，让skiplinks跳转到区域
  这样所有跳转的体验会保持一致：要么直接定位到可交互元素，要么定位到区域开头且不干扰tab顺序。

补充：你提到的ARIA模式示例中，给region加tabindex的场景，实际都是用的tabindex="-1"，而非tabindex="0"——这是关键区别，它们并没有让非交互区域进入tab循环，只是支持编程跳转。

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