NVDA元素列表无法识别<header>首个直接子元素<nav>问题求助

问题重现 #

当使用如下代码时，NVDA屏幕阅读器无法识别标注为"Primary"的<nav>元素，只有在该<nav>前添加非<nav>元素后才能正常识别：

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

原因解释 #

NVDA对带有role="banner"的<header>容器存在特殊处理逻辑：它会将该区域判定为页面横幅，默认情况下会忽略横幅内第一个导航元素的aria-label属性，导致无法识别其自定义导航名称。另外，<nav>元素本身已自带导航语义，额外添加的role="navigation"属于冗余属性，可能进一步干扰NVDA的语义解析流程。

解决方案 #

提供三种可行的解决方式，可根据页面需求选择：

1. 移除冗余的role="navigation"属性
   直接删除<nav>上多余的角色定义，让NVDA正确解析原生语义与aria-label：

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

2. 添加隐藏元素打破识别逻辑
   在<nav>前添加一个视觉隐藏且不影响语义的元素，干扰NVDA对横幅内首个元素的特殊处理：

   <header role="banner">
       <span aria-hidden="true"></span>
       <nav aria-label="Primary">...</nav>
   </header>
   

3. 调整页面结构
   如果布局允许，将<nav>移出<header>容器，脱离NVDA对横幅区域的特殊识别范围：

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

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