これまでセマンティックHTMLについて学んできましたが、「アクセシビリティ」って言葉をよく聞きます。これってどういう意味なんですか？
とても大切な質問だね！アクセシビリティは「誰でもWebサイトを使えるようにする」という考え方なんだ。目が見えない人、手が不自由な人、高齢者の方など、様々な状況の人がWebサイトを使えるようにHTMLを書くことが重要なんだよ。
確かに、僕たちは当たり前にマウスでクリックしたり、画面を見たりしていますが、そうじゃない人もいるんですね。
そういうこと！Webは本来「誰でも情報にアクセスできる」ために作られたものなんだ。だからこそ、HTMLを正しく書くことで、すべての人が平等にWebの恩恵を受けられるようにするのが私たちの責任でもあるんだよ。
アクセシビリティとは何か - Webを誰でも使えるものに
Webアクセシビリティとは、年齢、能力、状況に関係なく、すべての人がWebサイトを効果的に利用できるようにすることです。これは単なる「親切な配慮」ではなく、Webの本質的な価値を実現するための重要な技術です。
アクセシビリティが重要な理由を、具体的な利用者の視点から理解してみましょう。
見づらい
操作が困難
聞こえにくい
記憶に困難
アクセシビリティを実現するための具体的な技術は多岐にわたりますが、その基盤となるのが正しいHTMLマークアップです。私たちがこれまで学んできたセマンティックHTMLは、実はアクセシビリティを支える重要な技術でもあるのです。
アクセシビリティがすべての人に与える恩恵
アクセシビリティは「特別な配慮」ではありません。適切に実装されたアクセシビリティは、すべての利用者の体験を向上させます：
- スクリーンリーダー利用者 音声で正確な情報を取得できる
- キーボード利用者 マウスなしでも完全に操作できる
- モバイルユーザー 指でのタッチ操作がしやすくなる
- 高齢者 大きな文字やコントラストで見やすくなる
- 一時的な制約 腕の怪我でマウスが使えない時も安心
- 検索エンジン 構造を正確に理解してSEO効果が向上
- 開発者 保守性の高いコードを書ける
つまり、アクセシビリティを意識したHTMLは「誰にとっても使いやすいWeb」を実現する基盤技術なのです。
画像のアクセシビリティ
画像は視覚的な情報を伝える重要な要素ですが、視覚障害のある利用者には別の方法で情報を提供する必要があります。
画像が見えない人には、どうやって画像の内容を伝えるんですか？
そこで重要になるのがalt属性だよ。これは「代替テキスト」と呼ばれ、スクリーンリーダーが音声で読み上げてくれるんだ。ただし、すべての画像に同じように書けばいいわけではないんだよ。
alt属性の正しい使い方
画像の役割によって、alt属性の書き方が変わります：
情報を伝える画像には具体的な説明を書きます。
<!-- グラフや図表 -->
<img src="sales-chart.png" alt="2024年売上グラフ：1月から12月まで右肩上がりで増加">
<!-- 商品画像 -->
<img src="red-shoes.jpg" alt="赤いスニーカー、サイズ25cm、ナイキ製">装飾目的の画像には空のalt属性を指定します。
<!-- 装飾用の画像 -->
<img src="decoration-border.png" alt="">
<!-- アイコン（テキストで説明済みの場合） -->
<button>
<img src="search-icon.png" alt="">
検索
</button>alt属性を書く時のポイント
- コンテンツ画像 情報を伝える場合は具体的な説明
- 装飾画像 見た目だけの場合は
alt="" - 機能的画像 ボタンなどの場合は操作内容を説明
- 複雑な画像 グラフなどは近くに詳細な説明を配置
見出し構造の重要性
見出し（h1～h6）は、スクリーンリーダー利用者がページの構造を理解する重要な手がかりです。本の目次のように、見出しを順番に辿ることでページ全体の内容を把握できるのです。
見出しって、見た目を整えるだけじゃないんですね。
そう！スクリーンリーダーは見出しを「目次」のように使って、ページの内容をナビゲーションするんだ。だから論理的な順序で書くことがとても大切なんだよ。
論理的な見出し階層
見出しは数字の順番に書くことが重要です。h2の次にいきなりh4を使うのではなく、必ずh3を経由します。
<h1>アクセシビリティの基本</h1>
<h2>画像のアクセシビリティ</h2>
<h3>alt属性の使い方</h3>
<h4>コンテンツ画像</h4>
<h4>装飾画像</h4>
<h2>見出し構造</h2>
<h3>論理的な階層</h3>
<h2>リンクの作り方</h2><h1>アクセシビリティの基本</h1>
<h4>画像のalt属性</h4> <!-- h2を飛ばしている -->
<h2>見出し構造</h2>
<h5>階層の作り方</h5> <!-- h3を飛ばしている -->見出しを使う時のポイント
- 1ページに1つのh1 ページのメインタイトルとして使用
- 順序を守る h1→h2→h3の順番で使用
- 装飾目的で使わない 大きな文字が欲しいだけならCSSを使用
- 内容を表す 見出しの文字を読むだけで内容が分かるように
- 短くまとめる 長すぎる見出しは読みにくい
リンクのアクセシビリティ
リンクは、Webサイトの「道しるべ」のような存在です。どこに向かうのかが分からないリンクは、利用者を迷わせてしまいます。特にスクリーンリーダー利用者は、リンクの文字だけを頼りにクリックするかどうかを判断します。
「こちら」とか「詳細」みたいなリンクをよく見かけますが、それじゃダメなんですか？
そういうリンクは「リンク先の内容」がわからないんだ。スクリーンリーダーはリンクだけを一覧表示する機能があるから、「こちら」ばかりが並んでしまうと、どれがどのページなのか全然わからなくなってしまうよ。
分かりやすいリンクテキスト
リンクの文字を読んだだけで「どこに行くのか」「何ができるのか」が分かるように書きます。
<a href="contact.html">お問い合わせフォーム</a>
<a href="report.pdf">2024年度売上レポート（PDF）</a>
<a href="https://example.com">会社概要ページ</a>
<a href="signup.html">無料会員登録</a><a href="contact.html">こちら</a>
<a href="report.pdf">ダウンロード</a>
<a href="https://example.com">詳細はこちら</a>
<a href="signup.html">クリック</a>リンクを作る時のポイント
- 具体的な行き先 「お問い合わせページ」「プロフィール」など明確に
- ファイル形式を明記 PDFやWordファイルの場合は（PDF）と追記
- 外部サイトを明示 他のサイトに移動する場合は分かりやすく
- 操作内容を説明 「ダウンロード」「登録」「購入」など動作を示す
- 短すぎず長すぎず 1〜3語程度で簡潔に、でも内容は具体的に
キーボードナビゲーション
マウスが使えない利用者のために、キーボードだけでWebサイトを操作できるようにする必要があります。これは運動機能障害がある方だけでなく、マウスが故障した時や、効率的に作業したい時にも役立ちます。
キーボードだけでどうやってWebサイトを操作するんですか？
主に「Tab」キーを使って、リンクやボタンなどの操作可能な要素を順番に移動するんだ。この順序が論理的で、フォーカスが見えるようになっていることが大切なんだよ。
フォーカスって何ですか？
フォーカスは「今選択されている要素」のことだよ。キーボードで移動中に、今どの要素が選ばれているかが分からないと困ってしまうよね。だから、枠線やハイライトで現在位置を示すんだ。
フォーカスの可視化
現在選択されている要素が見てわかるようにすることが重要です。
/* フォーカス時に枠線を表示 */
button:focus,
a:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* より目立つフォーカススタイル */
.custom-focus:focus {
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
border-color: #0066cc;
}キーボード操作のポイント
- Tab順序 上から下、左から右の自然な順序で移動
- フォーカス表示 現在位置が必ず見えるようにする
- 操作可能性 すべての機能がキーボードだけで使える
- ショートカット よく使う機能にはキーボードショートカットを提供
- フォーカストラップ モーダルウィンドウ内でフォーカスが外に出ない
Tabキーを使った移動の仕組みについて理解を深めましょう。
- 要素順で制御 ブラウザはDOM上の要素の並び（ソース順）に従ってTab移動します。HTMLを論理的な順で並べるだけで自然な操作順になります。
- tabindexの注意点 通常はtabindexを使わず、正の値を避けてください。正の値は意図しない順序を生みやすいです。
- フォーカス可能な要素 a, button, input, select, textarea はデフォルトでTab対象です。必要な場合は tabindex=“0” で非標準要素を含められます。
ARIA属性の基本
ARIA（アリア）は、HTMLだけでは表現できない情報をスクリーンリーダーに伝える技術です。「Accessible Rich Internet Applications」の略で、Webページをより理解しやすくするための「追加説明」のようなものです。
ARIAって何て読むんですか？そしてなぜ必要なんですか？
「アリア」って読むんだ。HTMLだけだと、例えばアイコンだけのボタンは「何のボタンなのか」がスクリーンリーダーに伝わらないことがあるんだ。そんな時にARIAを使って「このボタンはメニューを開くボタンです」と説明するんだよ。
基本的なARIA属性
ARIAにはたくさんの属性がありますが、まずは基本的なものから覚えましょう。
- aria-label 要素に名前を付ける（ボタンの機能など）
- aria-describedby 追加説明を参照する（入力例やエラーメッセージ）
- role 要素の役割を明確にする（ボタン、見出しなど）
- aria-hidden スクリーンリーダーから隠す（装飾要素など）
<!-- アイコンボタンに名前を付ける -->
<button aria-label="メニューを開く">
<i class="fas fa-bars"></i>
</button>
<!-- 追加説明を参照 -->
<input type="password" aria-describedby="pwd-help">
<div id="pwd-help">8文字以上で入力してください</div>
<!-- 装飾要素をスクリーンリーダーから隠す -->
<span aria-hidden="true">🎉</span>
ARIA使用時のポイント
- 必要最小限に使う HTMLの標準要素で表現できる場合は不要
- 正確な情報を提供 間違った説明は利用者を混乱させる
- 一貫性を保つ 同じ機能には同じaria-labelを使用
- 定期的に確認 スクリーンリーダーで実際に確認する
- HTMLファーストで考える まずは適切なHTMLタグを選ぶ
理解度チェッククイズ
アクセシビリティについて学んだことを確認してみよう。実際のHTML作成で役立つ知識ばかりだよ。
アクセシビリティ理解度チェック
<!-- 商品画像 -->
<img src="red-sneakers.jpg" alt="①">
<!-- 装飾用の枠線画像 -->
<img src="border-decoration.png" alt="②"><!-- A: アイコンボタン -->
<button aria-label="メニューを開く">
<i class="fas fa-bars"></i>
</button>
<!-- B: パスワード入力 -->
<input type="password" aria-describedby="pwd-help">
<div id="pwd-help">8文字以上で入力</div>
<!-- C: 装飾アイコン（FontAwesome使用） -->
<span aria-hidden="true">🎉</span>
<!-- D: 通常のリンク -->
<a href="about.html" aria-label="詳細ページ">会社概要</a>まとめ
アクセシビリティって、特別なことではなくて、HTMLを正しく書くことなんですね。
その通り！今日学んだことは、すべての人にとって使いやすいWebサイトを作るための基本中の基本なんだ。一人ひとりが意識することで、Webはもっと素晴らしい場所になるよ。
alt属性や見出しの順序など、今まで何となく書いていたものに、こんなに大切な意味があったんですね。
そういうこと！これからHTMLを書くときは、「このコードは誰が見ても、どんな方法でアクセスしても理解できるかな？」と考えながら書いてみてね。それがアクセシビリティの第一歩だよ。
- alt属性 コンテンツ画像には説明、装飾画像には空文字
- 見出し構造 h1→h2→h3の論理的な順序を保つ
- リンクテキスト 「こちら」ではなく具体的な内容を記載
- フォーカス表示 キーボード操作時に現在位置が分かるように
- ARIA属性 HTMLだけでは伝えられない情報を補完
- テスト習慣 作ったページをキーボードだけで操作してみる
アクセシビリティは「思いやり」の技術です。すべての人がWebを楽しめるよう、これらの基本を大切にしていきましょう。
次のレッスンでは、HTMLページ全体の構造化について学びます。