print

印刷アクセシビリティスキル

正式なソース：mgifford/ACCESSIBILITY.md の examples/PRINT_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルを基にしています。判断に迷った場合は、サンプルを優先してください。

印刷用スタイルシートを実装またはレビューする際は、以下のルールを適用してください。 プロジェクトの対象に印刷用 CSS が含まれる場合に限り、このスキルを読み込んでください。

---

基本原則

印刷はアクセシビリティ機能です。認知障害のあるユーザーにとって、印刷物のほうが処理しやすい場合があります。弱視のユーザーは印刷物を拡大でき、安定したインターネット接続がないユーザーにはオフラインのコピーが必要です。印刷スタイルでは、コンテンツを有用で読みやすく保ち、色だけに意味を依存させないようにしてください。印刷用 CSS はプログレッシブエンハンスメントとして扱い、まず画面表示用のスタイルを記述してから、@media print を重ねてください。カスタムスタイルを追加する前に、ブラウザーのデフォルトの印刷モードでもコンテンツが理解できることを確認してください。

---

重大度の尺度（このスキル）

レベル	意味
致命的	印刷結果が完全に使用不能（白紙、ナビゲーションのみ）
深刻	色が除去されることでコンテンツが失われる、または意味が損なわれる。表が読めない
中程度	見出しがページ末尾に孤立する。リンク URL が表示されない。ページをまたぐレイアウトが崩れる
軽微	印刷に最適化されていないタイポグラフィ。長い URL に代わる QR コードがない

---

致命的：すべての印刷スタイルを適用する

/* Preferred: single inline block */
@media print {
  /* all print styles here */
}

/* Alternative: separate file */
/* <link rel="stylesheet" href="print.css" media="print"> */

@media print ブロックがないサイトでは、コンテンツが省かれる一方で、ナビゲーション、Cookie バナー、サイドバーが印刷される可能性があり、致命的です。スタイルを同じ場所にまとめ、HTTP リクエストを減らせるインラインの方法を優先してください。

---

致命的：必須でない要素を非表示にする

@media print {
  nav, header nav, footer, aside, .sidebar,
  .cookie-banner, .skip-link, .ad, .social-share,
  .print-hide, video, audio, iframe,
  [role="complementary"],
  form button[type="submit"]:not(.print-show) {
    display: none !important;
  }
}

ユーティリティクラス：

• .print-hide — 印刷時のみ非表示にする要素（ナビゲーションボタン、インタラクティブなコントロールなど）
• .print-show — 画面では非表示だが、印刷時に必要な要素（郵送先住所、展開されたコンテンツ、補足事項など）

---

深刻：印刷時の色への依存

ブラウザーでは、背景を印刷しない設定がデフォルトになっている場合が多いため、背景色で伝えている情報は失われます。色だけを使ったデータ表やステータス表示では、これは深刻な問題です。また、インクの色の再現はプリンターによって大きく異なるため、印刷結果は必ずグレースケールでテストしてください。

@media print {
  .status-error::after   { content: " [Error]"; }
  .status-success::after { content: " [OK]"; }
  .status-warning::after { content: " [Warning]"; }

  /* Remove colour-coded highlights; use borders instead */
  .status-warning {
    border: 2pt solid #000;
    color: #000;
    background: none;
  }
}

背景色のある表のセルには、そのセルにテキストラベルがすでに含まれていることを確認してください。意味を伝えるために背景色に頼らないでください。SVG／画像の表示に必要な場合に限り、背景の印刷を強制してください。

@media print {
  .required-background {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

グレースケールのテストチェックリスト：

• すべてのテキストが白黒の出力でも読み取れる
• グラフや図表に、色に加えてパターン、形状、ラベルが含まれている
• ステータス表示（警告、エラー、成功）に、色だけでなくテキストラベルを使用している
• リンクを判別できる（下線または URL の表示）

---

深刻：リンク URL を表示する

URL がなければ、印刷物のリンクは機能しません。リンクに情報が含まれるコンテンツ中心のページでは、URL の表示漏れは深刻です。

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
    color: #333;
    word-break: break-all;
  }
  /* Suppress non-informative and internal links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href].no-print-url::after {
    content: "";
  }
}

長い URL が多数あるページでは、代替手段として QR コードの提供を検討してください。重要なリンクの隣に QR コードを置くと印刷してスキャンでき、長い URL の折り返しも避けられます。

<img src="/qr/this-page.png"
     alt="QR code linking to this page online"
     class="print-show">

---

中程度：印刷用タイポグラフィ

@media print {
  body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  h1 { font-size: 22pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  p, li, td, th {
    font-size: 11pt;
    orphans: 3; /* Minimum lines at bottom of page */
    widows: 3;  /* Minimum lines at top of next page */
  }
  blockquote {
    border-left: 3pt solid #555;
    padding-left: 12pt;
    margin-left: 0;
    font-style: italic;
  }
}

本文にはセリフ体を使用してください。一般に、印刷物ではセリフ体のほうが読みやすいとされています。印刷用スタイルシートのフォントサイズには pt 単位を使用してください。orphans と widows を設定し、1 行だけが孤立するのを防いでください。

---

中程度：ページ設定

@page {
  margin: 2cm; /* Minimum for most printers; leave more for bound documents */
}
@page :first {
  margin-top: 3cm;
}
@page :left  { margin-left: 3cm; }
@page :right { margin-right: 3cm; }

文書が A4 専用に設計されていない限り、size: A4 の指定は避けてください。米国の読者はレターサイズ（8.5×11in）を使用します。size を省略してプリンターまたはユーザーに任せるか、指定する場合は選択理由を明記してください。

@page のマージンボックスを使用すると、ページのヘッダー／フッターを追加できます。

@page {
  @top-center {
    content: "Document Title — " string(doc-title);
    font-size: 9pt;
    color: #555;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 9pt;
    color: #555;
  }
}

@page のマージンボックスは、すべてのブラウザーではなく、主にページメディア用レンダラー（Prince、WeasyPrint、Paged.js）でサポートされています。クロスブラウザーでページ番号を付けるには、JavaScript またはサーバー側での PDF 生成を使用してください。

---

中程度：ページ区切りの制御

@media print {
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;   /* Modern equivalent */
  }
  figure, img, table, pre, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .page-break-before {
    page-break-before: always;
    break-before: always;
  }
}

幅広いブラウザーをサポートするには、page-break-*（レガシー）とbreak-*（モダン）の両方のプロパティを使用します。

---

中程度：テーブル

@media print {
  table { border-collapse: collapse; width: 100%; }
  th, td {
    border: 1pt solid #333;
    padding: 6pt;
    text-align: left;
  }
  thead { display: table-header-group; } /* Repeat header on each page */
  tr { page-break-inside: avoid; }
}

アクセシビリティにとって最も重要なテーブルのルールは、thead { display: table-header-group }です。これがないと、列見出しは最初のページにしか表示されず、複数ページにわたるテーブルが読めなくなります。データ量の多いテーブルでは、これが欠けていると重大な問題になります。

---

中程度：画像

@media print {
  img, svg {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

通常、ブラウザーは印刷出力でCSSの背景画像をデフォルトで非表示にします。意味のある画像にはCSSの背景ではなく、説明的なaltテキストを指定した<img>要素を使用してください。画像が壊れた場合にのみaltテキストが表示されることを前提にしないでください。

---

軽微：印刷ボタンとテスト

専用の「このページを印刷」ボタンを用意すると、見つけやすさが向上します。

<button type="button" class="print-trigger print-hide" onclick="window.print()">
  Print this page
</button>

• 誤ってフォームが送信されないよう、type="button"を使用します
• スクリーンリーダーの利用者向けに、アイコンだけでなく、表示されるボタンテキストを含めます
• 印刷出力ではボタン自体を非表示にします（.print-hide）

ブラウザでのテスト：

• Chrome／Edge：DevTools → その他のツール → レンダリング → 「CSSメディアタイプをエミュレート」 → print
• Firefox：DevTools → インスペクター → 印刷メディアアイコンを切り替えます
• 用紙サイズや向きを変えてネイティブの印刷プレビューを確認するには、Ctrl+P／Cmd+Pを使用します

**自動テスト：**スキャン前に印刷メディアのエミュレーションを有効にして、印刷用にレンダリングされたDOMに対してaxe-coreを実行します。Lighthouseは印刷スタイルを直接テストしませんが、画面表示版の違反は印刷出力にも影響します。

---

完了の定義チェックリスト

• すべての印刷スタイルが@media print内にスコープされている
• ナビゲーション、フッター、広告、インタラクティブウィジェットが非表示になっている
• 色で区別される状態に、印刷時のテキストによる代替表現がある（.status-error::afterなど）
• リンクURLが::afterで表示される（フラグメントリンクとjavascript:リンクは除外）
• 長いURL：QRコードによる代替案を検討している
• 本文にセリフ体フォントを使用し、単位をptとし、基本サイズを12ptに設定し、orphans／widowsを指定している
• @pageの余白を定義している（少なくとも2cm）。sizeは省略するか、説明を記載している
• 見出しにbreak-after: avoidを指定している
• 図とテーブルにbreak-inside: avoidを指定している
• 複数ページにわたるテーブルにthead { display: table-header-group }を指定している
• 色に依存せず読みやすいことをグレースケールでテストしている
• ブラウザーの印刷プレビュー（Chrome、Firefox、Safari）でテストしている

---

主なWCAG基準

• 1.1.1 非テキストコンテンツ（A） — 背景画像が非表示になる場合、画像にaltテキストが必要です
• 1.3.1 情報と関係性（A） — 印刷時に構造が維持されます
• 1.3.2 意味のある順序（A） — 印刷レイアウトが画面表示と異なる場合も、読み上げ順序が論理的です
• 1.4.1 色の使用（A） — 背景が除かれたときに色だけで伝えていた意味が失われる場合、重大な問題になります
• 1.4.3 コントラスト（最低限）（AA） — 白い用紙上でテキストが読みやすいです
• 1.4.6 コントラスト（強化）（AAA） — 細かい文字が多い印刷文書では、7:1を目標にします
• 2.4.4 リンクの目的（AA） — 印刷されたリンクのURLを表示します

---

参考資料

• ベストプラクティスの完全ガイド
• MDN：@media print
• MDN：print-color-adjust
• MDN：orphans／widows
• CSSページメディアモジュール レベル3
• Paged.js — ブラウザーでページ付きコンテンツをレンダリングします
• WeasyPrint — ページメディアをサポートしたHTML／CSSからPDFへの変換

**標準の見通し：**これらのルールはWCAG 2.2 AAを対象としています。WCAG 3.0で印刷アクセシビリティに大きな変更が加わる見込みはありません。 https://www.w3.org/TR/wcag-3.0/を確認してください。