障害のある利用者を含め、すべての利用者が読めるドキュメントを作成します。アクセシビリティのベストプラクティスに従うと、だれでも Cloudflare のドキュメントへアクセスし、理解し、使えます。
この指針は Web Content Accessibility Guidelines（WCAG）2.1 のレベル AA に沿い、ドキュメントに関係する点に焦点を当てます。
各ページには、内容をはっきり示し、ほかのページと区別できる説明的なタイトルが必要です。
- タイトルでは、いちばん具体的な情報を先に置きます。
- 簡潔でありながら、内容が分かるタイトルにします。
- 文脈のない「概要」や「はじめに」のような汎用タイトルは避けます。
| する | しない |
|---|---|
| SSL/TLS 暗号化モードを設定する | SSL の設定 |
| DNS 解決エラーをトラブルシューティングする | トラブルシューティング |
WCAG 参照: 2.4.2 Page Titled（レベル A） ↗
見出しは階層を作り、すべての利用者が内容をたどり、理解しやすくします。スクリーンリーダーの利用者は、見出しを使ってページを効率よく移動します。
- 見出しは連番で使います。レベルを飛ばさないでください。
- 続く内容が分かる見出しにします。
- H1 はページごとに 1 つだけ使います（ページタイトルです）。
- 見た目のためだけに見出しを使わないでください。
| する | しない |
|---|---|
| 主なセクションは H2、下位セクションは H3 にする | H2 から H4 へ飛ばす |
| DNS レコードを設定する（セクションの内容を表す） | 重要（曖昧な見出し） |
WCAG 参照: 2.4.6 Headings and Labels（レベル AA） ↗
内容は、上から順に読んでも意味が通る並びにします。
- 上から下へ自然に流れる構成にします。
- コード例は、説明文のあとに置きます。
- 前提情報は、手順の前に置きます。
WCAG 参照: 1.3.2 Meaningful Sequence（レベル A） ↗
リンクテキストは、行き先または目的が分かるようにします。文脈のない曖昧な表現は避けます。
- 可能なときは、行き先ページのタイトルをリンクテキストにします。
- リンク先で何が分かるかが伝わるようにします。
- 「こちらをクリック」「続きを読む」「このページ」のような汎用表現は避けます。
| する | しない |
|---|---|
| よくある問題は DNS のトラブルシューティングガイド を参照してください。 | よくある問題は、こちら をクリックしてください。 |
| SSL 証明書の設定 について詳しく見る | SSL について 続きを読む |
| Wrangler CLI のインストールガイド をダウンロードする（PDF、2MB）。 | ダウンロードするには こちらをクリック してください。 |
WCAG 参照: 2.4.4 Link Purpose (In Context)（レベル A） ↗
視覚的なレイアウトに依存する方向・位置の表現は使わないでください。スクリーンリーダー利用者の障壁になり、デバイスによっても成り立たないことがあります。
- 「上」「下」「左」「右」「先頭」「末尾」は、要素の位置を説明する必要があるとき以外は避けます。
- 位置ではなく、要素の名前で指します。
- 内容の識別には、セクション見出しやラベルを使います。
| する | しない |
|---|---|
| DNS セクションで、ドメインを選択します。 | 画面の右側で、ドメインを選択します。 |
| 要件は 前提条件 セクションを参照してください。 | 要件は上の情報を参照してください。 |
| Add rule ボタンを選択します。 | 下のボタンをクリックします。 |
WCAG 参照: 1.3.3 Sensory Characteristics（レベル A） ↗
情報を伝える画像にはすべて、内容または役割を説明する代替テキストが必要です。
- 画像が何を示し、なぜ重要かを説明します。
- 簡潔で情報のある代替テキストにします（目安は 150 文字未満）。
- 複雑な図では、周囲の本文で長い説明を補います。
- 装飾だけの画像には、空の代替テキスト（空の角括弧
![]）を使います。 - 代替テキストに「〜の画像」や「〜の写真」は入れないでください。
- SEO のためのキーワード詰め込みは避けます。
- キャプションや隣接テキストを、代替テキストで繰り返さないでください。
- ボタンやリンクなどの機能画像では、見た目ではなく操作を説明します。
| 画像の種類 | 代替テキストの書き方 |
|---|---|
| 特定の UI 要素を示すスクリーンショット | スクリーンショットの内容と目的を説明する |
| 概念を示す図 | 伝わる要点を要約する |
| 隣接テキストがあるロゴやアイコン | 重複を避けるため、空の代替テキストを使う |
| 装飾画像 | 空の代替テキスト（空の角括弧 ![]）を使う |
例:
| する | しない |
|---|---|
 |
 |
 |
 |
（装飾画像の場合） |
 |
 |
（キーワード） |
 |
（見た目の説明） |
WCAG 参照 1.1.1 Non-text Content（レベル A） ↗
追加リソース:
動画と音声には、聴覚障害のある利用者も使えるよう、キャプションとトランスクリプトが必要です。
- キャプション: 音声を含むすべての動画に、同期したキャプションを付けます。
- トランスクリプト: ポッドキャストなど音声のみのコンテンツには、テキストのトランスクリプトを用意します。
- 音声解説: 視覚情報が不可欠な動画では、重要な映像内容の音声解説を付けます。
キャプションとトランスクリプトには、次を含めます。
- すべての発話とナレーション。
- 話者が複数いる場合の話者の識別。
- 重要な効果音（例: 「ドアが閉まる」「アラート通知」）。
- 内容の理解に必要な場合の音楽の手がかり。
WCAG 参照:
分かりやすい、まっすぐな言葉を使います。認知障害のある利用者、英語を母語としない利用者、技術知識が限られる利用者を含め、すべての利用者に役立ちます。
- 短く明確な文にします（可能なときは 1 文 8〜12 語を目安にします）。
- 段落は短く区切ります（最大 3〜4 文）。
- 難しい言い回しより、簡単な語を選びます。
- 専門用語、慣用句、口語は避けます。
- 能動態と現在形を使います。
| する | しない |
|---|---|
| Cloudflare はウェブサイトを DDoS 攻撃から保護します。 | Cloudflare は分散型サービス拒否攻撃のベクターを緩和するための包括的な保護メカニズムを提供します。 |
| 設定を行うには、次の手順を完了します。 | 設定を円滑に進めるためには、次の手順を完了する必要があります。 |
WCAG 参照: 3.1.5 Reading Level（レベル AAA） ↗
初出では頭字語と略語を定義し、すべての読者に伝わるようにします。
- 初出では正式名称を書き、続けて括弧内に頭字語を置きます。
- 以降の文書内では、同じ頭字語を一貫して使います。
- 専門用語が多い文書では、用語集の提供を検討します。
| する | しない |
|---|---|
| Web Content Accessibility Guidelines（WCAG）は、アクセシブルな Web コンテンツの基準を示します。 | WCAG は、アクセシブルな Web コンテンツの基準を示します。 |
| 分散型サービス拒否（DDoS）攻撃は、トラフィックでサーバーを圧倒します。 | DDoS 攻撃は、トラフィックでサーバーを圧倒します。 |
WCAG 参照: 3.1.4 Abbreviations（レベル AAA） ↗
読者にとってなじみの薄い専門用語を使うときは、はっきりした定義を書くか、GlossaryDefinition コンポーネント を使うか、関連する用語集へリンクします。
- 初出ではインラインで定義します。
- 詳細な説明は、用語集または別ページへリンクします。
- どの用語を定義するかは、読者の技術レベルを考慮して決めます。
WCAG 参照: 3.1.3 Unusual Words（レベル AAA） ↗
関連する複数の項目は、段落ではなく箇条書きまたは番号付きリストにします。リストの方がスキャンしやすく、理解しやすいです。
- 手順や順序のある項目には番号付きリストを使います。
- 順序のない項目には箇条書きを使います。
- リスト項目の構造は揃えます。
- リストの前に、導入の文を置きます。
手順、案内、エラーメッセージは、明確で具体的、分かりやすくします。
- 入力要件を明示します（例: 日付形式と文字数制限）。
- 役立つときは例を示します。
- 何が問題で、どう直すかを説明する、明確で具体的なエラーメッセージを使います。
- 利用者向けメッセージでは、不要な専門用語を避けます。
| する | しない |
|---|---|
| 有効なメールアドレスを入力します（例: [email protected]）。 | メールを入力してください。 |
| パスワードは 12 文字以上で、数字を 1 つ含めます。 | パスワードが無効です。 |
| API キーの形式が正しくありません。32 文字で、英数字のみであることを確認してください。 | エラー: 無効なキーです。 |
WCAG 参照: 3.3.2 Labels or Instructions（レベル A） ↗
Mermaid の図やその他の視覚コンテンツでは、情報の伝達や要素の区別を色だけに頼らないでください。
- 色に加えて、ラベル、模様、形を使います。
- 図内のテキストは十分なコントラストを確保します。
- 図の近くに、要点を説明する本文を置きます。
| する | しない |
|---|---|
| ノードの種類ごとに、形とラベルを変える | 色だけでノードの種類を区別する |
| 色だけでなく名前で要素を説明する凡例を付ける | 追加の文脈なしに「緑のボックス」だけを指す |
WCAG 参照: 1.4.1 Use of Color（レベル A） ↗
表は、行と列に論理的な関係があるデータの提示にだけ使います。レイアウト目的では使わないでください。
- 列と行には、明確で説明的な見出しを付けます。
- 可能なときは、表を単純に保ちます。
- 複雑な表は、より単純な表に分割することを検討します。
-
スクリーンリーダーのすべてが表を事前に読み上げるわけではないため、表の目的を説明する完全な文で導入します。導入文の末尾はコロンまたはピリオドにできます。表の直前なら通常はコロン、導入と表の間に注記などの別の内容がある場合は通常はピリオドにします。
WCAG 参照: 1.3.1 Info and Relationships（レベル A） ↗
コード例は、スクリーンリーダーの利用者にも使え、理解しやすいものにします。
- シンタックスハイライト用に、プログラミング言語を必ず指定します。
- コード例の前に、そのコードが何をするかの文脈を置きます。
- 例では、説明的な変数名と関数名を使います。
- 複雑な箇所にはコメントを付けます。
- コード例は論理的な順にします。
可能なときは、支援技術でドキュメントをテストし、アクセシビリティを確認します。
- スクリーンリーダーでページを移動します。
- キーボード操作（Tab、Enter、矢印キー）を試します。
- 対話要素がすべてキーボードで操作できることを確認します。
- フォーカスインジケーターが見えることを確認します。
よくあるアクセシビリティの問題は自動ツールで見つけられます。ただし、自動ツールですべての問題は検出できません。
- 開発中に自動アクセシビリティチェッカーを実行します。
- 指摘された問題は人手で確認します。
- ツールでは検出できない問題は、手動テストで確認します。