NVDA 的元素列表无法识别 <nav> 中的 <header>（如果它是第一个直接子元素）

Question

有人经历过这种情况吗？如果有，你有解释和/或解决方案吗？基本上，如果您有以下标记，“主”导航将不会在 NVDA 中被识别，除非它前面有一个非导航元素。

<header role="banner">
    <nav role="navigation" aria-label="Primary">...</nav>
</header>

Answer 1

将

<nav>

元素嵌套在

<heading>

元素中是完全有效的 HTML，并且这样做不存在语义问题。

也就是说，如果元素是其他地标元素的子元素，NVDA 似乎不会显示“地标列表”中的元素。

NVDA 将在

<nav>

中查看并公布您的

<header>

元素，但前提是您手动单步浏览页面内容。

这意味着，如果您将

<nav>

嵌套在

<header>

中，则只有顶级元素（在本例中

<header>

）在“Landmarks List”中可见，并且子元素不会通过使用键盘快捷键循环穿过地标即可访问。

如果是我，我可能会将

<nav>

元素移到

<header>

之外，但这两种方式在技术上都没有错误。

Answer 2

将 aria-label 属性添加到地标元素就可以了

之前（未被 NVDA 认可）

<main>
  <div role="form"></div>
</main>

之后（被NVDA认可）

<main>
  <div role="form" aria-label="contact form"></div>
</main>