以下のデモページは、a11ylintの検査機能をテストするために作成されたものです。 各ページは実在しそうなWebサイトを模しつつ、WCAG 2.2の特定の達成基準に違反するパターンを意図的に埋め込んでいます。 赤いNGラベルと解説で、どの箇所がどの基準に違反しているかを確認できます。 緑のOKラベルは、アクセシブルな実装例を示しています。
テキスト / コンテンツ系NGパターン
ECサイト風ページ。センサリー情報依存、曖昧なリンク文言、色のみの情報伝達、コントラスト不足、ラベルなしフォーム、言語指定の不一致など7種類のNGパターンを収録。
画像 / ビジュアル系NGパターン
ニュースポータル風ページ。alt属性なし/空/不適切、低コントラスト画像テキスト、色のみチャート、赤のみエラー表示、画像内小テキスト、リンク画像のalt不足など8種類のNGパターンとNG画像5点を収録。
DOM / 構造系NGパターン
管理画面風ページ。ランドマーク不足、見出しレベルスキップ、テーブルのscope/caption欠落、名前なしボタン、キーボード操作不能タブ、ラベル不一致フォーム、フォーカストラップなしモーダル、ホバー限定ツールチップ、ライブリージョンなし通知など9種類のNGパターンを収録。
地図 / インタラクティブ系NGパターン
東京観光スポットガイド風ページ。キーボード操作不可、テキスト代替なし、色のみのマーカー区別、低コントラストテキスト、スクリーンリーダー非対応、アクセシブルでないズームコントロール、スキップリンクなし、ホバー限定表示、自動アニメーションなど10種類のNGパターンを収録。
地図 / インタラクティブ系OKパターン
東京観光スポットガイド風ページ。キーボードナビゲーション対応、構造化テキスト代替、形状で区別するマーカー、ハイコントラスト切替、スクリーンリーダーへのライブ通知、アクセシブルなズームコントロール、スキップリンク、適切なタッチターゲットなど8つのアクセシビリティベストプラクティスを実装。