2026年4月16日
HTML アクセシビリティと aria属性とは？
ARIA（エーリア）は Accessible Rich Internet Applications の略で、スクリーンリーダーなどの支援技術に追加情報を提供するHTML属性群です。
視覚的なデザインだけでは伝わらない情報を、aria属性を使ってコードに埋め込むことで、誰でも使いやすいウェブページが作れます。
aria-label：要素の説明を追加する
アイコンだけのボタンなど、テキストがない要素に説明を追加します。
<!-- アイコンボタンに説明を追加 -->
<button aria-label="メニューを開く">☰</button>
<button aria-label="検索">🔍</button>
<button aria-label="閉じる">✕</button>💡 divとspanの違いで基礎を確認できます。
aria-hidden：スクリーンリーダーから隠す
装飾的なアイコンなど、読み上げ不要な要素を隠します。
<!-- 装飾アイコンは読み上げ不要 -->
<span aria-hidden="true">🎉</span>
<span>おめでとうございます！</span>aria-live：動的な更新を通知する
JavaScriptで動的に更新されるコンテンツ（エラーメッセージ・通知など）をスクリーンリーダーに通知します。
<!-- 更新があったとき自動で読み上げる -->
<div aria-live="polite" id="status"></div>
<!-- 緊急の通知（すぐに読み上げる） -->
<div aria-live="assertive" id="error"></div>🔗 あわせてブロック要素とインライン要素もチェックしてみましょう。
role属性：要素の役割を明示する
<!-- divをボタンとして使う場合（非推奨だが必要な場合） -->
<div role="button" tabindex="0" aria-label="送信">送信</div>
<!-- ナビゲーション -->
<nav role="navigation" aria-label="メインナビゲーション">
<!-- ... -->
</nav>💡 基本はセマンティックHTMLを使おう：
ボタンには <button>、リンクには <a> を使うのが基本です。aria属性は、セマンティックタグだけでは表現できない場合に補助的に使います。
📖 詳しくはHTMLで画像を表示する方法で解説しています。
アクセシビリティを高める具体的な方法
ウェブページのアクセシビリティを高めるために、今日からできることを紹介します。
方法1：画像にalt属性を必ず書く
imgタグには必ずalt属性をつけましょう。alt属性は画像の説明文です。スクリーンリーダーがこのテキストを読み上げます。「画像」「写真」のような意味のない説明ではなく、「校庭で遊ぶ生徒たち」のように具体的に書きます。装飾目的の画像にはalt=""（空のalt）を指定します。
方法2：見出しタグを正しい順番で使う
h1、h2、h3を正しい順番で使いましょう。スクリーンリーダーのユーザーは、見出しを使ってページの構造を把握します。h1の次にいきなりh3を使うと、構造がわかりにくくなります。
方法3：色だけで情報を伝えない
「赤い文字は必須項目」のように色だけで意味を伝えると、色覚に特性がある人には伝わりません。色に加えて「*」マークや「必須」の文字も表示しましょう。
方法4：フォームにlabelタグを使う
入力欄の説明にはlabelタグを使いましょう。labelのfor属性とinputのid属性を一致させると、スクリーンリーダーが「この入力欄は何のためか」を正しく読み上げます。
方法5：キーボードだけで操作できるようにする
マウスが使えない人もいます。Tabキーでリンクやボタンを移動でき、Enterキーで実行できるようにしましょう。CSSの:focus擬似クラスで、フォーカスされた要素がわかるようにスタイルを当てます。
方法6：十分なコントラストを確保する
背景色と文字色のコントラスト（明暗の差）が低いと、文字が読みにくくなります。WCAG（ウェブコンテンツアクセシビリティガイドライン）では、コントラスト比4.5:1以上が推奨されています。
アクセシビリティチェックの方法
自分のページのアクセシビリティを確認する方法を紹介します。
方法1：キーボードだけで操作してみる
マウスを使わずに、Tabキーとenterキーだけでページを操作してみましょう。すべてのリンクやボタンにたどり着けるか確認します。
方法2：画像を非表示にしてみる
ブラウザの設定で画像を非表示にして、alt属性のテキストだけでページの内容がわかるか確認します。
方法3：ブラウザの拡張機能を使う
「axe DevTools」や「WAVE」などの無料の拡張機能を使うと、アクセシビリティの問題を自動で検出してくれます。
方法4：スクリーンリーダーを試す
WindowsにはNarrator、MacにはVoiceOverというスクリーンリーダーが標準で入っています。実際に使ってみると、視覚に頼らない人がどのようにページを利用しているかがわかります。
なぜアクセシビリティが大切なのか
アクセシビリティは「特別な人のための配慮」ではありません。誰もが一時的に障害を持つ可能性があります。腕を骨折してマウスが使えない、明るい屋外でスマホの画面が見にくい、騒がしい場所で音声が聞こえない。こういった状況は誰にでも起こります。
アクセシビリティを意識して作ったページは、結果的にすべての人にとって使いやすいページになります。最初から完璧を目指す必要はありません。できることから少しずつ取り組んでいきましょう。
アクセシビリティに配慮したサイトは、検索エンジンからも高く評価されます。スクリーンリーダーが読みやすいHTMLは、検索エンジンのクローラーにとっても理解しやすいからです。つまり、アクセシビリティを改善することは、SEO対策にもなります。ユーザーにも検索エンジンにも優しいサイトを目指しましょう。また、企業のウェブサイトではアクセシビリティ対応が法律で義務付けられている国もあります。今のうちから意識しておけば、将来プロとして働くときにも役立つスキルになります。
まとめ
- ✅ aria-label：テキストのない要素に説明を追加
- ✅ aria-hidden：装飾要素をスクリーンリーダーから隠す
- ✅ aria-live：動的な更新をスクリーンリーダーに通知
- ✅ role：要素の役割を明示する
- ✅ まずセマンティックHTMLを使い、aria属性は補助的に使う
HTMLの基礎はHTML入門で復習できます。セマンティックHTMLの詳細はセマンティックタグ入門を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLセマンティックタグ入門 — セマンティックHTMLの詳細
- HTMLで画像を表示する方法 — alt属性の書き方
- HTMLフォームの作り方 — フォームのアクセシビリティ
- HTMLリンクの作り方 — リンクテキストの書き方
- Webアクセシビリティとは？ — アクセシビリティ全般