# 独立模式 PWA 的无障碍设计

> 在浏览器导航控件不显示的独立模式 PWA 中，构建导航、页面标题、区域结构与清晰可见的键盘焦点。

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

## 从显示模式开始

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

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

## 浏览器与平台支持

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

## 提供定位信息和恢复路径

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

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

## 示例

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

### 提供导航区域和可见焦点

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

```html
<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` 或查询结果不匹配时，它会保留普通首页链接，而不是隐藏导航。

```html
<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>
```

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

## 常见问题

:::caution
删除 `outline` 而不提供其他可见焦点指示，与 [WCAG 2.2 Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible) 冲突。`standalone` 模式本身已不显示用户代理导航控件；如果再隐藏应用自有导航，用户就会失去这些导航路径。如果应用不提供前后导航，请使用 `minimal-ui`。
:::

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

## 另请参阅

- [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)（W3C）
- [Create a standalone app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Create_a_standalone_app)（MDN）
- [清单显示模式](/zh/reference/manifest/display/)
- [桌面端 PWA](/zh/reference/platforms/desktop/)
- [orientation 清单成员](/zh/reference/manifest/orientation/)