AllyCheck Research

よく見られるアクセシビリティ問題

アクセシビリティ診断では以下のような問題が多く検出されます。各問題の原因と修正方法を解説しています。

カテゴリ: アクセシビリティ問題数: 5件

目次

フォームラベル不足
aria-hidden配下のフォーカス要素
iframe title不足
nested-interactive
landmark構造不足

フォームラベル不足

label-missing

フォーム要素（input、select、textareaなど）にラベルが関連付けられていない問題です。placeholder属性だけではアクセシブルな名前として不十分です。

影響: スクリーンリーダーがフォーム要素の目的を伝えられず、視覚障害のあるユーザーがフォームを正しく操作できません。

問題のあるコード

HTML

<input type="text" placeholder="名前">

<input type="text" placeholder="名前">

修正後のコード

HTML

<label for="name">名前</label>
<input type="text" id="name">

<label for="name">名前</label>
<input type="text" id="name">

aria-hidden配下のフォーカス要素

aria-hidden-focus

aria-hidden="true" が設定された要素の中にフォーカス可能な要素（ボタン、リンクなど）がある問題です。

影響: キーボード操作でフォーカスできるが、スクリーンリーダーからは認識されないため、ユーザーが操作不能な状態に陥ります。

問題のあるコード

HTML

<div aria-hidden="true">
  <button>閉じる</button>
</div>

<div aria-hidden="true">
  <button>閉じる</button>
</div>

修正後のコード

HTML

<div aria-hidden="true">
  <button tabindex="-1">閉じる</button>
</div>

<div aria-hidden="true">
  <button tabindex="-1">閉じる</button>
</div>

iframe title不足

iframe-title

iframe要素にtitle属性がない問題です。title属性がないと、埋め込みコンテンツの内容が何であるか判断できません。

影響: スクリーンリーダーユーザーがiframeの内容を把握できず、ページ内のナビゲーションが困難になります。

問題のあるコード

HTML

<iframe src="https://example.com/map"></iframe>

<iframe src="https://example.com/map"></iframe>

修正後のコード

HTML

<iframe src="https://example.com/map" title="所在地の地図"></iframe>

<iframe src="https://example.com/map" title="所在地の地図"></iframe>

nested-interactive

nested-interactive

インタラクティブ要素（ボタン、リンクなど）が入れ子になっている問題です。HTML仕様では、インタラクティブ要素の中に別のインタラクティブ要素を配置することは禁止されています。

影響: 支援技術が正しく操作対象を認識できず、ユーザーが意図しない動作を引き起こす可能性があります。

問題のあるコード

HTML

<a href="/page">
  <button>詳しく見る</button>
</a>

<a href="/page">
  <button>詳しく見る</button>
</a>

修正後のコード

HTML

<a href="/page" class="btn">詳しく見る</a>

<a href="/page" class="btn">詳しく見る</a>

landmark構造不足

landmark-region

ページのコンテンツがlandmarkリージョン（header、nav、main、footerなど）に含まれていない問題です。セマンティックなHTML要素を使用せず、divのみで構成されているケースが該当します。

影響: スクリーンリーダーユーザーがページ構造を把握しにくく、目的のコンテンツへの移動が困難になります。

問題のあるコード

HTML

<div class="header">ヘッダー</div>
<div class="content">メインコンテンツ</div>
<div class="footer">フッター</div>

<div class="header">ヘッダー</div>
<div class="content">メインコンテンツ</div>
<div class="footer">フッター</div>

修正後のコード

HTML

<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>

<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>

自分のサイトを診断する

自分のウェブサイトのアクセシビリティを簡単に確認することができます。
URLの入力により診断できます。

AllyCheckで無料診断