2025年10月07日掲載
秘書：今日も、ウェブサイトの作成を頑張っている見習い君ですが、ウェブアクセシビリティの落とし穴にはまってしまったようで…。
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
気付くのが難しいウェブアクセシビリティ？！
見習い君：よし、ウェブサイトができたぞー！今回はちょっと凝ってみたんです！
師匠：おお、今日も精が出ておるな。どれどれ……ふむ、今回は擬似要素と背景画像を使っているのか。うーむ…これはな、アクセシビリティの観点から見ると、いくつか問題があるようじゃな。
見習い君：えっ、そうなんですか！？見た目はいい感じなんですけど……。どんな問題があるんですか？教えてください！
師匠：まずは擬似要素からじゃ。CSSの::beforeや::afterを使って、意味のある画像を表示しておるようじゃな？
見習い君：はい、画像に使っています！
師匠：それが問題なのじゃ。
擬似要素で表示された画像には、代替テキスト（alt属性）を設定できん。つまり、スクリーンリーダーでは読み上げられないのじゃ。
見習い君：あっ、なるほど！意味のある画像なのに、視覚に頼らないユーザには伝わらないってことですね！
師匠：その通りじゃ。意味のある画像は、「img」要素を使って、alt属性で内容を説明するのが基本じゃ。
見習い君：じゃあ、背景画像はどうなんですか？これも結構使ってますけど…。
師匠：背景画像は、基本的には装飾目的で使われることが多いから、代替テキストは不要じゃ。ただし、意味のある情報を含む背景画像なら話は別じゃ。
見習い君：なるほど、意味があるなら、やっぱり「img」 にして代替テキストを付けるべきなんですね！
師匠：そうじゃ。以前、代替テキストについて詳しく話したことがあったじゃろう？覚えておるか？
見習い君：はい！こちらの記事ですね！「代替テキスト」をもっと詳しく！‐第6回‐
師匠：さて、もう一つ大きな問題があるのじゃ。ハイコントラスト表示というものを知っておるか？
見習い君：えっと……弱視の方が使う、文字色と背景色を反転させたり、調整したりする機能ですよね？
師匠：その通りじゃ。では、今作ったウェブサイトをハイコントラストで表示してみるのじゃ。
見習い君：（カチカチカチ……）あっ！擬似要素と背景画像が真っ黒になって、何も見えなくなってしまった……！
師匠：そうじゃ。CSSで描画された要素や背景画像は、ハイコントラストモードで消えてしまうことがある。これでは、意味のある情報が失われてしまうのじゃ。
見習い君：これは大問題ですね……。どうすればいいんですか？
師匠：img要素に置き換えるなど、工夫が必要じゃ。アクセシビリティは、見た目だけでなく、すべてのユーザに情報が届くことが大切なのじゃ。
見習い君：見た目がカッコよくても、誰かにとって“見えない”なら意味がないんですね。これからは、すべての人に届くウェブを目指して、もっともっと腕を磨きます！
秘書：今回の見習い君と師匠の会話から分かるように、意味のある画像には代替テキストの付与や表示方法の工夫が必要です。特に、擬似要素や背景画像を使う際には、スクリーンリーダーやハイコントラストモードへの配慮が欠かせません。
もっと詳しく知りたい方は、こちらの達成基準もぜひご覧ください！
