[PR]今日のニュースは
「Infoseek モバイル」

@富士見市ご案内@富士見市からアクセシビリティ↓/サイトマップ

アクセシビリティの向上を fujimic.at.infoseek.co.jp/info/i03511a.htm

提供開始:平成15年(2003年)5月11日 アクセス数
第3回更新:平成20年(2008年)5月21日 関連サイトのリンク先移転に伴う変更等。

当サイトでは、だれもが利用しやすいWebサイトを目指し、不十分ながら、アクセシビリティやユーザビリティ(利用しやすさ)に配慮しています。

これからWebサイトを開設される方、既に開設されている方にも、アクセシビリティやユーザビリティに配慮されることをおすすめします。

具体的には、次のとおりご提案します。これだけで十分であるというものではありません。関連サイトもご参照ください。

すべてのページに適切なタイトルを
Webサイトにも「奥付」を
いつどこが更新されたのかわかるように
全体構成や現在位置がわかるように
低解像度や印刷への対応を
文字と背景の配色に注意を
文字の大きさを変更できるように
画像が表示されなくてもわかるように
関連サイト↓(8件)

アクセシビリティの向上を↑−すべてのページに適切なタイトルを

●すべてのページに適切なタイトルを

ここでいうタイトルは、ブラウザのタイトルバーに表示されるもので、HTMLでいうとhead要素内のtitle要素です。このタイトルは、自動的に登録されるタイプの検索エンジンの検索結果やブラウザのお気に入り(ブックマーク)にも表示されます。

すべてのページにそのページの内容を端的に表すタイトルを付けましょう。

別のページに同じタイトルを付けるのは避けましょう。例えば、index.htmとinfo.htmの両方に「@富士見市」と付けたりしないでください。

フレームを使う場合も同様です。例えば、intro.htmを外枠とし、目次menu.htmと本文main.htmから成る富士見市の紹介のページの場合、すべて「富士見市の紹介」としたりせず、intro.htmは「富士見市の紹介」、menu.htmは「富士見市の紹介の目次」、main.htmは「富士見市の紹介の本文」などとしましょう。

また、文脈外でもわかりやすいタイトルにしましょう。例えば、単に、「ご案内」、「サイトマップ」などでは、検索結果やお気に入り(ブックマーク)に表示された時に、何の案内か、どこのサイトマップか、わかりづらくなります。「ご案内(@富士見市)」、「@富士見市のご案内」などとしましょう。

アクセシビリティの向上を↑−Webサイトにも「奥付」を

●Webサイトにも「奥付」を

本には、書名、発行年月日、編著者名、発行所名等を記した奥付があります。

Webサイトにも、その名称、場所(URL)、開設年月日、開設者名、連絡先等をトップページなどに明示しましょう。

できれば、すべてのページに、その名称、場所(URL)、提供開始年月日等を示すことをおすすめします。

場所(URL)を示すことは、どこからダウンロードしたのかわからなくなってしまった利用者の参考にもなります。

アクセシビリティの向上を↑−いつどこが更新されたのかわかるように

●いつどこが更新されたのかわかるように

そのWebサイトを2回以上訪れる人(リピーター)は、主に更新された所を見ることが多いでしょう。

更新されているのか、いつどこが更新されたのかがよくわからないと、見るのに手間取ったり、見落としたりしてしまいます。

更新年月日をトップページや更新された所に明示しましょう。いつどこが更新されたのかを一覧できるページもあるとよいでしょう。

アクセシビリティの向上を↑−全体構成や現在位置がわかるように

●全体構成や現在位置がわかるように

そのWebサイト全体の内容構成がわかり、各ページへリンクしている目次やサイトマップを提供しましょう。小規模サイトの場合は、トップページだけでその役割を果たしても結構です。大規模サイトの場合は、サイト内検索もできるとよいでしょう。

各ページについても1画面程度で収まらない長さの場合は、そのページの目次を付け、それぞれの項目へリンクしましょう。

また、各ページからトップページや前後のページなどへ、ページの途中からそのページの先頭などへリンクしているナビゲーション・バーも提供しましょう。

検索エンジンから直接、途中のページへアクセスされることもあります。どこに迷い込んでも現在位置がわかり、トップページなどへ行けるようにしておくとよいでしょう。

アクセシビリティの向上を↑−低解像度や印刷への対応を

●低解像度や印刷への対応を

画面解像度は1024×768ピクセル以上が多いようですが、640×480ピクセル、少なくとも800×600ピクセルの環境でも横スクロールせずにすむようにしましょう。

また、A4の用紙に印刷する場合も想定して、横が途切れないようにしましょう。

アクセシビリティの向上を↑−文字と背景の配色に注意を

●文字と背景の配色に注意を

文字と背景(背景画像)の色の組み合わせによっては、文字が読みにくかったり、読めなかったりすることがあります。

文字や背景の色を指定したり、背景画像を使用したりする場合は、明るい色同士、暗い色同士などの組み合わせは避けましょう。画面の明るさやコントラストを弱くしても読み取れるか試してください。

また、色を指定する場合は、文字だけ、背景だけなどではなく、文字、背景、リンク(未表示・表示済み)すべてを指定しましょう。

アクセシビリティの向上を↑−文字の大きさを変更できるように

●文字の大きさを変更できるように

小さい文字は、読みにくかったり、読めなかったりすることがあります。

文字の大きさを指定する場合は、ブラウザで変更できるようにしましょう。ポイント(pt)、ピクセル(px)などの単位での指定は避けましょう。

アクセシビリティの向上を↑−画像が表示されなくてもわかるように

●画像が表示されなくてもわかるように

ブロードバンド化が急速に進んでいますが、ダイヤルアップで利用している人もいます。速く表示させるために画像を表示しない設定にしている場合があります。文字を読み上げる音声ブラウザで利用している人もいます。

画像が表示されなくても内容がわかるように、その代わりとなる文字(代替テキスト)をalt属性で指定しましょう。

また、文字で表現できるものを必要以上に画像にしないようにしましょう。

アクセシビリティの向上を↑−関連サイト

●関連サイト(8件)

実用的なWebサイトのデザイン(KeiYu HelpLab)www.keiyu.com/web/
利用しやすいWebサイトの企画・制作のポイントをまとめています。

訪問者に優しいWebサイト作り web8341.info/
閲覧環境を問わないサイトの制作法を、悪い例もまじえ、解説しています。

情報バリアフリーのための情報提供サイト(独立行政法人情報通信研究機構)www2.nict.go.jp/v/v413/103/
情報アクセシビリティJIS、ウェブアクセシビリティ等を紹介しています。

Another HTML-lint gateway openlab.ring.gr.jp/k16/htmllint/htmllint.html
アクセシビリティにもかかわる正しいHTMLかチェックできます。

カラーバリアフリーガイド ver.1.01 www.geocities.jp/cbfgver101/
色覚の違いに配慮した配色について解説しています。

カラーコントラストチェッカー V2.0(I-Create)www.i-create.jp/accessibility/color-checker.shtml
色覚障害者にも見やすい配色かチェックできます。

バリアフリーWebデザインガイド bfree.purewell.net/
音声ブラウザでも利用しやすいWeb制作のポイントをまとめています。

こころWeb www.kokoroweb.org/
障害者にも利用しやすいWebサイトに関する情報を提供しています。

☆更新状況 関連サイトのリンク先移転に伴う変更等。
第1回更新:平成18年(2006年)1月1日
第2回更新:平成19年(2007年)1月1日
第3回更新:平成20年(2008年)5月21日

@富士見市ご案内@富士見市からアクセシビリティ↑/サイトマップ