スクリーンリーダーが「画像、画像、画像」と読み上げるだけのページ——視覚障害者にとって、そのUIは情報ゼロと同じです。
よくある失敗パターンは「alt属性を設定しているが、内容が意味をなさない」ことです。alt="image001.jpg"（ファイル名をそのまま）、alt="写真"（何の写真かわからない）、alt="クリックしてください"（ボタンのテキストをaltに書く）——これらはすべて、スクリーンリーダーユーザーに情報を届けられていない失敗例です。
さらに深刻なのは、カスタムUIコンポーネントにARIAが実装されていないケースです。<div>で作ったボタンはスクリーンリーダーに「ボタン」として認識されません。<div>で作ったタブはタブとして認識されません。視覚的には美しいUIでも、スクリーンリーダーには「意味のないdivの集まり」として読み上げられます。
1. 原則の定義
代替テキスト・ARIA（Alt Text & ARIA）とは、画像・アイコン・カスタムUIコンポーネントなど、視覚的な情報をスクリーンリーダーが正確に読み上げられるよう、alt属性・ARIAロール・ARIAラベルを適切に設定し、すべてのユーザーに同等の情報を届ける原則。
本質は「視覚的な情報を、非視覚的な手段でも伝えること」です。画像・アイコン・グラフ・カスタムUIコンポーネントは、視覚的には意味を持ちますが、スクリーンリーダーには「何か」としか認識されません。alt属性とARIAは、視覚的な情報を「言葉」に変換し、スクリーンリーダーユーザーに同等の体験を届けるための橋渡しです。
2. いつ使うか（適用場面）
特に重要になるケース
- 情報を伝える画像: 商品画像・グラフ・図解など、内容が重要な画像には、その内容を説明するaltテキストを設定する。「商品の写真」ではなく「赤いスニーカー、サイズ26cm、Nike Air Max 2024」のように具体的に。
- 装飾的な画像: 背景パターン・区切り線・装飾的なイラストなど、情報を持たない画像には
alt=""（空のalt）を設定し、スクリーンリーダーに読み飛ばさせる。 - アイコンボタン: テキストのないアイコンボタン（×ボタン・ハンバーガーメニューなど）には、
aria-labelでボタンの目的を説明する。aria-label="メニューを閉じる"など。 - カスタムUIコンポーネント:
<div>や<span>で作ったドロップダウン・タブ・スライダーなどには、role・aria-expanded・aria-selectedなどのARIA属性を設定し、スクリーンリーダーに正しい役割と状態を伝える。
トレードオフが起きる場面
- altテキストの長さ: 詳細すぎるaltテキストは、スクリーンリーダーユーザーにとって冗長になる。「何を伝えるべきか」を考え、簡潔かつ正確に記述する。
- ARIAの過剰使用: ネイティブHTML要素（
<button>・<input>・<nav>）はARIAなしでも正しく認識される。ARIAはネイティブHTML要素で対応できない場合にのみ使用する（「ARIAを使わない方が良い場合もある」）。
3. なぜ重要か（設計判断の核）
altテキストとARIAは「アクセシビリティ対応」ではなく、「すべてのユーザーへの情報の平等」だ。
設計判断の基準
- 「この画像・アイコン・コンポーネントを目で見ずに使うとしたら、何が必要か？」→ その答えがaltテキスト・ARIAラベルに書くべき内容。
- 「この画像は情報を伝えているか、それとも装飾か？」→ 情報を伝えるなら内容を説明するalt。装飾なら
alt=""。優先順位の考え方
- 1. 情報を伝える画像のaltテキスト（最優先）: 商品画像・グラフ・図解など、内容が重要な画像のaltが空または不適切なら、即刻修正する。
- 2. アイコンボタンのaria-label: テキストのないアイコンボタンは、
aria-labelなしではスクリーンリーダーに「ボタン」としか読み上げられない。- 3. カスタムコンポーネントのARIAロール:
<div>で作ったUIコンポーネントには、適切なroleと状態管理ARIAを設定する。例外条件
- 装飾的な画像（背景・区切り線など）は
alt=""で読み飛ばさせる。altを省略するとファイル名が読み上げられる場合があるため、必ずalt=""を明示する。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
これがないと、スクリーンリーダーユーザーは情報を得られません。
理想ライン（Better - できると強い/プロの品質）
「読み上げられる」を超えて「意味が伝わる」状態です。
5. UI例
同じ「アイコンボタン」でも、ARIAラベルの有無でスクリーンリーダーユーザーの体験は大きく変わります。
改善プロセス
- アイコンボタンに
aria-labelを追加する:<button>✕</button>→<button aria-label="ダイアログを閉じる">✕</button>。これだけでスクリーンリーダーがボタンの目的を正確に読み上げるようになる。 - 情報を伝える画像のaltを具体的にする:
alt="商品画像"→alt="赤いスニーカー、Nike Air Max 2024、サイズ26cm"。画像を見ずに内容が理解できる説明を書く。 - 装飾的な画像には
alt=""を設定する: 背景・区切り線・装飾的なイラストにはalt=""を明示し、スクリーンリーダーに読み飛ばさせる。
6. 関連リンク
- 関連リファレンス（理論）: なし（アクセシビリティ固有の技術基準）
- 用語集（定義）: アクセシビリティ, WCAG, インクルーシブデザイン
- 関連するUI原則（横）: キーボード操作 (Keyboard Navigation), フォーカス管理 (Focus Management), コントラストと可読性 (Contrast & Readability)
7. まとめ
今日から直せる一手
担当しているサービスの画像にalt属性があるか確認してください。altが省略されている・alt="image.jpg"のようなファイル名になっている場合は、今日中に画像の内容を説明するテキストに修正してください。
チームに共有するなら一言 「altテキストは『SEO対策』ではない。スクリーンリーダーユーザーへの、画像の内容を伝える唯一の手段だ。」
