KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/12th/work の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2004/12th/work へ行く。

*ユーザビリティとアクセシビリティを高める [#v10ba9c2]

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

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

記事へのコメント・プロフィール・リンク集の、
各ページへのリンクの部分に、次のリンクを加えてください。
 <li><a href="http://arena.hyogo-dai.ac.jp/~kawano/?Lecture/InfoDesignB2004">授業のページ</a></li>


***「ページのトップへ」のリンク [#zf5bd7ce]
コメントのページや、リンク集のページは、
量が多いために、
縦に何画面分もスクロールする必要があります。

そこで「''COLOR(red):ページのトップ（一番上）にジャンプするリンクを各コメント・カテゴリの最後に作る''COLOR(black):」ことにしましょう。&br;
（参考: [[第5回「同じページへのリンクをつくる」>Lecture/InfoDesignB2004/5th/anchor]]）

+ページの一番上（h1要素など）に、ジャンプ用のアンカーを作る
#pre(novervatim){{
COLOR(blue):<a name="top">
<h1>....</h1>
COLOR(blue):</a>
</pre>
}}
+各コメントの最後に「トップへ」や「↑」のような、ページの一番上にジャンプするリンクをつくる
-HTMLファイル
#pre(novervatim){{
COLOR(blue):<div class="top_link">
COLOR(blue):<a href="#top">↑トップへ</a>
COLOR(blue):</div>
</pre>
}}
-CSSファイル
#pre(novervatim){{
COLOR(blue):div.top_link {
COLOR(blue):  text-align: right;
COLOR(blue):  font-size: x-small;
COLOR(blue):}
</pre>
}}

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

まず、次の操作を行ってください。
-ノート型パソコンで、Internet Explorerを起動する
-自分の作ったページを表示する
-

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

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


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

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

&br;
&navi2(Lecture/InfoDesignB2004/12th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/12th,prev,toc,next)

}}