評価: アクセシビリティのトラブルシューティング

このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。

前提知識:	HTML、CSS、JavaScript に対する基本的な理解、このコースの前回までの記事に対する理解。
目的:	アクセシビリティの基礎に対する基本的な知識をテストすること。

開始地点

評価を始めるために、例を含むファイルの ZIP を取得してください。コンピューターのいずれかのディレクトリーにそのコンテンツを展開してください。

それ以外に、CodePen、JSFiddle、Glitchなどのオンラインエディターを使用することもできます。

展開が完了した評価サイトは次のように見えるはずです。

完了した評価サイトのスクリーンショット。検索入力にはプレースホルダーテキストと送信するボタンがありますが、ラベル付けはされていません。

この評価の開始時点であなたがサイトを表示したとき、いくつかの違いや問題を見つけることでしょう。これは主にマークアップ中の違いが原因であり、CSS が正しく適用されずにスタイリングの問題を引き起こしています。心配しないでください。以降の節でそれらの問題を修正します！

メモ: 行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。

このプロジェクトでは、熊の「事実」に関する記事を表示する架空の自然のサイトが表示されます。現状では、これはいくつものアクセシビリティの問題を持っています。あなたの仕事は現状のサイトを見て、全力を尽くして修正し、以下の質問に答えることです。

テキストは現在のカラースキームのせいで読みづらくなっています。現状のカラーコントラスト (テキスト/背景) をテストして、テストの結果を報告し、割り当てられた色を変更して修正できますか？

コンテンツはまだあまりアクセシブルではありません。スクリーンリーダーを使ってナビゲートしようとしたとき、何が起こるか報告してください。
スクリーンリーダーのユーザーがナビゲートしやすいように、記事のテキストを変更できますか？
サイトのナビゲーションメニュー (<div class="nav"></div> で囲まれた部分) は正しい HTML 意味づけ要素の中に入れることでよりアクセシブルになったかもしれません。どれを変更する必要がありますか？変更してください。

メモ: タグをスタイル付けする CSS ルールセレクターは、意味づけされた見出しのために適切に変更する必要があります。段落要素を加えると、スタイルもより良く見えることに気がつくでしょう。

現状の画像はスクリーンリーダーのユーザーにとってアクセシブルではありません。修正できますか？

<audio> プレイヤーは聴覚障害者にとってアクセシブルではありません。それらのユーザーのために何らかのアクセシブルな代替手段を加えることができますか？
<audio> プレイヤーは、HTML で音声に対応していない古いブラウザーを使用しているユーザーにとってアクセシブルではありません。彼らに対してどのように音声にアクセスさせることができますか？

トップにある検索フォームの <input> 要素はラベルとともに使用できるかもしれませんが、表示されるテキストを追加するとデザインを悪化させる可能性がありますし、視覚に問題のないユーザーにとってはあまり必要ありません。スクリーンリーダーにのみアクセシブルなラベルをどうやって追加すればいいでしょう？
コメントフォームの中の 2 つの <input> 要素は表示されるテキストラベルを含んでいますが、それらのラベルと明確に関連付けられていません。どのように関連付けますか？いくつかの CSS ルールも修正しなければいけない点に注意してください。