9分で読めます · Updated Invalid Date

アクセシブルなデジタルパブリケーションの作成方法

パブリッシャー向けWCAG 2.2 AA完全ガイド - その意味と達成方法。

アクセシブルなデジタルパブリケーションの作成方法

アクセシビリティは最後に追加する機能ではありません。何らかの障害を持って生活している世界中の推定13億人を含む、すべての読者にコンテンツが届く方法を形作る設計上の意思決定です。パブリッシャーにとって、アクセシビリティを正しく行うことは、倫理的な責任であると同時に、ますます一般的な法的要件でもあります。

このガイドでは、デジタルパブリケーションにおけるWCAG 2.2 AAの意味、ZenFlipが自動的に対応すること、そしてコンテンツを真にアクセシブルにするためにあなたがすべきことを説明します。

WCAG 2.2 AAとは

Web Content Accessibility Guidelines（WCAG）はWorld Wide Web Consortium（W3C）によって公開され、デジタルアクセシビリティのグローバルスタンダードとなっています。2023年10月にリリースされたバージョン2.2が現在のスタンダードです。

WCAGには3つの適合レベルがあります：

  • レベルA - 最低限。最も基本的なアクセシビリティ要件をカバー

  • レベルAA - ほとんどの法律が参照するスタンダード。障害を持つ大多数の人々のニーズをカバー

  • レベルAAA - 最高レベル。すべてのコンテンツタイプで達成するのは困難だが、特定のコンテキストでの目標として有用

パブリケーションが「WCAG 2.2 AA準拠」であるとは、レベルAとレベルAAのすべての達成基準を満たしていることを意味します。これがZenFlipが目標とするレベルです。

4つの原則

WCAGは4つの原則を中心に構成されています。すべてのアクセシビリティ要件はこれらのいずれかに該当します：

1. 知覚可能

コンテンツはすべてのユーザーが知覚できる方法で提示される必要があります。これは以下を意味します：

  • 画像の代替テキスト（altテキスト）

  • 音声・動画コンテンツの字幕またはトランスクリプト

  • テキストと背景間の十分なカラーコントラスト

  • 意味を伝えるために色だけに依存しないコンテンツ

  • 機能を損なうことなく200%まで拡大できるテキスト

2. 操作可能

インターフェースはすべての人が使用できる必要があります。これは以下を意味します：

  • 完全なキーボードナビゲーション - すべての機能がマウスなしでアクセス可能

  • キーボードトラップがない - ユーザーはどのコンポーネントからも離れることができる

  • コンテンツを読んで操作するための十分な時間

  • 1秒あたり3回以上点滅するコンテンツがない

  • キーボードユーザーが現在地を把握できる明確なフォーカスインジケーター

3. 理解可能

コンテンツとインターフェースの動作は予測可能で理解しやすい必要があります。これは以下を意味します：

  • オーディエンスに適した明確な言語

  • 一貫したナビゲーションパターン

  • フォームやインタラクティブ要素のエラー識別と提案

  • ユーザーからの入力が必要な場合のラベルと説明

4. 堅牢

コンテンツは支援技術を含む幅広い技術で動作する必要があります。これは以下を意味します：

  • スクリーンリーダーが解釈できる有効で構造化されたマークアップ

  • 標準HTMLが不十分な場合に正しく使用されるARIA属性

  • 現在および合理的に将来の支援技術との互換性

ZenFlipが自動的に対応すること

ZenFlipでフリップブックを公開すると、ビューアと配信レイヤーが多くのアクセシビリティ要件を自動的に処理します：

キーボードナビゲーション。 ZenFlipビューアは完全なキーボードコントロールをサポートしています。読者はマウスなしでページめくり、特定のページへの移動、フルスクリーンの切り替え、すべてのビューアコントロールへのアクセスが可能です。タブ順序は論理的な順序に従います。

スクリーンリーダーサポート。 ビューアはページの変更、ボタンラベル、ナビゲーションランドマークをスクリーンリーダーに通知します。ARIAラベルはすべてのインタラクティブ要素に適用されます。

フォーカス管理。 すべてのインタラクティブ要素に可視フォーカスインジケーターが表示されます。オーバーレイ、ダイアログ、フルスクリーンビューアの開閉時にフォーカスが正しく管理されます。

レスポンシブデザイン。 ビューアはあらゆる画面サイズに適応し、テキストスケーリングをサポートします。読者はレイアウトを崩すことなくコンテンツを拡大できます。

タッチ＆ジェスチャーサポート。 モバイル読者はスワイプでページをめくり、標準的なピンチズームジェスチャーを使用できます。

ビューアUIのカラーコントラスト。 すべてのビューアコントロール、ボタン、ナビゲーション要素はWCAG 2.2 AAが要求する最低4.5:1のコントラスト比を満たしています。

あなたがすべきこと

ZenFlipはビューアを処理しますが、パブリケーション内のコンテンツはあなたの責任です。以下に注力すべき点をまとめます：

コンテンツ内のカラーコントラスト

PDF内のテキストは、背景に対して十分なコントラストが必要です。WCAG 2.2 AAの要件：

  • 通常テキスト（18pt未満または14pt太字未満）で4.5:1のコントラスト比

  • 大きなテキスト（18pt以上、または14pt太字以上）で3:1のコントラスト比

よくある問題：

  • 白い背景に薄いグレーのテキスト

  • カラー背景上のカラーテキスト（例：黄色い背景にオレンジのテキスト）

  • 不透明または半透明の背景なしに写真の上に重ねたテキスト

PDFを作成する前に、WebAIMのContrast Checker（webaim.org/resources/contrastchecker）などのコントラストチェッカーを使用して色の組み合わせを検証してください。

ドキュメント構造

適切に構造化されたPDFは、スクリーンリーダーがコンテンツの階層とフローを理解するのに役立ちます：

  • オーサリングツール（Word、InDesign、Google Docs）で見出しスタイルを使用してください。テキストを大きくして太字にするのではなく、見出しスタイル（H1、H2、H3）を使用してください

  • 論理的な読み順を使用 - コンテンツは上から下、左から右に順番に読んで意味が通る必要があります

  • 手動で入力した箇条書き記号やダッシュではなく、リストコンテンツにはリストを使用してください

  • レイアウト目的ではなく、表形式のデータにはテーブルを使用してください

画像と代替テキスト

パブリケーション内のすべての意味のある画像には、画像が伝える内容を説明する代替テキストが必要です：

  • 具体的に。 「Q3の売上$4.2MをQ2比12%増で示す棒グラフ」は「チャート」よりも適切です

  • 簡潔に。 通常1〜2文で十分です

  • 装飾画像はスキップ。 純粋に装飾的な罫線、背景、スペーサーには代替テキストは不要です

  • 見た目だけでなく機能を説明。 画像がリンクやボタンの場合、どこに行くか何をするかを説明してください

ほとんどのオーサリングツール（Word、InDesign、Google Docs）では、画像プロパティダイアログから代替テキストを追加できます。正しくエクスポートすれば、この代替テキストはPDFに引き継がれます。

タイポグラフィと可読性

  • 本文テキストには最低12ptのフォントサイズ。視覚障害のない人にとっても、小さなテキストは読みにくいです

  • 可能な限り両端揃えのテキストを避けてください。不均等な単語間スペースはディスレクシアの読者にとって困難な場合があります

  • 十分な行間スペースを使用。 WCAGは本文テキストでフォントサイズの少なくとも1.5倍の行の高さを推奨しています

  • 行の長さを制限。 60〜80文字の行が最も読みやすいです

言語と明確さ

  • オーディエンスに適した平易な言語を使用してください。より簡単な言葉で済む場合は専門用語を避けてください

  • 最初の使用時に略語を定義してください

  • 可能な限り能動態を使用してください。「取締役会が予算を承認した」は「予算が取締役会によって承認された」よりも明確です

  • 長い段落を分割。 明確なトピックセンテンスを持つ短い段落は、スキャンと理解が容易です

アクセシブルなPDFの作成

フリップブックのアクセシビリティの品質は、ソースPDFの品質に大きく依存します。一般的なオーサリングツールごとの主要な手順を以下に示します：

Microsoft Wordから

  1. ビルトインの見出しスタイル（見出し1、見出し2など）を使用

  2. すべての意味のある画像に代替テキストを追加（右クリック > 代替テキストの編集）

  3. エクスポート前にアクセシビリティチェッカーを使用（校閲 > アクセシビリティチェック）

  4. ファイル > 名前を付けて保存 > PDFでPDFとしてエクスポート（「アクセシビリティ用のドキュメント構造タグ」がチェックされていることを確認）

Adobe InDesignから

  1. 見出しと本文テキストに段落スタイルを一貫して使用

  2. 記事パネルで読み順を設定

  3. オブジェクト > オブジェクトの書き出しオプションから代替テキストを追加

  4. ファイル > 書き出し > Adobe PDF（インタラクティブまたはプリント）でPDFとしてエクスポート（「タグ付きPDFを作成」をチェック）

Google Docsから

  1. ツールバーから見出しスタイルを使用

  2. 画像に代替テキストを追加（右クリック > 代替テキスト）

  3. ファイル > ダウンロード > PDFでPDFとしてエクスポート

Canvaから

  1. CanvaはPDFエクスポートのアクセシビリティ機能が限定的

  2. デザインで明確な見出し階層を使用

  3. 強いカラーコントラストを確保

  4. 最高品質のためPDF Printとしてダウンロード

パブリケーションのテスト

ZenFlipにアップロード後、以下の手順でアクセシビリティを確認してください：

  1. キーボードテスト - キーボードのみでフリップブックをナビゲートします。すべてのページに到達できますか？すべてのコントロールにアクセスできますか？

  2. スクリーンリーダーテスト - スクリーンリーダー（MacのVoiceOver、WindowsのNVDA）にアクセスできる場合、コンテンツがどのように読み上げられるかを聞いてください。読み順は意味が通りますか？

  3. ズームテスト - ブラウザで200%にズームします。コンテンツは引き続き使用可能ですか？

  4. カラーテスト - コンテンツをグレースケールで表示します。すべての情報をまだ理解できますか？

法的要件

アクセシビリティはベストプラクティスだけでなく、ますます法的要件となっています：

  • 米国 - Americans with Disabilities Act（ADA）とSection 508は、政府機関および多くの民間組織にアクセシブルなデジタルコンテンツを要求

  • 欧州連合 - European Accessibility Act（EAA）は2025年6月に発効し、アクセシブルなデジタル製品とサービスを要求

  • 英国 - Equality Act 2010およびPublic Sector Bodies Accessibility Regulations 2018

  • オーストラリア - Disability Discrimination Act 1992

  • インド - Rights of Persons with Disabilities Act, 2016

ZenFlipはアクセシブルなビューアを提供しますが、具体的なコンプライアンス義務については法務チームに相談してください。公開するコンテンツもアクセシビリティ基準を満たす必要があります。

リソース

  • WCAG 2.2仕様 - w3.org/TR/WCAG22

  • WebAIMコントラストチェッカー - webaim.org/resources/contrastchecker

  • PDF Accessibility Checker（PAC） - pdfua.foundation/en/pac

  • ZenFlipアクセシビリティステートメント - zenflip.io/legal/accessibility

まとめ

アクセシブルなデジタルパブリケーションの作成には2つのレイヤーが関わります：配信プラットフォームとコンテンツ自体。ZenFlipはプラットフォームレイヤーを処理し、キーボードナビゲーション、スクリーンリーダーサポート、レスポンシブデザインを備えたアクセシブルなビューアを提供します。あなたの責任は、適切な構造、十分なカラーコントラスト、意味のある代替テキスト、明確な言語でコンテンツを作成することです。

基本から始めましょう：構造化された見出し、良好なコントラスト、画像の代替テキスト。これら3つだけでも、支援技術に頼る読者にとって大きな違いをもたらします。

← All guides