こんにちは、道洋行東京支店Web制作スタッフのT.Y.です。
これまで、Webアクセシビリティの達成基準について、1.1.1から1.2.5までを個別に解説してきました。
今回はその内容を振り返り、ポイントをまとめて整理していきたいと思います。
もくじ
画像やアイコンなどの非テキスト情報には、必ず代替テキスト(alt属性)を設定する必要があります。これにより、視覚障害者がスクリーンリーダーを使って内容を把握でき、また画像が表示されない環境でも情報が伝わります。装飾目的の画像は空のaltを設定することで不要な読み上げを避けられます。
対応例: 商品画像に「赤いTシャツを着た男性の写真」といった説明を記載する。装飾用の罫線画像には alt=""
を設定する。
Webアクセシビリティ達成基準「1.1.1 非テキストコンテンツ」の話
収録済みの音声のみ、映像のみのコンテンツには、同じ内容を別の手段で提供する必要があります。音声の場合は文字原稿、映像の場合は文章による説明を用意すれば、聴覚や視覚に制約のある利用者にも情報が伝わります。
対応例: ポッドキャスト配信に全文のテキスト原稿を添付する。映像のみの案内動画に「動画の内容説明」ページを用意する。
Webアクセシビリティ達成基準「1.2.1 音声だけ及び映像だけ」の話
収録済みの動画にはキャプション(字幕)を付ける必要があります。聴覚障害のある方はもちろん、電車内など音を出せない環境の利用者にも有効です。正確なキャプションをつけることで、ユーザーの理解度が大きく向上します。
対応例: 商品紹介動画に日本語字幕を追加する。英語ナレーション付き動画には日本語字幕をつけ、より幅広いユーザーに対応する。
Webアクセシビリティ達成基準「1.2.2 キャプション(収録済み)」の話
映像だけでは伝わらない情報について、音声解説やテキストによる代替コンテンツを用意する必要があります。登場人物の表情や画面に映る文字などは、映像だけでは理解できない場合があるため、補足説明を加えることが求められます。
対応例: ドラマ仕立てのPR動画に音声解説を追加する。映像資料には別途「内容説明PDF」を用意する。
Webアクセシビリティ達成基準「1.2.3 音声解説、またはメディアに対する代替(収録済)」の話
ライブ配信やオンラインイベントでは、可能な範囲でリアルタイムのキャプションを提供することが求められます。完全な精度でなくても、文字情報が補完されることで聴覚障害者や外国語話者も参加しやすくなります。
対応例: ウェビナーで自動文字起こし機能を利用し、同時に字幕を表示する。講演会では速記者を配置し、参加者に字幕を提供する。
Webアクセシビリティ達成基準「1.2.4 キャプション(ライブ)の達成基準」の話
収録済みの映像コンテンツには、必要に応じて音声解説を提供することが推奨されます。映像の動きや重要な場面を言葉で説明することで、視覚障害者も映像の意図を理解できます。特に学習教材や案内動画では有効です。
対応例: 製品紹介動画で「この場面では新しいパッケージデザインが映し出されています」と音声で補足する。教育動画では「講師が黒板に数式を書いています」と説明を追加する。
Webアクセシビリティ達成基準「1.2.5 音声解説(収録済み)の達成基準」の話
ここまで「1.1.1〜1.2.5」の達成基準を整理しました。非テキストコンテンツや音声・映像に関する配慮は、Webアクセシビリティの基盤です。対応例を一つずつ取り入れるだけでも利用者の体験は大きく改善されます。ぜひ今後のWeb制作やコンテンツ運用に役立ててください。
当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。