同じデザイン、
まったく違う体験

このサイトでは、架空のカフェ「Cafe Horizon（カフェ・ホライズン）」を題材に、見た目は同じデザインでもアクセシビリティ（a11y）対策の有無で、 キーボード操作・スクリーンリーダー・低視力ユーザーへの体験がどう変わるかを段階的に体験できます。

体験の進め方

1. 1

   非準拠サイトからスタート

   A レベルすら満たしていない意図的に問題のあるサイトを操作してみましょう。

2. 2

   Tab キーで操作

   マウスではなく Tab / Shift+Tab / Enter キーだけで操作し、フォーカスが見えるか確認します。

3. 3

   問題点パネルを読む

   各ページ右側のパネルで、WCAG 達成基準（SC）番号付きの問題点を確認できます。

4. 4

   レベルを順に進む

   A → AA → AAA と進み、同じデザインがどう改善されていくか比較しましょう。

WCAG 2.2 レベル別デモ

ここでの A / AA / AAA は学習用の段階表示です。WCAG の適合は本来、ページ全体が該当レベル以下のすべての達成基準を満たす必要があります。