KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/12th/work

ユーザビリティとアクセシビリティを高める

ユーザビリティ

現在のページのユーザビリティを向上させるために、 ページを少し改良しましょう。

授業のページへのリンク

皆さんのページが、何のために作られたのかがわかるように、 また、他の受講生との関係もわかるように、 授業のページへのリンクを作りましょう。

記事へのコメント・プロフィール・リンク集の、 各ページへのリンクの部分に、次のリンクを加えてください。

<li><a href="http://arena.hyogo-dai.ac.jp/~kawano/?Lecture/InfoDesignB2004">授業のページ</a></li>

「ページのトップへ」のリンク

コメントのページや、リンク集のページは、 量が多いために、 縦に何画面分もスクロールする必要があります。

そこで「ページのトップ（一番上）にジャンプするリンクを各コメント・カテゴリの最後に作る」ことにしましょう。
（参考: 第5回「同じページへのリンクをつくる」）

1. ページの一番上（h1要素など）に、ジャンプ用のアンカーを作る

   <a name="top">
   <h1>....</h1>
   </a>
   

2. 各コメントの最後に「トップへ」や「↑」のような、ページの一番上にジャンプするリンクをつくる

• HTMLファイル

  <div class="top_link">
  <a href="#top">↑トップへ</a>
  </div>
  

• CSSファイル

  div.top_link {
    text-align: right;
    font-size: x-small;
  }
  

アクセシビリティ

前回ノート型パソコンに導入した、 「Web Accessibility Toolbar日本語版」を使って、 アクセシビリティを改善してください。

まず、次の操作を行ってください。

• ノート型パソコンで、Internet Explorerを起動する
• 自分の作ったページを表示する

日本語特有の問題

「Web Accessibility Toolbar」のチェック機能を使って、 日本語特有の問題がないか調べます。

• 機種依存文字
  1. 「ドキュメント」→「日本語特有の問題」→「機種依存文字を表示」をクリック
  2. 結果として問題があれば、その箇所を修正
• 半角カナ
  1. 「ドキュメント」→「日本語特有の問題」→「半角カナを表示」をクリック
  2. 結果として問題があれば、その箇所を修正

色使いの問題

「Web Accessibility Toolbar」のチェック機能を使って、 色使いの問題がないか調べます。

• 第一色覚特性
  1. 「シミュレーション」→「第一色覚特性（赤/緑）の見え方」をクリック
  2. 表示された結果から、ページの内容が読みにくいのであれば、色使いを修正したり画像を差し替える
• グレースケール
  1. 「シミュレーション」→「グレースケール表示に変換」をクリック
  2. 表示された結果から、ページの内容が読みにくいのであれば、色使いを修正したり画像を差し替える

次へ進んでください。

}}