各種申込み・資料請求

資料請求

ユニバーサルデザインに配慮したホームページづくり

HTMLで出来る、UDホームページのつくり方

このページでは、「情報のユニバーサルデザイン」を実現するために、このサイト内にて採用されている技術的な情報をご紹介します。やや専門的な表現が多いですが、興味のある人は、ぜひご覧ください。
また、新たに配慮した点や工夫した点は、このページに掲載していきますので、皆様のホームページ作成の参考にしてください。

ホームページ読み上げソフト・テキストブラウザでも内容が理解できます
画像には代替テキストをつけ、画像についての説明をしています。

HTMLでは
<img src="images/top_image.jpg" alt="しずおかユニバーサルデザイン" width="450" height="288">
という記述になります。

→ユニバーサルデザイントップページをご覧ください。

説明文を左、画像を右に配置して、読み上げがスムーズに行なわれるようにしています。
→ 「まち」のUD：建物（公共施設や住宅など）のページをご覧ください。

縦1ピクセル×横1ピクセルの、背景色と同じ色の画像などを配置し、その画像に代替テキストをつけて、読み上げがスムーズになるよう配慮しています。

例えば、ページの一番上にある「パンくずリスト」の場合、HTMLでは、

<img src="../shared/images/spacer.gif" alt="現在閲覧中のページは、" width="1" height="1"><a href="http://www.pref.shizuoka.jp/">ホーム</a><img src="shared/images/pankuzu_icon.gif" alt="の中の、" width="8" height="8"><a href="http://www.pref.shizuoka.jp/a_content/1_kurashi.html">くらし</a><img src="shared/images/pankuzu_icon.gif" alt="の中の、" width="8" height="8"><a href="http://www.pref.shizuoka.jp/a_content/1_10.html">ユニバーサルデザイン</a><img src="shared/images/pankuzu_icon.gif" alt="の中の、" width="8" height="8">ユニバーサルデザイン室トップページ<img src="../shared/images/spacer.gif" alt="です。" width="1" height="1">

と記述します。（これはこのページの例）
これを読み上げると「現在閲覧中のページは、ホームの中のくらしの中のユニバーサルデザインの中の、ユニバーサルデザイン室トップページです。」となります。

背景色、背景色や文字の大きさに配慮しています
コントラストに配慮して、背景は白（#FFFFFF）にし、文字の大きさを指定せず、ホームページを利用する人の設定に従うようにします。

当ホームページでは背景色や文字色の指定をCSSで行っています。
CSSでは、背景色の指定は、background-color: #FFFFFF;、文字の大きさの設定は、font-size: 100%;という記述になります。

表示速度に配慮しています
1ページの大きさは原則極力小さくして、電話回線など低速回線利用者でも快適な表示ができるようにしています。

画像のファイルサイズを小さくしています。
サムネイル表示（画像をクリックすると大きなサイズの画像を見ることができる表示方法）を心がけています。大きなサイズの画像は視覚に障害のある人への配慮です。
→ 「まち」のUD：建物（公共施設や住宅など）のページをご覧ください。

事例を具体的に紹介しています
説明文、写真などで、静岡県の取り組みを具体的に紹介しています。
→ 「まち」のUD：建物（公共施設や住宅など）のページをご覧ください。

サイト内のどこにいるのかわかります
ページ上部の「パンくずリスト」により、サイト内での現在位置が把握できます。この画像は、パンくずリストの例です。

階層を深くしていません
サイト内の階層を深くせず、複雑なサイトとならないようにしています。

ご意見を頂くページを用意しました。実際にご覧になった感想などをお寄せください。

お問い合わせ

より良いウェブサイトにするためにみなさまのご意見をお聞かせください

ページの先頭へ戻る

〒420-8601 静岡県静岡市葵区追手町9番6号電話番号(県庁案内)：054-221-2455