WCAG 2.1 チェックリスト

<p style="color: #999999; background-color: #ffffff;">
  薄いグレーテキスト（コントラスト比 5.4:1）
</p>

<p style="color: #333333; background-color: #ffffff;">
  濃いグレーテキスト（コントラスト比 12.6:1、AA/AAA両対応）
</p>

<div onclick="handleClick()">
  クリック
</div>

<button onclick="handleClick()">
  クリック
</button>

<!-- tabindex="0" で Tab キーの対象に含める -->
<div tabindex="0" role="button">カスタムボタン</div>

<!-- tabindex="-1" で Tab キーから外す -->
<div tabindex="-1">プログラムからのみアクセス</div>

<div>
  <div>買い物かごに追加</div>
  <div>5個入り</div>
  <div>1,980 円</div>
</div>

<article>
  <h2>商品名</h2>
  <p>内容量：5個入り</p>
  <p>価格：1,980 円</p>
  <button aria-label="買い物かごに追加">追加</button>
</article>

<!-- aria-label：要素の用途を説明 -->
<button aria-label="ナビゲーションメニューを開く">☰</button>

<!-- aria-labelledby：別の要素でラベル付け -->
<h2 id="dialog-title">ユーザー設定</h2>
<div role="dialog" aria-labelledby="dialog-title">...</div>

<!-- aria-describedby：詳細説明を追加 -->
<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">8文字以上、大文字・数字を含む</p>

/* フォーカスを非表示にしている */
button:focus {
  outline: none;
}

button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* または */
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

<div>
  <div>タイトル</div>
  <div>
    <div><a href="#">リンク 1</a></div>
    <div><a href="#">リンク 2</a></div>
  </div>
  <div>本文...</div>
</div>

<header>
  <h1>タイトル</h1>
  <nav>
    <ul>
      <li><a href="#">リンク 1</a></li>
      <li><a href="#">リンク 2</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>本文...</article>
</main>

<img src="chart.png" alt="画像">
<img src="product.jpg" alt="pic">
<img src="icon.svg" alt=""><!-- 装飾画像だが alt がない -->

<!-- グラフの場合：何を示しているか、主要データを記載 -->
<img src="chart.png" alt="2026年1月〜9月の売上推移：3月にピーク達成">

<!-- 商品画像の場合：商品の特徴を記載 -->
<img src="product.jpg" alt="赤いスニーカー、サイズ27cm">

<!-- 装飾画像の場合：alt=""でスクリーンリーダーから隠す -->
<img src="icon.svg" alt="">

<!-- 「詳細」だけでは何の詳細か分からない -->
<a href="/product/123">詳細</a>

<!-- div をボタンに見立てている -->
<div onclick="submit()" style="cursor: pointer; background: blue; color: white;">
  送信
</div>

<!-- リンクのテキストで目的地が明確 -->
<a href="/product/123">商品「赤いスニーカー」の詳細ページを見る</a>

<!-- またはvisually hidden text -->
<a href="/product/123">
  詳細
  <span class="sr-only">：赤いスニーカー</span>
</a>

<!-- button 要素でボタンとして明確 -->
<button type="submit">送信</button>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* スクリーンリーダーと :focus-visible 時には表示 */
.sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

<div id="search-results">
  <!-- JavaScript で検索結果を挿入 -->
</div>

<!-- aria-live="polite" で新しいコンテンツを読み上げ -->
<div id="search-results" aria-live="polite" aria-label="検索結果">
  <!-- JavaScript で検索結果を挿入 -->
</div>

<!-- aria-live の種類 -->
<!-- aria-live="polite" - 現在の読み上げ完了後に通知（推奨） -->
<!-- aria-live="assertive" - 即座に中断して通知（エラーのみ） -->
<!-- aria-live="off" - 通知しない -->