From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../accessibility_troubleshooting/index.html | 129 +++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/ja/learn/accessibility/accessibility_troubleshooting/index.html (limited to 'files/ja/learn/accessibility/accessibility_troubleshooting') diff --git a/files/ja/learn/accessibility/accessibility_troubleshooting/index.html b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..a43b4a509b --- /dev/null +++ b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,129 @@ +--- +title: '評価: アクセシビリティのトラブルシューティング' +slug: Learn/Accessibility/Accessibility_troubleshooting +tags: + - Accessibility + - Assesment + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Learn + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

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

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

開始地点

+ +

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

+ +

あるいは、JSBin や Glitch のようなサイトを使って試験できます。HTML, CSS, JavaScript をオンラインエディターのいずれかにペーストします。もし使っているオンラインエディターに個別の CSS/JS パネルがない場合、適当な <style> / <script> 要素内に置いて下さい。

+ +

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

+ +

+ +

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

+ +
+

注: もし行き詰まって助けを求める場合 — ページ最下部の {{anch("Assessment or further help")}} セクションを見てください。

+
+ +

プロジェクトの概要

+ +

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

+ +

色

+ +

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

+ +

セマンティック HTML

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

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

+
+ +

画像

+ +

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

+ +

オーディオプレイヤー

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

フォーム

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

コメント show/hide 制御

+ +

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

+ +

テーブル

+ +

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

+ +

他には？

+ +

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

+ +

評価とヒント

+ +

あなたの作業を教師やメンターに渡して採点してもらったり、行き詰まってヒントが欲しい場合は次のようにしてください:

+ +
    +
  1. 成果をオンラインで共有できるエディター、例えば CodePen, jsFiddle, Glitch に置きます。
    2. +
  2. 採点や手助けのための投稿を MDN Discourse forum Learning category に書いてください。投稿には次のものを(英語で)入れて下さい: +
      +
    • "Assessment wanted for Accessibility troubleshooting"のような説明的なタイトル。
      • +
    • 何を試して、どうしてほしいのかの詳細。つまり行き詰まって助けてほしいのか、採点評価してほしいのか。
      • +
    • オンラインで共有できるエディター (上記ステップ 1 で触れたもの)での例のリンク。これは身につけるとよい習慣です — コーティングの問題を、他の人がコードを見ずに助けるのは困難です。
      • +
    • 助けてもらいたい問題が見つかるような、タスクや評価のページのリンク
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

このモジュール内

+ + -- cgit v1.2.3-54-g00ecf