アクセシビリティの向上を

提供開始:平成15年(2003年)5月11日
第10回更新:平成31年(2019年)4月1日 関連サイトのリンク先変更。

当サイトでは、だれもが利用しやすい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サイトにも、その名称、場所(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サイトの企画・制作のポイントをまとめています(2010年閉鎖)。
実用的なWebサイトのデザイン(KeiYu HelpLab)(Internet Archive Wayback Machine)web.archive.org/web/20100114200939/http://www.keiyu.com/web/

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

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

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

カラーバリアフリーガイドver1.01 www.geocities.jp/cbfgver101/
色覚の違いに配慮した配色について解説しています(2019年3月31日閉鎖)。
カラーバリアフリーガイドver1.01(Internet Archive Wayback Machine)web.archive.org/web/20190330002235/http://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サイトに関する情報を提供しています(2015年閉鎖)。
こころWeb(Internet Archive Wayback Machine)web.archive.org/web/20150523040010/http://www.kokoroweb.org/

☆更新状況 関連サイトのリンク先移転等に伴う変更。
第1回更新:平成18年(2006年)1月1日
第2回更新:平成19年(2007年)1月1日
第3回更新:平成20年(2008年)5月21日
第4回更新:平成22年(2010年)7月11日
第5回更新:平成25年(2013年)1月1日
第6回更新:平成25年(2013年)7月11日
第7回更新:平成27年(2015年)1月1日
第8回更新:平成27年(2015年)7月1日
第9回更新:平成27年(2015年)11月23日
第10回更新:平成31年(2019年)4月1日

inserted by FC2 system