Webマンガを公開するときは、画像にaltを付けるだけでなく、コマの順序が読み上げ順と一致すること、画像を見なくても重要な筋や情報をたどれること、スマートフォンで拡大・操作しやすいことを確認します。長いストーリーは、短いaltに全部詰め込まず、必要に応じてテキスト版や要約を近くに用意します。これは公開品質を高める実務策であり、チェックリストだけでアクセシビリティ適合を保証するものではありません。
Webマンガは「絵」だけでなく、読む順序と情報を届ける
マンガは、コマの並び、人物の反応、セリフの関係がそろって一つの意味になります。画像が読み込めない人や、スクリーンリーダーを使う人にとって、画像一枚ごとの説明だけでは、話のつながりや結論が追いにくい場合があります。
W3CのWCAG 2.2では、意味のある非テキストコンテンツに目的に応じたテキスト代替を提供する考え方が示されています。また、意味のある順序があるコンテンツは、その順序がプログラム上も判別できる必要があります。マンガの掲載形式に合わせて、画像の代替テキストとページ全体の読み順をセットで設計しましょう。基準の詳細はWCAG 2.2「Non-text Content」と「Meaningful Sequence」を参照してください。
公開形式ごとの確認ポイント
| 掲載形式 | 確認すること | 補う方法 |
|---|---|---|
| 1コマずつ画像で掲載 | HTML上の並びが、意図した読順と一致しているか | 重要な場面を短く説明するaltと、必要なセリフ・結論のテキストを用意 |
| 1ページを一枚の画像で掲載 | 細かなセリフや注記が画像の中だけに閉じていないか | 画像の要点を示すaltに加え、筋や手順を追えるテキスト版を検討 |
| 縦長の画像・連続画像 | スマートフォンで文字が小さくなりすぎず、順番に読めるか | 幅に合わせて縮小し、必要なら分割掲載やテキスト版を併用 |
| ページ送りのビューア | キーボードだけでも進む・戻る操作と現在位置が分かるか | 目的の分かるボタン名、現在ページの表示、手動操作を用意 |
公開前に確認する5項目
- 読む順番を決める：コマや画像をHTML上でも同じ順に並べます。横並びや複雑な段組みを使う場合は、画面表示と読み上げ順がずれていないか確認します。
- altは画像の役割に合わせる：各画像の要点を簡潔に伝えます。装飾だけの画像は空のaltにし、ストーリー全編を一つのaltへ詰め込まないようにします。
- 重要な内容をテキストでもたどれるようにする：画像内の注意事項、手順、結論が理解に必要なら、近くの本文や開閉できるテキスト版にも掲載します。テキスト版は画像と同じ物語・情報を正確に反映させます。
- スマートフォンと拡大表示を試す：吹き出しや注記が読めるか、横スクロールを強いられないか、文字と背景が見分けられるかを実機で確認します。文字を画像に固定する必要があるかも見直します。
- 操作できるか確かめる：ページ送り、拡大、リンクなどがある場合、キーボードで操作でき、ボタンの目的が分かるか確認します。自動で進む表示を使うなら、停止方法も検討します。
画像の中に文章を配置するより、同じ内容をHTMLテキストとして表示できるなら、テキストを使うほうが拡大や読み上げに対応しやすくなります。画像内の文字が必要なデザインでも、内容の要点をページ上に別途示す方法があります。W3CのImages Tutorialは、情報画像・装飾画像・機能を持つ画像などの役割に応じた扱いを説明しています。
短いaltとテキスト版を使い分ける
altは画像の役割を伝える短い説明、テキスト版は物語や手順を順に追うための代替情報、と役割を分けると読みやすくなります。たとえば、コマ画像には「担当者が説明を聞き、申請書の不足に気づく」のように場面の要点を付け、テキスト版では必要なセリフと展開を順番にまとめます。これは説明用の架空例です。
同じ説明をaltと直後の本文に重複して何度も読み上げさせないよう、ページ全体で調整してください。マンガ画像ごとのaltの判断基準と例は、マンガ画像のaltテキストの書き方で詳しく紹介しています。
公開前の簡易テスト
- 画像を見ずにページを読み、マンガの要点や結論が分かる。
- キーボードでリンクやビューアを操作でき、フォーカス位置が分かる。
- スマートフォンでコマの順序を追え、重要な文字を読める。
- 画像のaltが内容・装飾・リンクの役割に合っている。
- 画像とテキスト版の内容に食い違いがない。
チェックリストは確認の出発点です。実際の利用者、支援技術、端末や表示環境によって困り方は異なります。適合をうたう必要がある案件では、対象とする基準・レベルを明確にし、専門的な検証を別途行ってください。スマートフォン表示の確認項目はスマホ向けマンガLPの公開前チェックも参考になります。
よくある質問
マンガの全セリフをaltに書く必要がありますか？
すべてをaltへ詰め込むのではなく、画像の役割を短く説明し、筋や重要な情報を別のテキストで補う方法を検討します。必要な代替方法は、マンガの内容と掲載方法によって異なります。
マンガを一枚の画像で掲載してはいけませんか？
一律に不可とは言えませんが、細かい文字が読みにくくなったり、順序や重要情報を伝えにくくなったりすることがあります。読みやすさを確認し、必要に応じて分割表示やテキスト版を組み合わせてください。
この記事のチェック項目だけでWCAGに適合できますか？
できません。記事はマンガ公開時の実務確認を整理したもので、ページ全体や対象基準に対する適合判定ではありません。適合を確認する場合は、該当するWCAGの達成基準と検証方法を確認してください。
まとめ：マンガの内容を、画像の外にもつなぐ
Webマンガは、絵の魅力だけでなく、読む順序、画像の説明、重要な情報を補うテキスト、操作のしやすさまで整えると、より多くの環境で内容を追いやすくなります。公開形式に合わせて、alt・本文・テキスト版の役割を分け、端末と操作方法を変えて確認しましょう。
参考情報
- W3C WAI: Understanding Success Criterion 1.1.1 Non-text Content
- W3C WAI: Understanding Success Criterion 1.3.2 Meaningful Sequence
- W3C WAI: Images Tutorial