協議会トップページへ
／ IT（地域の情報化）へ
／ 地域におけるIT活用検討部会へ
ウェブアクセシビリティ実証実験 ホームページ改造報告書
改造後ホームページは身体に障害のある方や高齢者も含む様々な方が様々な環境よりホームページを利用し易くなるように
アクセシビリティに配慮したホームページの構成となっています。これによりできるだけ多くの人々に大切な情報源であるホーム
ページを閲覧可能にし、デジタルデバイドをなくしIT革命の恩恵を受けられるものと考えられます。
- ホームページ改造の基本方針
- 改造変更点詳細内容
- 西山町ホームページ構造（改造後）
- ・ディスプレイ解像度
- 800*600を基準とします。1024*768 を想定してページを作成した場合、 640*480
や 800*600 では横幅がブラウザ画面に入りきらず、横スクロールバーが出てしまい、操作性が極端に悪くなります。
また、640*480で作成した場合1024*768では無駄な領域が多くなります。環境の違いを考え800*600で作成することが
すべての利用者に見やすいものになると考えられます。
- ・ページタイトル
- 音声ブラウザの使用者は、<title>のテキストでページ内容を把握します。<title>のテキストが不適切な場合、
ページ本文の読み上げで判断しなければならず、時間がかかります。各ページにはページ本文が分かるページタイトルを必要とします。
- ・画像
- 音声ブラウザを利用している人は、画像<img>の内容を把握することが困難です。この場合alt属性で画像
の内容を記述します。意味を持たない画像 (箇条書きのポインタ等) や、テキストが併記されている画像にはalt="
"（ヌル）を 表記することも必要となります。
また、画像を圧縮し適切なサイズにすることが必要となります。
- ・リンクのある画像・文字列
- 画像や下線のないテキストの場合、高齢者や初心者は、リンクの存在を見落とす場合があります。「ここ」「こちら」の文字列にリンクがある場合、読み上げソフトを利用し閲覧するとそれぞれのリンクの違いや、リンク先の内容を把握できません。分かり易い文字列や画像を利用する必要があります。
- ・レイアウト
- <table>の利用による文字のレイアウトは正しい情報を提供することはできない場合があります。音声ブラウザでは、<table>はあくまで「表」として認識され、表の中身を読み上げるルールに従って読まれていきます（通常は表の行を左から右へ、そして次の行へ、と読み進みます）。ほとんどの場合、<table>でレイアウトされたWebページは理解するのが困難な順番で読み上げられてしまいます。レイアウトは極力スタイルシートで行うことが望ましいと考えられます。
ただし、netscape4.xなどの一部のブラウザでは、スタイルシートは適用されずレイアウトがくずれてしまう等、注意が必要です。
- ・表<table>
- 表であることが分かるように、<caption>により表のタイトルを、summary属性により表の目的や内容、構成などの要約を、scope属性を利用し列と行を見出しであることを明示することにより表を理解できるようにする必要があります。
- ・背景
- <body>で色を設定する場合、すべての色の属性を指定するべきです。BGCOLOR、TEXT、LINK、VLINK、ALINKのうちの1つとかいくつかだけを指定すると、ページがアクセシブルではなくなる危険性が生じます。なぜなら、利用者が選択している色によっては作者が指定した色との組み合わせによって文字が読めなくなることがあるからです。
BGCOLORのみの指定の場合、スタイルシートを利用し表示をします。
- ・文字スクロール＜marquee＞
- 光過敏性てんかんのある人は、1秒間に数回の明滅やストロボの光のような急激な変化に対し、発作を引き起こす可能性があります。
視覚にうったえる画面の明滅や自動スクロールなど、変化を伴う表現には特別な配慮が必要です。
- ・フレーム<frameset>
- ホームページリーダー等のノングラフィカル・ブラウザを使用する人がフレームページを訪れた時、どのフレームをターゲットとするか選択する必要があります。リストアップされたフレームから任意のものを選択する際、「分割する領域の数」「フレームタイトル」は必須の情報と考えられます。
また、フレーム非対応環境への配慮、文字がフレーム内に収まらない場合のスクロールバー表示、フレーム枠 (ボーダー) 表示なども必要となります。
- ・前景色（文字の色等）・背景色
- 色覚障害を持つ人が見る場合、前景色と背景色の組み合わせにより十分なコントラストを取る必要があります。スタイルシートを利用することにより、利用者が任意のスタイルを設定することができ、色に依存しないでも情報を入手できるようにする必要があります。
- ・サイト構造
- サイトの構造を分かりやすいものとし、すべてのリンクが正しく機能しているか確認する必要があります。
- ・リンク先表示<target>
- リンク先ページの表示は同じウィンドウであるのが望ましい。複数ウィンドウが開いていることに気づかず、ウィンドウ戻るボタンで戻れなくなる等、何処に自分がいるのか把握できなくなることがあります。
トップへ戻る
変更点とし「トップページ（index.html）」「役場だより(title/gyuousei3.html)」をサンプルとします。その他のページは一覧にて変更箇所を表示します。
- 変更点 -
- ・ページタイトル
- 西山町HomePage・西山町ホームページ、どちらも読み上げソフトでは「にしやままちほーむぺーじ」とよみあげるが、英語の苦手な方を配慮したホームページとしカタカナを
使用しページタイトルを分かりやすいものとする。
改造前
改造後
- ・画像
- 全画像へalt属性を適用する。
改造前は画像へのalt属性がなく、西山町のメインメニュー「地図」「役場だより」「観光案内」「リンク」「ふれあい」の画像をURLで読み上げリンク先
を把握することができない。alt属性をつけ画像の内容を分かりやすくする。
改造後
「TownNishiyamaWebSite」画像にはalt属性を（TownNishiyamaWebSite）とする。英語表記だが、こちらはページの中の文字列で意味を大きくもたないため
英語でも問題はない。「自然が創りだす誇りとゆとりあるまち 西山町」画像にはalt属性を（心と自然が創り出す誇りとゆとりあるまち"西山町"）
とする。町の印象を表示する文字列が画像になっているためalt属性で内容を表示する。四季の画像が6枚あるがデザインで使用されているものと考え、また
この6枚に説明を入れるとトップページが分かりにくくなると判断し、alt=" "（ヌル）とする。手紙の画像も意味を持たないためヌルとする。
画像サイズが大きいものは圧縮し読み込みを少しでも早くする。
- ・リンク
- 例規集へのリンクにて改造前はalt属性のない画像へリンクがはられ「西山町例規集をご覧になりたい方はこちらから！」と書かれているところにはリンクがない。読み上げソフトではaltがないためURLを読み上げ、内容を把握することが難しい。初心者には隣の画像にリンクが張られていることを見つけることが難しいものと考える。画像にはalt=" "とし、画像も含め文字列をリンクとし分かりやすいものとする。
改造前
改造後
- ・電子メールアドレスの文字列
- リンクをEmailの部分を含め設定すると、電子メールをメモする場合メールアドレスの部分の判別がつきにくい。mailtoでリンクをはる場合、アドレス部
にのみリンクを設定する方がアドレス部を聞き取りやすい。
- ・文字スクロール＜marquee＞
- 効果は面白いが、必要性がない。ホームページ改造の基本方針で述べた問題も考え、通常の文字列に変更し内容を伝えるものとする。
改造前
改造後
- ・レイアウト
- ページ中間にある■長嶺大池白鳥情報などのリンク項目は改造前、表<table>を使用しレイアウトを中心にもってきている。<table>は表を作成する要素のため、スタイルシートで構成するのが望ましいと考え改造後はレイアウトをスタイルシートで構成する。
- ・背景
- 背景画像を設定するが、リンクの色は設定しないためスタイルシートを利用し設定する。
改造前
<BODY bgcolor="#ffffff" background="u002bcg.gif">
改造後
body { background-image: url(u002bcg.gif)} …………….スタイルシート定義
トップへ戻る
- 変更点 -
- ・ページタイトル
- ページタイトルを設定しない場合、ファイルのURLがページタイトルとし表示される。
ページタイトルを的確につける。
改造前
改造後
- ・フレーム
- 改造前は左右分割フレーム画面で構成されている。左フレーム内に設定されているリンクを開くと全体が置き換わる形でページを移動する。
よってこのページがフレームである必要性がないので改造後はフレームの使用を止め、ページを作成する。
この場合、情報が多く縦に長いページになる為、ページ中に「ページの先頭へ戻る」ページ内リンクを設置する。
- ・リンク
- 改造前はcontents項目に3つのリンクと町組織主要職員氏名の事務局・各課にリンクが設定されている。Contentsの西山町会議と議会事務局
の文字列に設定されているリンク先ページが同一なものであるため、これを1つにまとめる。各課に設定されているリンクは複数の課があるなか
産業観光課と教育委員会教育課の２つの課のみリンクが設定されている為、リンクを町組織主要職員氏名よりはずしcontentsへ移動する。町組織
主要職員氏名の欄は情報のみ提供するようにする。Contentsはメニュー項目と変更し改造後はページ上部の目立つ部分へレイアウトをする。文字
列はリンク先内容をわかり易いものとする。
改造前
改造後
- ・文字列
- 文字色が全て赤と設定されていたページを、項目と内容の違いがわかるようにする。下線が使われている文字列はリンクが設定されていると
間違う可能性があるため、改造後はレイアウトで下線と同等の効果を持たせる。またスタイルシートを利用し利用者側で文字の色・サイズ等の変
更を可能とする。
- ・画像
- 改造前画像にはalt属性がなく画像ファイルのURLを読み上げるため、alt属性をつけどの様な画像があるのかを明示する。データサイズも大き
い為圧縮する。
改造前
<IMG src="image26.jpg" border="0" width="398" height="227">
改善後
<img src="image26.jpg" alt="写真：西山町役場です。３階だてで概観は茶色の建物です" width="478" height="227" border="0">
- ・表
- 西山町の町情報は表で構成されている。各情報にcaption、summary、scope属性を利用する事により、読み上げソフトの機能をつかうことに
より表であることまた、列行項目とを対比しながら内容を確認する事ができる。
改造前
<P><B>（2）面積</B><BR>
</P>
<TABLE border="1">
<TBODY>
<TR>
<TD><B>総面積</B></TD>
<TD align="right"><B>56.63</B></TD>
<TD align="right"><B>100.0</B></TD>
</TR>
<TR>
<TD align="right"><B> 宅地</B></TD>
<TD align="right"><B>2.29</B></TD>
<TD align="right"><B>4.0</B></TD>
</TR>
~省略～
改造後
<table border="1" align="center" cellpadding="5" summary="西山町の面積と利用別割合の表">
<caption>
２、西山町の面積<br>
</caption>
<tr>
<th align="right" nowrap scope="row">総面積</th>
<th scope="col">56.63</th>
<th scope="col">100.0</th>
</tr>
<tr>
<th align="right" scope="row">宅地</th>
<td align="right" nowrap>2.29</td>
<td align="right" nowrap>4.0</td>
</tr>
～省略～
トップへ戻る
－ Index 新着情報 －（平成15年1月 現在）
平成15年度、16年度建設工事入札参加資格審査申請について
西遊館・西友園の冬季休館・休園について
長嶺大池白鳥情報
西山例規集 ＋ 体系目次
∟ 五十音順・目次
∟ ヘルプ
（例規集はアプリケーションソフトを使用し作成されているようなので改造の対象外とします。）
― 地図 ―
地図 － リンク各ページへ
― 役場だより ―
西山町工業流通団地の紹介 ― 西山町工業団地の概要 － 航空写真
西山町の国際交流活動の紹介 ＋ 有効提携書・友好都市関係確認書の前文
∟ 西山町国際交流協会の紹介 － 会報2002年第1号
西山町議会 ―――――＋ 議会構成
∟ 13年3月定例会
∟ 13年6月定例会
∟ 13年9月定例会
∟ 13年12月定例会
∟ 14年3月定例会
∟ 14年6月定例会
∟ 14年9月定例会
西山町観光情報 －（リンク→、観光案内参照）
地域文化「西山かたくり一座」 － 西山かたくり一座座長インタビュー
緑が丘住宅団地、分譲中（建設課）
＋ 価格及び区画図
∟ 交通アクセス － 周辺施設リンク↓
｜ （ 役場、ふるさと公苑、田中角栄記念館、石地海水浴場
）
∟分譲条件
― 西山町観光案内 ―
西山ふるさと公苑
＋ 西山ふるさと公苑間での地図
∟ 施設案内情報 － 関連ページリンク（国際交流活動のページ）
∟ 施設紹介（写真等）＋ 道案内
∟ 案内板
∟ 西遊館１
∟ 西遊館２
∟ 庭園
∟ 景石
∟ ふるさと館
石地海岸 ＋ 交通案内
∟ 海の情景１
∟ 海の情景２
∟ 民宿・海の家の営業料金
∟ 民宿・海の家ご案内 － 民宿・旅館・海の家32件ページ
雪割草（町の花）＋ 周辺地図
∟ 雪割草の湯の紹介
∟ 自然の雪割草写真館 ＋ 雪割草写真 ― 写真拡大８ページ
｜ ∟ 雪割草の育て方
∟ 育苗花の雪割草写真館 －1枚目－2枚目－3枚目－4枚目―5枚目
白鳥ライブ中継 － 他ページへ（
http://www.iinekka.net/2001/swan/ ）
長嶺大池周辺地図
ハクチョウ豆知識
石地フィッシングセンター － 石地フィッシングセンターの詳細情報
草生水まつり
＋ 草生水献上公園の紹介 －公園の写真－入り口写真―敷地内―看板
∟ 草生水まつりとは － 以前の祭り平成10年
∟ 西山油田について
∟ 日本石油について
∟ 石油記念館の紹介
∟ 平成14年の祭りのようす
田中角栄記念館
＋ ご利用案内
∟ 館内案内 － 関連ページリンク （ 西山ふるさと公苑 ）
∟ 先生の経歴
― リンク ―
リンク集（各ページへ）
― ふれあい ―
ふれあい ＋ たんぽぽコーラス
∟ 江尻勝栄さんの紹介
トップへ戻る
協議会トップページへ
／ IT（地域の情報化）へ
／ 地域におけるIT活用検討部会へ
