無料アクセシビリティチェッカー

このツールのチェック内容

• 代替テキスト

  スクリーンリーダーが読み上げられる代替テキストのない画像、画像ボタン、その他のテキスト以外のコンテンツ。

• フォームのラベル

  アクセシブルなラベルがなく、支援技術が何のための項目か伝えられない入力欄、チェックボックス、選択メニュー。

• 色のコントラスト

  文字色が背景色に近すぎて、WCAG AA のコントラスト比を満たさないテキスト。

• リンクとボタンの名前

  読み取れる名前のないリンクやボタン。多くはアイコンだけのボタンです。

• ARIA

  無効な、その要素では使えない、または必要な部分が欠けている ARIA のロールや属性。

• ページの構造

  ページの言語、ページタイトル、ランドマークなど、WCAG と axe-core のベストプラクティスによる構造上のルール。

• 影響を受ける要素の数

  各問題（最大 25 種類）について、不合格の要素の数と、見つかる場所の例。

チェックの仕組み

よく見つかる問題

• コントラストの低いテキスト

  薄いグレーの文字、色付きボタン上の文字、ラベルの代わりに使われたプレースホルダーのテキスト。

• alt テキストのない画像

  ロゴ、商品写真、リンクとして使われている画像。

• ラベルのないフォーム項目

  プレースホルダーのテキストだけに頼った検索ボックスやニュースレター登録欄。

• アイコンだけのボタンやリンク

  スクリーンリーダー向けのテキストがない、メニュー、閉じる、SNS、カートのアイコン。

• ページの言語が指定されていない

  html 要素に lang 属性がないため、スクリーンリーダーが間違った発音を使う可能性があります。

• ARIA の誤った使い方

  間違った要素に付けられたロールや、存在しない ID への参照。

直し方

1. 1

   文字を濃くするか背景を明るくする

   通常の文字は 4.5:1 以上、大きな文字は 3:1 以上のコントラスト比を目指しましょう。ブラウザの開発者ツールにあるコントラストチェッカーで比率を確認できます。

2. 2

   画像の目的を伝える alt テキストを追加する

   文脈の中で大事なことを書きましょう。アイコンのリンクなら「アイコン」ではなく「価格表をダウンロード」のように。純粋に装飾目的の画像には alt="" を使います。

3. 3

   すべての項目に見えるラベルを付ける

   入力欄に関連付けた label 要素を使いましょう。デザイン上どうしても表示できない場合は aria-label を使いますが、見えるラベルは誰にとっても役立ちます。

4. 4

   アイコンボタンに名前を付ける

   視覚的に非表示のテキストか aria-label を追加しましょう。例：aria-label="Open menu"

5. 5

   ARIA よりネイティブの HTML を優先する

   本物の button 要素や link 要素は、もともとアクセシブルです。ARIA は、その役割に合うネイティブの要素がない場合にだけ追加しましょう。

6. 6

   手動でもテストする

   キーボードだけで、また NVDA や VoiceOver などのスクリーンリーダーでページを使ってみて、自動ルールでは見つけられない問題を探しましょう。