独立模式 PWA 的无障碍设计

独立模式 PWA 会排除用户代理的导航控件，用户代理仍可能保留状态栏等其他界面。因此，应用得在自己的文档里自备可操作的导航，还要给每个视图起一个能说明内容的标题。结构化区域和清晰可见的焦点同样要放在文档内。

从显示模式开始

display-mode 媒体特性报告应用当前所处的显示模式。browser 是普通标签页；standalone、minimal-ui 和 fullscreen 是已安装应用的模式，另有其他受支持的取值。MDN 建议，没有自有导航元素的应用使用 minimal-ui，因为该模式可以保留浏览器提供的前后翻页控件。

显示模式不会改变 WCAG 要求：WCAG 2.2 要求网页标题描述主题或目的，也要求键盘可操作界面提供清晰可见的焦点指示。WAI 的页面结构指南建议使用有意义的元素、标题和已标注区域来帮助导航与定位。

浏览器与平台支持

window.matchMedia('(display-mode: standalone)').matches 在独立显示环境中为真。查询结果不匹配时，文档仍能在浏览器环境中使用；首页链接在两种模式下都会保留。

提供定位信息和恢复路径

给每条路由写一个描述性的 <title>，页面内的标题层级按逻辑排好。根据页面的实际结构选择有意义的语义元素和已标注区域。在独立窗口中加入可到达应用首页和前一视图的链接或控件；不要把浏览器界面作为唯一恢复路径。

保留原生链接和按钮行为，并维持清晰可见的键盘焦点指示。

示例

第一个示例在文档内提供定位信息，第二个示例检测显示模式，并且只在应用以独立模式运行时添加后退控件。

提供导航区域和可见焦点

这个片段提供标题、一个标题元素、带标签的导航区域和清晰可见的键盘焦点指示。

<title>账户设置</title>
<a class="skip-link" href="#main">跳到内容</a>
<nav aria-label="应用导航">
  <a href="/">首页</a>
</nav>
<main id="main" tabindex="-1">
  <h1>账户设置</h1>
</main>

<style>
  :focus-visible { outline: 3px solid #075fcc; outline-offset: 3px; }
  .skip-link { position: absolute; left: -10000px; }
  .skip-link:focus { left: 1rem; top: 1rem; }
</style>

首页链接在每种显示模式下都能用。跳转链接让键盘用户越过重复的导航。

检测独立模式并提供浏览器回退

这个片段在独立模式中显示后退控件，没有 matchMedia 或查询结果不匹配时，它会保留普通首页链接，而不是隐藏导航。

<nav aria-label="应用导航">
  <a href="/">首页</a>
  <button id="back" type="button" hidden>后退</button>
</nav>

<script type="module">
  const back = document.querySelector('#back');
  if (!('matchMedia' in window)) {
    back.hidden = true;
  } else if (window.matchMedia('(display-mode: standalone)').matches) {
    back.hidden = false;
    back.addEventListener('click', () => {
      if (history.length > 1) history.back();
      else location.assign('/');
    });
  } else {
    back.hidden = true;
  }
</script>

后退按钮只在独立模式中出现，其他情况下用户仍有首页链接可用。

常见问题

警告

删除 outline 而不提供其他可见焦点指示，与 WCAG 2.2 Focus Visible 冲突。standalone 模式本身已不显示用户代理导航控件；如果再隐藏应用自有导航，用户就会失去这些导航路径。如果应用不提供前后导航，请使用 minimal-ui。

单页应用完成导航后，应更新 document.title 来描述新视图。WAI 的 Page Titled 指南指出，不同 SPA 视图的内容变化时也应更新标题。

另请参阅

• Web Content Accessibility Guidelines (WCAG) 2.2（W3C）
• Create a standalone app（MDN）
• 清单显示模式
• 桌面端 PWA
• orientation 清单成员