Accessibility
画像altを情報の役割に合わせて書く
altは画像の説明文ではなく、その場で画像が果たしている役割の代替テキストです。装飾なら空、情報なら意味、リンクなら遷移先を伝えます。
ui.design: image-altui.design: axe-image-alt
まず確認する症状
- 意味のある画像にaltがない。
- 装飾画像に冗長な説明が入り、読み上げが長くなる。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- 画像情報に依存した説明は、支援技術利用者へ伝わりません。
- スクリーンショットや図解の意味がHTML本文にないと、AIや検索にも参照されにくくなります。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
img altの有無
リンク画像の代替目的
本文中の画像説明
装飾画像の扱い
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
装飾/情報/リンク画像の分類
スクリーンショットの本文説明
CMS入力ルール
修正方法
最小修正
情報画像にaltを付ける
画像が伝える判断材料を短く書きます。装飾画像は空altにします。
推奨修正
複雑な図は本文でも説明する
スコア表やスクリーンショットの要点は、画像外のテキストにも置きます。
さらに改善
画像生成時のルールにする
CMSやコンポーネントでalt必須/装飾指定を分けます。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06装飾画像は空alt、情報画像はその場の判断に必要な意味、リンク画像は遷移先や操作目的を伝えている。
- 07図、グラフ、スクリーンショットの重要情報は画像外の本文にも要約されている。
コーディングエージェント向け修正指示
目的: 意味のある画像に役割ベースのaltを追加し、装飾画像は空altにしてください。スクリーンショットの重要情報は近くの本文にも要約してください。 追加確認: 画像ごとに『なくても意味が通るか』『クリック対象か』『本文に同じ情報があるか』を確認してaltを決めてください。
参考資料
よくある失敗
- すべての画像にファイル名やSEOキーワードだけを入れる。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。