KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/12th/work のバックアップ(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/12th/work へ行く。
  • 1 (2005-01-07 (金) 02:28:39)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

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

ユーザビリティ

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

授業のページへのリンク

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

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

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

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

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

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

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

   <a name="top">
   <h1>....</h1>
   </a>
   </pre>
   +各コメントの最後に「トップへ」や「↑」のような、ページの一番上にジャンプするリンクをつくる
   -HTMLファイル
   #pre(novervatim){{
   <div class="top_link">
   <a href="#top">↑トップへ</a>
   </div>
   </pre>
   -CSSファイル
   #pre(novervatim){{
   div.top_link {
     text-align: right;
     font-size: x-small;
   }
   </pre>
   
   **アクセシビリティ [#a1a1ec36]
   前回ノート型パソコンに導入した、
   「Web Accessibility Toolbar日本語版」を使って、
   アクセシビリティを改善してください。
   
   まず、次の操作を行ってください。
   -ノート型パソコンで、Internet Explorerを起動する
   -自分の作ったページを表示する
   -
   
   ***日本語特有の問題 [#q71f9cee]
   「Web Accessibility Toolbar」のチェック機能を使って、
   日本語特有の問題がないか調べます。
   
   -機種依存文字
   ++「ドキュメント」→「日本語特有の問題」→「機種依存文字を表示」をクリック
   ++結果として問題があれば、その箇所を修正
   -半角カナ
   ++「ドキュメント」→「日本語特有の問題」→「半角カナを表示」をクリック
   ++結果として問題があれば、その箇所を修正
   
   
   ***色使いの問題 [#k37598a1]
   「Web Accessibility Toolbar」のチェック機能を使って、
   色使いの問題がないか調べます。
   
   -第一色覚特性
   ++「シミュレーション」→「第一色覚特性（赤/緑）の見え方」をクリック
   ++表示された結果から、ページの内容が読みにくいのであれば、色使いを修正したり画像を差し替える
   -グレースケール
   ++「シミュレーション」→「グレースケール表示に変換」をクリック
   ++表示された結果から、ページの内容が読みにくいのであれば、色使いを修正したり画像を差し替える
   
   
   
   次へ進んでください。
   ----
   #navi2(Lecture/InfoDesignB2004/12th,prev,toc,next)