Webアクセシビリティとは？中高生向けにわかりやすく解説

アクセシビリティとは？

アクセシビリティ（accessibility）とは「誰でも使いやすい」という意味です。Webアクセシビリティとは、障害のある人・高齢者・さまざまな環境の人が、ウェブサイトを問題なく使えるようにする取り組みです。

たとえば、次のような人がウェブを使っています。

• 目が見えない・見えにくい人（スクリーンリーダーで読み上げて使う）
• 色覚に特性がある人（特定の色の組み合わせが見分けにくい。日本人男性の約5%）
• 手が不自由な人（マウスを使わずキーボードだけで操作する）
• 高齢者（文字が小さいと読みにくい。ボタンが小さいと押しにくい）
• 一時的な障害がある人（腕を骨折した、明るい屋外で画面が見にくいなど）

アクセシビリティを意識したウェブサイトを作ることは、すべての人に優しいウェブを作ることです。特別な技術は必要なく、HTMLを正しく書くだけで大部分は対応できます。

なぜアクセシビリティが重要なの？

• 多くの人に使ってもらえる：日本の障害者は約1,000万人以上。高齢者を含めると、何らかの不便を感じている人はさらに多い。アクセシブルなサイトはより多くの人に届きます。
• SEOにも有利：alt属性・見出し構造・テキストの充実はSEOにも効果がある。検索エンジンは画像を「見る」ことができないので、alt属性のテキストを頼りにしています。
• 法律・ガイドライン：日本でも2024年から障害者差別解消法の改正により、ウェブアクセシビリティへの対応が求められるようになりました。企業サイトでは対応が必須になりつつあります。
• プロとして必要なスキル：エンジニアとして働くうえで、アクセシビリティの知識は必須になりつつある。採用面接でも聞かれることが増えています。
• 一時的な障害にも対応：腕を骨折してマウスが使えない、明るい屋外で画面が見にくいなど、誰でも一時的に「障害」を経験します。アクセシビリティはすべての人のためのものです。

💡 GitHub Pagesで公開して、自分のサイトのアクセシビリティをチェックしてみましょう。

今すぐできるアクセシビリティ対応

① 画像にalt属性をつける

スクリーンリーダーは画像を読み上げられません。alt 属性に画像の説明を書くと、読み上げソフトが代わりに読み上げます。

<!-- NG：altなし -->
<img src="cat.jpg">

<!-- OK：altあり -->
<img src="cat.jpg" alt="白い猫が窓辺で日向ぼっこしている写真">

② 見出しタグを正しく使う

h1→h2→h3の順番を守ることで、スクリーンリーダーがページ構造を正しく読み上げられます。見出しレベルを飛ばす（h2の次にいきなりh4を使う）のはNGです。見出しは「ページの目次」のような役割を果たすので、論理的な階層構造を意識しましょう。

③ ボタンにaria-labelをつける

アイコンだけのボタンには、aria-label 属性で説明を追加します。

<button aria-label="メニューを開く">☰</button>

④ 色だけで情報を伝えない

「赤いテキストはエラー」のように色だけで情報を伝えると、色覚に特性がある人には伝わりません。アイコンやテキストも一緒に使いましょう。たとえば、エラーメッセージには赤い色に加えて「⚠️ エラー：」というテキストも表示します。フォームの必須項目も、赤い「*」だけでなく「（必須）」というテキストを添えましょう。

⑤ キーボードで操作できるようにする

Tabキーでフォーカスが移動できるか、Enterキーでボタンが押せるかを確認しましょう。マウスが使えない環境（スクリーンリーダー利用者など）でも操作できることが重要です。

フォーカスが当たっている要素がわかるように、:focus スタイルを消さないようにしましょう。outline: none を安易に使うと、キーボードユーザーが現在位置を見失います。

⑥ フォームにラベルをつける

入力欄には必ず <label> タグを関連付けましょう。スクリーンリーダーが「この入力欄は何を入力する場所か」を読み上げてくれます。

<!-- NG：ラベルなし -->
<input type="text" placeholder="名前">

<!-- OK：labelで関連付け -->
<label for="name">名前</label>
<input type="text" id="name">

🔗 あわせてポートフォリオの作り方もチェックしてみましょう。

アクセシビリティのチェック方法

自分のサイトがアクセシブルかどうかを確認する方法を紹介します。

• キーボードだけで操作してみる：マウスを使わずにTabキーとEnterキーだけでページを操作できるか試す。フォーカスが見えるか、すべてのリンクやボタンにたどり着けるかを確認しましょう。
• 画像のalt属性を確認する：すべての画像に適切な説明文がついているか。装飾目的の画像には alt=""（空のalt）を指定します。
• コントラスト比を確認する：文字色と背景色のコントラスト比が4.5:1以上あるか（Chrome DevToolsで確認可能）。薄いグレーの文字は読みにくいので注意。
• 見出しの階層を確認する：h1→h2→h3の順番が正しいか（h2の次にいきなりh4はNG）。見出しレベルを飛ばすとスクリーンリーダーのユーザーが混乱します。
• axe DevToolsで自動チェック：Chrome拡張機能「axe DevTools」をインストールすると、アクセシビリティの問題を自動で検出できます。開発者ツールの「axe」タブから実行できます。

📖 セマンティックHTMLで正しい文書構造を学びましょう。

💡 HTML入門ガイドで基礎を確認できます。

なぜアクセシビリティが重要なのか

アクセシビリティは「障害のある人のため」だけではありません。以下のような場面でも役立ちます。

• スマホで片手操作しているとき：ボタンが小さすぎると押しにくい
• 電車の中で音が出せないとき：動画に字幕があれば内容がわかる
• 日差しが強くて画面が見にくいとき：コントラストが高ければ読める
• SEO対策：検索エンジンもアクセシビリティの良いサイトを評価する

つまり、アクセシビリティを改善するとすべてのユーザーにとって使いやすいサイトになります。Webアクセシビリティの国際基準「WCAG」では、レベルA（最低限）からレベルAAA（最高）まで3段階あり、まずはレベルAを目指しましょう。alt属性の設定、キーボード操作対応、十分なコントラスト比の確保——この3つだけでも大きな改善になります。完璧を目指す必要はなく、できることから少しずつ取り組みましょう。推薦入試のポートフォリオでも「アクセシビリティに配慮しました」と書けると高評価です。

まとめ

アクセシビリティを意識したコードを書く習慣をつけると、より多くの人に使ってもらえるウェブサイトが作れます。

今日からできるアクセシビリティ改善チェックリスト

自分のサイトで以下を確認してみましょう。1つでも改善すれば、アクセシビリティが向上します。

1. すべての <img> タグに alt 属性があるか？
2. 見出しタグ（h1〜h6）の階層が正しいか？（h2の次にh4を使っていないか）
3. リンクテキストが「ここをクリック」ではなく、リンク先の内容を表しているか？
4. フォームの入力欄に <label> が関連付けられているか？
5. Tabキーだけでページ内のすべてのリンク・ボタンにアクセスできるか？
6. 文字色と背景色のコントラスト比が十分か？（薄いグレーの文字は避ける）

これらはすべてHTMLの書き方を少し変えるだけで対応できます。特別なツールや技術は必要ありません。「正しいHTMLを書く」ことが、最も効果的なアクセシビリティ対応です。1つずつ改善していけば、自然とアクセシブルなコードが書けるようになります。アクセシビリティに配慮したサイトは、結果的にSEOにも強く、すべてのユーザーにとって使いやすいサイトになります。「誰かのため」ではなく「みんなのため」の取り組みです。まずは自分のサイトで上のチェックリストを1つずつ確認してみましょう。小さな改善の積み重ねが、大きな違いを生みます。アクセシビリティは「完璧にする」ものではなく「少しずつ良くしていく」ものです。今日1つ改善すれば、昨日より良いサイトになっています。継続的に改善していくことが大切です。アクセシビリティの知識は、エンジニアとしてのキャリアでも必ず求められるスキルです。今のうちに基礎を身につけておきましょう。HTMLを正しく書くだけで、アクセシビリティの大部分は対応できます。