*ユーザビリティとアクセシビリティを高める [#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> }} +各コメントの最後に「トップへ」や「↑」のような、ページの一番上にジャンプするリンクをつくる -HTMLファイル #pre(novervatim){{ COLOR(blue):<div class="top_link"> COLOR(blue):<a href="#top">↑トップへ</a> COLOR(blue):</div> }} -CSSファイル #pre(novervatim){{ COLOR(blue):div.top_link { COLOR(blue): text-align: right; COLOR(blue): font-size: x-small; COLOR(blue):} }} **アクセシビリティ [#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) }} |