path: root/files/ja/learn/accessibility/accessibility_troubleshooting/index.html

---
title: '評価: アクセシビリティのトラブルシューティング'
slug: Learn/Accessibility/Accessibility_troubleshooting
tags:
  - Accessibility
  - Assesment
  - Beginner
  - CSS
  - CodingScripting
  - HTML
  - JavaScript
  - Learn
  - WAI-ARIA
translation_of: Learn/Accessibility/Accessibility_troubleshooting
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>

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

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提知識:</th>
   <td>基本的なコンピューターの知識、HTML、CSS、JavaScript に対する基本的な理解、<a href="/ja/docs/Learn/Accessibility">このコースのこれまでの記事</a>への理解。</td>
  </tr>
  <tr>
   <th scope="row">学習目標:</th>
   <td>アクセシビリティの基礎に対する基本的な知識をテストすること。</td>
  </tr>
 </tbody>
</table>

<h2 id="Starting_point" name="Starting_point">開始地点</h2>

<p>評価を始めるために、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">例を含むファイルの ZIP</a> を取得してください。あなたのコンピューターのいずれかのディレクトリーにそのコンテンツを解凍してください。</p>

<p>あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> のようなサイトを使って試験できます。HTML, CSS, JavaScript をオンラインエディターのいずれかにペーストします。もし使っているオンラインエディターに個別の CSS/JS パネルがない場合、適当な <code>&lt;style&gt;</code> / <code>&lt;script&gt;</code> 要素内に置いて下さい。</p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>

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

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

<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2>

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

<h3 id="Color" name="Color">色</h3>

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

<h3 id="Semantic_HTML" name="Semantic_HTML">セマンティック HTML</h3>

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

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

<h3 id="The_images" name="The_images"><font>画像</font></h3>

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

<h3 id="The_audio_player" name="The_audio_player"><font>オーディオプレイヤー</font></h3>

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

<h3 id="The_forms" name="The_forms"><font>フォーム</font></h3>

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

<h3 id="The_showhide_comment_control" name="The_showhide_comment_control"><font>コメント show/hide 制御</font></h3>

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

<h3 id="The_table" name="The_table"><font>テーブル</font></h3>

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

<h3 id="Other_considerations" name="Other_considerations"><font>他には？</font></h3>

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

<h2 id="Assessment_or_further_help" name="Assessment_or_further_help"><font>評価とヒント</font></h2>

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

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

<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p>

<h2 id="このモジュール内">このモジュール内</h2>

<ul>
 <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></li>
 <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li>
 <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></li>
 <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">WAI-ARIA の基本</a></li>
 <li><a href="/ja/docs/Learn/Accessibility/Multimedia" rel="nofollow">アクセシブルなマルチメディア</a></li>
 <li><a href="/ja/docs/Learn/Accessibility/Mobile" rel="nofollow">モバイルアクセシビリティ</a></li>
 <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">アクセシビリティのトラブルシューティング</a></li>
</ul>