Learn web development

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

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

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

開始地点

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

解凍が完了した評価サイトは次のように見えるはずです:

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

プロジェクトの概要

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

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

セマンティック HTML

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

: タグをスタイル付けする CSS ルールセレクターは、セマンティック見出しのために適切に変更する必要があります。パラグラフ要素を加えると、スタイルもより良く見えることに気がつくでしょう。

画像

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

オーディオプレイヤー

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

フォーム

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

コメント show/hide 制御

現状のコメント show/hide 制御ボタンは、キーボードからアクセスすることができません。タブキーによるフォーカス、リターンキーによる有効化という形で、キーボードをアクセシブルにすることができますか?

テーブル

現状のデータテーブルはあまりアクセシブルではありません。スクリーンリーダーのユーザーにとって行と列を関連付けることは難しく、またテーブルが何を示しているのかを明確にする概要もありません。この問題を解決するために何らかの機能を HTML に追加することはできますか?

他には?

このウェブサイトをよりアクセシブルにする2つ以上の改善アイデアを挙げることができますか?

評価

あなたが系統的なコースの一環としてこの評価に従っているのであれば、あなたの作業を教師やメンターに渡して採点してもらうことができるはずです。独学の場合は、 このエクササイズのディスカッションスレッド や Mozilla IRC の #mdn IRC チャネルで依頼することで採点ガイドを入手できます。まずはエクササイズに挑戦してください。カンニングしては何も成長しませんよ!

このモジュール内

ドキュメントのタグと貢献者

このページの貢献者: Tsuyoshi
最終更新者: Tsuyoshi,