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

使い方

1. 左のテキストエリアにチェックしたい HTML を貼り付けてください
2. プリセットボタンから「良い例」「悪い例」などのサンプルを試すこともできます
3. 右側に問題が一覧表示されます。Error（赤）・Warning（黄）・Info（青）の重要度で色分けされます
4. 各カードの「修正提案」を参考にコードを改善してみましょう

「見た目が動けばOK」ではない理由

Webサイトを作ると、つい「ブラウザで表示されてるから完成」と思いがち。 でも、目が見えない人はスクリーンリーダー（読み上げソフト）でページを「聞いて」いる。 <img> に alt がなければ「画像があるらしいけど何の画像か分からない」状態になる。

アクセシビリティは「優しさ」だけの話じゃない。 企業のWebサイトでは法律で義務化されている国もあるし、AO入試のポートフォリオで「アクセシビリティに配慮しました」と書けるのは大きなアピールポイントになる。

このツールがチェックする10項目

1. img の alt 属性欠落
2. 空の button / a 要素
3. フォーム入力に label がない
4. 見出しレベルの飛ばし（h1→h3）
5. lang 属性の欠落
6. コントラスト不足の色指定
7. tabindex の不適切な値
8. ARIA属性の誤用
9. クリック領域が小さすぎる要素
10. 自動再生メディアの検出

提出前の最終チェックに

• 情報の授業の課題提出前 — 先生が「alt属性を忘れずに」と言っていたけど、全部の画像に入れたか不安なとき。貼り付ければ漏れが一発で分かる。
• AO入試のポートフォリオ — 「Webアクセシビリティに配慮した実装」と書くなら、このツールでエラー0件を確認してから提出しよう。
• 学園祭サイトの公開前 — 不特定多数が見るサイトだからこそ、スクリーンリーダーで読める状態にしておきたい。

よくある質問

Q. 装飾用の画像にもaltは必要？

必要。ただし装飾画像の場合は alt=""（空文字）を指定する。これでスクリーンリーダーが「ここは読み飛ばしていい画像」と判断できる。altを省略するのとは意味が違う。

Q. Warning（黄色）は直さなくてもいい？

Error（赤）は必ず直すべき問題。Warningは「直した方がベター」な項目。時間があれば対応しよう。Info（青）は参考情報。

アクセシビリティとは

Web アクセシビリティとは、障害のある人や高齢者を含むすべての人が Web サイトを利用できるようにする取り組みです。 スクリーンリーダーを使う視覚障害者、キーボードのみで操作する人など、様々なユーザーに配慮した HTML の書き方が重要です。 alt 属性・label 要素・ARIA 属性などを正しく使うことで、誰もが使いやすい Web ページを作れます。

関連ツール