Webアクセシビリティの具体例7選！やりがちミスを分かりやすく解説

こんにちは、ジーピーオンライン（＠gpol_tw）のフロントエンドエンジニア、うえまつです！

2024年から施行された障害者差別解消法の改正を背景に、Webアクセシビリティ（ウェブアクセシビリティ）への取り組みを強化する企業が着実に増えてきました。​​

これに伴い、Webサイトの制作・運用において、アクセシビリティを考慮した実装の重要性が高まっています。しかし、運用を進める中で、サイトの品質を保つためのチェック項目に、思わぬ抜け漏れや人が気付きにくい「やりがちミス」が生じることも少なくありません。

本記事では、日々の制作や更新業務の中で具体的に注意すべきアクセシビリティの落とし穴を、実務での経験をもとに整理しました。忙しい現場でもすぐに取り入れられるよう、今すぐ実践できる7つの改善事例をわかりやすく解説します。

アクセシビリティ改善で見落とされがちな視点

制作現場では、デザインや機能の実装に意識が向きがちです。その結果、ユーザー（利用者）の多様な利用環境や、スクリーンリーダーなどの支援技術の動作にまで配慮が行き届きにくくなります。

アクセシビリティは「正しく実装する」ことだけが目的ではなく、「ユーザーがどう使うか」を想像することが大切です。見た目には問題がないように見えても、キーボード操作やスクリーンリーダーの利用時に、ユーザーがストレスを感じてしまうような実装になっているケースは多々あります。

アクセシビリティの改善を進めるには、以下の3つの視点を意識しましょう。

1. ユーザーの操作状況を想定する
   マウス操作に限らず、キーボードや音声入力など、さまざまな操作方法を想定して実装します。
2. 支援技術の挙動を確認する
   スクリーンリーダーや拡大機能など、支援技術を実際に動かして確認します。
3. 運用フェーズでの見直しを習慣化する
   新しいページや機能を追加する際には、予期せぬ不具合やアクセシビリティ上の障壁が生じやすくなります。リリース後も、更新やコンテンツ追加のたびにアクセシビリティを再確認することが重要です。

アクセシビリティ改善を始めるための重要なステップは、ユーザーの視点に立って確認することです。

アクセシビリティの基本的な考え方や実践方法については、以下の記事でも詳しく紹介しています。「これから取り組みを始めたい」「基礎から整理したい」という方は、ぜひ参考になさってください。

【関連記事】Webアクセシビリティとは？制作現場で押さえるポイントをずばり解説！【前編】

【関連記事】Webアクセシビリティとは？マークアップで押さえるポイントをずばり解説！【後編】

すぐに実践できるアクセシビリティ具体例7選

WCAG (Web Content Accessibility Guidelines) 2.1解説書の基準を参考に、具体的な改善事例を7つご紹介します。

1. ALT属性は画像の役割に応じて入れる
2. HTMLタグは「意味」で選ぶ
3. コントラスト比は操作時の状態も確認する
4. フォーカス移動は「ユーザー目線」で最適化する
5. フォーカス順序は視覚的な流れと一致させる
6. 視覚だけに頼らず「意図」を明示する
7. ズームや文字拡大も「快適さ」を保つ設計にする

1：ALT属性は画像の役割に応じて入れる

画像にALT属性を設定することは基本ですが、「とりあえず入れておけばOK」と考えるのは危険です。画像の役割に応じて適切に扱うことで、スクリーンリーダー利用者の理解度や体験が大きく変わります。

装飾目的の画像は空ALTを指定

デザイン演出など、意味を持たない画像には alt=""（空ALT）を設定します。スクリーンリーダーが不要な読み上げをおこなわないため、ユーザーが本来の情報に集中できます。

情報を伝える画像は、内容を簡潔に説明

ロゴやバナー、図表など、コンテンツ理解に関わる画像には、内容が的確に伝わる説明文を付けましょう。「装飾か情報か」を判断したうえで、シンプルかつ的確に書くことが理想です。

画像内にテキストが含まれている場合も、内容が直接情報に関係する場合のみALTに反映します。

運用ポリシーに合わせた柔軟な対応を

案件によっては、イメージ写真などにもALT記載を求めるレギュレーションが存在します。ガイドラインや運用ルールを確認しつつ、目的に応じた実装を心がけましょう。

参考：達成基準 1.1.1: 非テキストコンテンツを理解する

2：HTMLタグは「意味」で選ぶ

HTMLタグは、単に見た目を整えるためのものではなく、内容の「意味」を伝える役割があります。特にスクリーンリーダーのような支援技術を利用するユーザーにとって、タグの構造は情報の理解に直結します。

見た目だけで<div>や<span>といった汎用的なタグを使ってしまうと、本来の意味が正しく伝わらない可能性があるため、それぞれのHTMLタグが持つ「意味」を意識したマークアップが不可欠です。

<b>要素と<strong>要素の使い分け

<b>要素と<strong>要素は、アクセシビリティの観点から適切な使い分けが重要です。

• <b>要素：視覚的な強調のみを目的とし、特別な意味づけはありません。
• <strong>要素：文脈上、重要な情報であることを示します。警告や注意喚起など、内容の意味を強調したい箇所で使用するのが適切です。

特に、音声読み上げ環境では、<strong>が「重要」として扱われることがあるため、適切な使い分けがユーザー体験を左右します。

リストは<ul><ol><dl>要素を使用

リスト構造を組むために安易に<div>要素を多用すると、スクリーンリーダーなどの支援技術に構造が正しく伝わりません。

<ul><ol><dl>といった適切なリストタグを使用することで、グループの区切りや項目数を正確に認識させ、ユーザーに明確な情報を伝えられます。

<div>要素で組んだリスト

<div>要素のみでリストを構成すると、スクリーンリーダーにリスト構造であることが正しく伝わらず、リストの項目数やグループ構造といった重要な情報が欠落し、コンテンツの理解を妨げる原因となります。

<section class="l-sec l-sec--md">
  <h3>誤ったコード</h3>
  <div class="sample-list">
    <div class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample01</p>
    </div>
    <div class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample02</p>
    </div>
    <div class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample03</p>
    </div>
      <div class="sample-list__item">
        <div class="sample-list__img"></div>
        <p>sample04</p>
      </div>
  </div>
</section>

<ul>要素で組んだリスト

リストタグ<ul>要素を使用することで、スクリーンリーダーは「グループリスト4項目」のように、リストの項目数やグループ情報を明確に読み上げ、アクセシビリティが向上します。

<section class="l-sec l-sec--md">
  <h3>正しいコード</h3>
  <ul class="sample-list">
    <li class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample01</p>
    </li>
    <li class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample02</p>
      </li>
      <li class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample03</p>
    </li>
    <li class="sample-list__item">
      <div class="sample-list__img"></div>
      <p>sample04</p>
    </li>
  </ul>
</section>

参考：H48: リスト又はリンクのグループに、ol 要素、ul 要素、dl 要素を用いる

3：コントラスト比は操作時の状態も確認する

WCAG 2.1の達成基準 1.4.3（コントラスト・最低限、レベルAA）では、文字と背景のコントラスト比は最低でも4.5:1を推奨しています。色のコントラスト比は、初期表示だけでなくホバーやフォーカス時も必ずチェックしましょう。

特にボタンやリンクは、操作後に文字や背景のコントラストが低下しがちです。より多くのユーザーが情報を正確に認識し、コンテンツを操作するために、どの操作状態においても読みやすさ・視認性を維持できるデザインにすることが重要です。

※18pt以上もしくは14pt以上の太字（18pt＝24px、14pt＝約18.5pxに相当）のような、大きな文字は、少なくとも3:1のコントラスト比を確保する。

参考：達成基準 1.4.3: コントラスト (最低限)を理解する

4：フォーカス移動は「ユーザー目線」で最適化する

キーボード操作によってリンクやボタンをクリックした際に、フォーカスが適切かつ自然な位置に移動するかどうかを確認することが重要です。

フォーカス移動の設定が不十分だと、キーボード操作をおこなうユーザーはページ内で自分の現在地を見失ってしまい、操作に大きなストレスを感じることになります。

キーボード操作でも迷わない設計を

特にページ内リンクや「ページトップへ戻る」ボタンなど、操作後に画面表示が大きく変わる要素については、クリック（Enterキー押下）後に意図した位置へフォーカスを移動させる設定が不可欠です。

フォーカス未設定の例

「ページトップへ戻る」ボタンをクリックすると、画面は最上部に戻っても、キーボード操作のフォーカス位置はボタンのあった場所など、直前の要素に残ってしまいます。この状態では、次のキーボード操作でユーザーが予期しない場所へ遷移することになり、操作に混乱が生じます。

適切なフォーカス設定の例

「ページトップへ戻る」ボタンをクリックすると、フォーカスがページの最上部にあるロゴに移動します。フォーカスが意図した位置へ移動し、ユーザーは迷うことなく操作を再開できます。

参考：達成基準 2.4.3: フォーカス順序を理解する

5：フォーカス順序は視覚的な流れと一致させる

キーボード操作（Tab移動など）によるフォーカス移動の順序は、画面上に表示されている要素の並び順（視覚的な流れ）と一致させましょう。コード上の順序と視覚的な順序が食い違うと、ユーザーは直感的に操作できず、操作性が低下します。

特に、PCとスマートフォンのように表示環境によって要素の並びが変わる場合は注意が必要です。ユーザーが迷うことなく操作できるように、フォーカスの順序は常に「自然な流れ」を意識し、一貫性を保つようにしましょう。

参考：達成基準 2.4.3: フォーカス順序を理解する

6：視覚だけに頼らず「意図」を明示する

視覚だけで伝える動作については、aria-labelや非表示テキストを利用して、何が起こるかを補足することが重要です。

別ウィンドウで開くリンクは補足を入れる

特に「別ウィンドウで開く」アイコンが付いたリンクなどは、見た目だけだと「新しいウィンドウが開く」と気付かず混乱することもあります。

視覚的な表示だけでなく、visually-hidden（非表示テキスト）やaria-label属性を使って、「別ウィンドウで開きます」などの案内を追加しましょう。操作後の変化をユーザーに伝えることで、多様なユーザーの誤操作防止に役立ちます。

補足情報がないリンク

音声情報では、リンク先が別タブで開くことが伝わりません。

<a href="/recruit/" target="_blank" class="blank">
  <span>採用情報</span>
 </a>

操作後の動作が補足されているリンク

visually-hidden（非表示テキスト）やaria-labelを入れることで、スクリーンリーダーが「採用情報 別ウィンドウで開きます」と読み上げをおこないます。

 <a href="/recruit/" target="_blank" class="blank">
  <span>採用情報</span>
  <span class="visually-hidden">別ウィンドウで開きます</span>
 </a>

または

aria-label
 <a href="/recruit/" target="_blank" class="blank" aria-label="採用情報別ウィンドウで開きます">
  <span>採用情報</span>
 </a>

参考：達成基準 2.4.6: 見出し及びラベルを理解する

7：ズームや文字拡大も「快適さ」を保つ設計にする

WCAG 2.1の達成基準 1.4.4 では、ユーザーがテキストサイズを200％まで拡大しても、情報や機能が損なわれないことが求められています。

ユーザーがズーム機能やテキスト拡大機能を使用した際に、表示が適切に変更され、レイアウトが崩れないように設計しましょう。

em・remを使って柔軟な拡大表示に対応

文字サイズの指定はpxの絶対値ではなく、emやremの相対単位で指定しましょう。ユーザーの環境や設定に合わせた柔軟な拡大・縮小が可能になります。

line-heightや余白（マージン、パディング）も相対単位で指定することで、ズーム時でもレイアウトが崩れず、読みやすさを維持できます。レスポンシブデザインや改行時の表示も考慮し、適切に表示されるように設計することが重要です。

ブラウザ標準機能で確認

実装後には、必ずGoogle Chromeなどのブラウザ標準のズーム機能やテキスト拡大設定（例：Chromeの「設定」>「デザイン」から調整）を使用して、表示崩れがないか目視で確認しましょう。

参考：達成基準 1.4.4: テキストのサイズ変更を理解する

まとめ：できるところから実践する

日々のWebサイト運用や更新業務の中で、具体的に注意すべきアクセシビリティの落とし穴を、7つの具体例でご紹介しました。

Webアクセシビリティは、単に技術的なガイドライン基準を満たすだけでなく、多様なユーザーの利用環境を想像し、誰もがストレスなく快適に情報へアクセスするための配慮です。

アクセシビリティ改善は、一度にすべてを完璧にする必要はありません。まずは「できるところから着実に実行していく」ことが大切です。ご紹介した改善ポイントを、ぜひ今日から実践に取り入れてみてください。

会社案内・サービス資料を30秒でダウンロード

ジーピーオンラインの会社紹介・制作実績・プロジェクトの進め方を1冊に集約。Web制作パートナー比較検討に必要な情報をメールアドレスご入力後すぐにお届けします。

資料請求フォームへ