---
title: アクセシビリティ
description: テーマ付きページ向けの、オプトインのスキップリンクと印刷スタイル。
---

# アクセシビリティ

`ssg.a11y` を有効にすると、テーマ付きページに次が付きます。

- `<body>` 内で最初にフォーカスできる **本文へスキップ** リンク
- スキップリンクの行き先としての `<main>` の `id="ox-main"`
- ヘッダー、サイドバー、検索、リーダー chrome の余分を隠す印刷 CSS

機能は自分でオンにするまでオフです。オフのページにはスキップリンクも追加の印刷 CSS も出ません。

```ts
import { oxContent } from "@ox-content/vite-plugin";

export default {
  plugins: [
    oxContent({
      ssg: {
        a11y: true,
      },
    }),
  ],
};
```

`false` または省略は追加分をオフのままにします。`true` は既定でオンです。オブジェクトを渡すと機能はオンになり、スキップリンクのラベルだけ上書きできます。

```ts
oxContent({
  ssg: {
    a11y: { skipLinkLabel: "Skip to main" },
  },
});
```

| フィールド      | 既定                | 効果                                              |
| --------------- | ------------------- | ------------------------------------------------- |
| `skipLinkLabel` | `"Skip to content"` | スキップリンクの文言。HTML 内ではエスケープされる |

スキップリンクは `class="ox-skip-link"` と `href="#ox-main"` です。CSS はキーボードフォーカスを受けるまで視覚的に隠し、最初の Tab 停止位置がスキップリンクになります。

印刷出力は記事を残し、サイト chrome を隠します。ヘッダー、サイドバー、検索モーダル、コピーや先頭へ戻るといったリーダー chrome です。

bare モードはスキップリンクも追加の印刷 CSS も出しません。敵意のあるラベルでもリンク文言の外へは出られません。

## 埋め込みの状態

読者のブラウザで解決されるものはほとんどありません。カード、プレーヤー、リンクプレビューはすべてビルド時に一度作られ、静的な HTML として配信されるため、表示すべきローディング状態がありません。解決済みの状態で届きます。ビルド時のフェッチが失敗した場合、配信されるのは最初からフォールバックまたはエラーカードで、読者がその過程を見ることはありません。

例外は **island** です。コンポーネントタグはブラウザでハイドレートするため、時間経過で状態が変わる唯一の埋め込みです。

| 状態     | マーカー             | 見た目                                                                   |
| -------- | -------------------- | ------------------------------------------------------------------------ |
| loading  | `.ox-island-loading` | スピナー（短い遅延の後に表示するので、速いハイドレートでは点滅しません） |
| resolved | `[data-ox-hydrated]` | コンポーネント自身                                                       |
| error    | `.ox-island-error`   | 元の静的コンテンツを、非インタラクティブとして表示                       |

いずれも `prefers-reduced-motion: reduce` を尊重します。

## モーションの抑制

組み込みの埋め込みと island のスタイルは `prefers-reduced-motion: reduce` を尊重します。Open Graph カード、GitHub カード、未ハイドレートの island のローディングスピナーは回転を止め、island のスケルトンはシマーを止め、タブと YouTube プレースホルダのホバートランジションは無効になります。

各インジケータは形を保つので、読み込み中のカードは読み込み中に見えたままです。消えるのは動きだけです。これらのスタイルは埋め込み自体に同梱され、設定は不要です。
