移动端导航切换的ARIA属性规范：显示菜单同时隐藏内容

需求说明 #

需要设计符合无障碍标准的移动端导航切换按钮，点击按钮时显示导航菜单，同时隐藏页面其余内容。

常规实现方式 #

常规的导航展开/折叠实现代码如下：

HTML（折叠状态） #

<body>
    <button type="button" aria-expanded="false" aria-controls="main-nav">菜单已收起</button>
    <nav id="main-nav">...</nav>
</body>

HTML（展开状态） #

<body class="mobile-nav-open">
    <button type="button" aria-expanded="true" aria-controls="main-nav">菜单已展开</button>
    <nav id="main-nav">...</nav>
</body>

CSS #

#main-nav { display: none; }
.mobile-nav-open #main-nav { display: block }

特殊需求与现有实现的问题 #

当前设计要求：移动端导航展开时，页面内容区和页脚需设置display: none隐藏。

尝试的实现代码：

CSS #

.main-nav,
.sidebar-nav,
.footer-nav {
    display: none;
} 
.mobile-nav-open .content,
.mobile-nav-open .footer {
    display: none;
}

.mobile-nav-open .main-nav,
.mobile-nav-open .sidebar-nav,
.mobile-nav-open .footer-nav {
    display: block;
} 

HTML #

<button type="button" aria-expanded="true" aria-controls="main-nav sidebar-nav footer-nav">菜单已展开</button>

但该实现存在无障碍问题：将内容区和页脚加入aria-controls并不合理，因为它们的显示状态与导航完全相反，无法通过无障碍属性准确反映这种互斥隐藏的逻辑。这种设计类似标签页的互斥显示，但又不是标准标签页组件（仅单个按钮切换，显示内容也非标签页式的关联分组），查阅tablist、listbox等标准组件文档后未找到适配方案，需要符合WCAG标准的正确实现方式。

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