最初にどの障壁から直しますか？
規格の全項目を一度に満たそうとするより、読者が作品へ到達できない、内容を理解できない、操作できない箇所から直します。創作サイトでは、画像内だけの情報、見出しのない長文、色だけの分類、キーボードで開けないメニューが主要な確認点です。
イラストの代替テキストはどう書きますか？
画像を見られない人へ、同じ鑑賞体験を文章で完全再現するのではなく、ページの目的に必要な情報を伝えます。人物紹介なら外見より先に人物名と行動、作品見本なら場面と読者が判断する要素を書きます。
| 画像の役割 | 代替テキストに含める | 避けること |
|---|---|---|
| 人物紹介 | 人物名、姿勢、重要な表情・持ち物 | 本文と同じプロフィール全文 |
| 作品の一場面 | 誰が何をしている場面か | 画像にない解釈や結末 |
| 相関図 | 図の目的。詳細は近くの文章で補う | 長大な関係一覧をaltへ詰める |
| 装飾 | 空の代替テキスト | 「飾り画像」と読み上げさせる |
長文作品の見出しと段落をどう整えますか？
ページのH1は一つにし、H2、H3を見た目の大きさではなく内容の階層で使います。段落を極端に長くせず、章・場面・補足を見出しまたは区切りで示します。
- ページの主題をH1一つで示す
- H2の下にH4を直接置かず、順番を保つ
- 見た目を太くするためだけに見出しを使わない
- 表の前後に、何を比較する表か説明する
- 章送り・前後移動のリンク文言を具体的にする
リンク文言はどう書きますか？
「こちら」「詳しく」だけでは、リンクを一覧で読んだときに行き先が分かりません。作品名と行動を含め、リンクの前後を読まなくても目的が伝わる文言にします。
次の作品名・人物名は、書き方を示すための仮の例です。
| 分かりにくい文言 | 具体的な文言 | 伝わること |
|---|---|---|
| こちら | 第一話「雨の日の郵便屋」を読む | 作品名と行動 |
| 詳しく見る | 主人公ソウマの人物紹介を見る | 対象ページ |
| 次へ | 第2話「届かなかった一通」へ | 読む順番 |
キーボードだけで何を確認しますか？
- Tabで移動するヘッダーから主要リンク、フォームまで順に進めるか確認する。
- 現在位置を見るフォーカスの輪郭が背景に埋もれず見えるか確認する。
- EnterまたはSpaceで操作するメニュー、ボタン、折りたたみをマウスなしで使えるか見る。
- 閉じ込めを確認するモーダルやメニューから戻れなくならないか確認する。
- 本文へ移動する長い共通ナビを飛ばすリンクが機能するか見る。
色と動きに頼らないため何を変えますか？
味方と敵、公開中と休止中、必須と任意を色だけで分けず、文字や形も併用します。背景アニメーションやページ遷移は、端末の「動きを減らす」設定を尊重し、本文を読むために必須にしません。
- 状態を色とラベルの両方で示す
- 画像上の文字へ十分な背景または別の本文を用意する
- 自動再生・点滅・大きな視差効果を避ける
prefers-reduced-motionで不要な動きを減らす- 200%拡大でも本文と操作が重ならないか確認する
公式資料では何を確認できますか？
W3C Web Accessibility Initiativeでは、画像、ページ構造、キーボードなどのチュートリアルと、WCAGの標準を公開しています。実装時は該当する最新の公式資料を確認してください。
自分で確認できる範囲と、追加検証が必要な範囲
画像、人物紹介、相関図、長文作品を持つ小規模な公開サイトなら、まず自分で主要な入口を点検できます。ただし、法的適合や、あらゆる支援技術での動作をこの入門だけで判断することはできません。
まず自分で確認する
- 画像の主要情報を文章でも受け取れる
- 見出しとリンクだけでも読む順番が分かる
- キーボードで主要な操作を完了できる
専門家・当事者の検証を加える
- 生活や手続きに不可欠なサービスを提供する
- 複雑なフォームや独自の操作部品がある
- 適合性や法的要件を正式に評価する必要がある
このページでは、最初の5項目に絞ります
この記事はWCAGの全項目を列挙するのではなく、イラスト、相関図、長文という創作サイト固有の障壁を5項目で点検する入門です。W3C WAIの一次資料と、本サイトの見出し、フォーカス、reduced motion実装を根拠にしています。
この記事で扱わないこと: 画像ファイルの圧縮や転送量。ここでは情報の意味、構造、リンク、操作可能性、色と動きの代替を扱います。
よくある質問
すべての画像に詳しい代替テキストが必要ですか？
画像の役割で決めます。人物・相関図・作品見本など内容を伝える画像には必要な情報を書き、雰囲気だけの装飾画像は空の代替テキストにします。同じ説明を画像の近くに本文で書いている場合は重複を避けます。
イラストの代替テキストには何を書きますか？
ページの目的に必要な範囲で、人物、行動、重要な表情や持ち物を書きます。髪や服の全色を毎回列挙するのではなく、その画像が人物紹介・場面紹介・操作ボタンのどれを担うかに合わせます。
色のコントラストはどう確認しますか？
文字と背景を実際の配色で確認し、淡い色同士や画像上の文字を避けます。W3Cの基準や検査ツールを参考にしつつ、拡大表示や明るい画面でも読めるか目視します。
個人サイトでもキーボード操作を確認する必要がありますか？
必要です。リンク、メニュー、フォームなど主要な操作をTabキーで移動し、現在位置が見え、EnterまたはSpaceで操作できるかを確認します。