ページの書棚 - アクセシビリティ間違い探しページ

スクリーンリーダーデモページ

このページではアクセシビリティ上の問題がたっぷり詰まった「悪い例」と、アクセシビリティに配慮して作成された「良い例」を、キーボードショートカット(Ctrl+/)またはページ上部のバナーに書かれた「悪い例」・「良い例」のクリック・タップで切り替えられるようになっています。

ぜひスクリーンリーダーを使って、アクセシビリティの低い箇所がいくつあるか探してみましょう。なお、答え合わせは本ページの最下部からご覧いただけます。

フ　　ル　　ー　　ツ　　一　　覧

○リンゴ

○オレンジ

○イチゴ

○メロン

○バナナ

コメント入力:

答え合わせはこちらから▶️

本ページに隠されていた低アクセシビリティポイントは下記の通りです。

画像にだいたいテキストが設定されていない（WCAG2.2 達成基準1.1.1)
タイトル「スクリーンリーダーデモページ」に見出し要素が設定されていない(WCAG2.2 達成基準1.3.1/2.4.1)
見出し「フルーツ一覧」直下の箇条書きにリスト要素が設定されていない(WCAG2.2 達成基準1.3.1)
フォーム（テキストフィールド）とそのラベル「コメント入力」とが紐づけられて読み上げられるようになっていない(WCAG2.2 達成基準1.3.1/3.3.2)
見出し「フルーツ一覧」の単語間に空白文字が入力されている(WCAG2.2 達成基準1.3.2)
バナー部分「」悪い例」の背景色と文字色の間に4.5:1以上のコントラスト比が確保されていない(WCAG2.2 達成基準1.4.3)
リンク「サンプルリンク」をキーボード操作（Tabキー）でフォーカスすることができない(WCAG2.2 達成基準2.1.1)
ページ内リンク「メインコンテンツへジャンプ」を選択した際、フォーカスが目的の位置へ移動しない(WCAG2.2 達成基準2.1.1/2.4.4)
ページタイトルが提供されていない（WCAG2.2 達成基準2.4.2)
ページ最下部の著作権表記に表示言語を示すlang属性が設定されていない(WCAG2.2 達成基準3.1.2)

以上、10箇所でした。

皆さんはいくつ見つけ出せましたか？