文字の大きさ 文字の大きさ 標準 文字の大きさ 大 文字の大きさ 特大 背景色
  • 背景色 白
  • 背景色 黒
  • 背景色 青
栃木県社会福祉協議会
このページの階層は、 トップページ > Webアクセシビリティについて

Webアクセシビリティについて

 栃木県社会福祉協議会(本会)では、誰にでもホームページをご覧いただけるよう、高齢者・障害者に配慮したホームページづくりを目指しています。フレームを使用しない、大文字んの導入などの他、様々な配慮を取り入れるとともに、職員向けにマニュアル「Webアクセシビリティについて」を作成しました。高齢者・障害者に配慮したホームページは徐々に増えてきています。本会は更にこうしたホームページが広がるためにも、すでにホームページをお持ちの方はもちろん、これから作ろうと考えている方でも高齢者・障害者に配慮したホームページが作れるよう、このマニュアルを公開いたします。専門の業者でなくてはできないことではなく、どなたでもできる工夫を中心にご紹介しています。この方法が全ての高齢者・障害者にとって有効なものとは限りませんが、少しでもお役に立てたらと思っております。
 また、この他にも団体や企業などでWebアクセシビリティについて様々な情報を提供していますので、参考にしてみてください。

<参考リンク集>

 ・みんなのウェブ(情報バリアフリーのための情報提供サイト)
 ・A.A.O.(アクセシブルナなウェブをめざす提供者と利用者のための実用サイト)
 ・バリアフリーの扉(IBMアクセシビリティ情報)
 ・アクセシビリティ(FUJITSUのアクセシビリティに対する考え方)
 ・マイクロソフトアクセシビリティ

 

本会作成マニュアル「Webアクセシビリティについて」

1 ページのタイトル
  音声ソフトはまずタイトルから順に本文へと読み上げられるため、そのページの内容が容易にわかるようなタイトルを付ける。
 【良い例】
  「人材・研修センター(トップ)」
  「利用方法1」、「利用方法2」
 【悪い例】
  「ようこそ」
  「1」、「2」

2 フレームについて
  フレームを多用すると、音声ソフトがどこのフレームを読み上げているのか分からなくなってしまうため、極力フレームの使用は避ける。

3 文字設定
  ブラウザ等による文字大きさの調整を有効なものとするために、文字は相対値とする。

4 強制改行とスペースの挿入について
  一つの語句の間に強制改行、スペースが入っていると音声ソフトで正常に読み上げられないので、強制改行を入れる場合は、文節など区切りの良いところで入れる。また、一つの語句の間に不必要なスペースを入れない。
 【通常】
  “基金” <読み上げ 「ききん」>
 【途中に強制改行が入った場合】
  “基
   金” <読み上げ 「もと かね」>
 【途中にスペースが入った場合】
  “基 金” <読み上げ 「もと かね」>

5 記号について
 (1) 音声ソフトによっては□、+、−、*、/などの図形文字、記号文字は読み飛ばされることがあるので、なるべく使用しない。
  【例1】 「〜」
   おはよ〜! <読み上げ「おはよから」>
  【例2】 「%」
   さん% <読み上げ「さん」>
   3%  <読み上げ「さんぱーせんと」>
  【例3】 「−」、「/」
   1−10 <読み上げ「いちのいちぜろ」>
   2/5  <読み上げ「にご」>

 (2) 〇、×を単独で使用すると音声ソフトできちんと読み上げられないことがあるので、その説明も加えるようにする。
  【良い例】 〇(ある)
         ×(なし)
  【悪い例】 〇
         ×

6 機種依存文字
  OSやフォントの種類によって正しく表示されないことがあるため、機種依存文字はなるべく使用しない。
【機種依存文字の例】
  @、A、T、U、пA梶A・・・

7 英単語
  全て大文字の場合、アルファベットで読み上げられるため、原則として全て小文字で表示するか、先頭の一文字のみ大文字にする。
 【例】 rain  <読み上げ「レイン」>
     Rain  <読み上げ「レイン」>
     RAIN <読み上げ「アールエーアイエヌ」>

8 取り消し線
  取り消し線は音声ソフトでは読み上げられないので、取り消し線を入れる場合は工夫する。
 【良い例】
  障害者文化祭(延期)<読み上げ「しょうがいしゃぶんかさいかっこえんきかっことじる」>
 【悪い例】
  障害者文化祭    <読み上げ「しょうがいしゃぶんかさい」

9 リンク設定したテキスト・画像について
  リンク設定したテキストの文字幅が狭かったり画像が小さいと、手などに障害を持った人にとってクリックするのが難しくなってしまう。また、リンク設定したテキスト・画像が複数存在し、その間隔が狭いと、うまくクリックできない。
 ※ 対策:テキストを増やす
       画像を大きくする
       テキスト・画像の間隔を広げる
 【良い例】 リンクa   リンクb   リンクc
 【悪い例】 a b c

10 画像の挿入について
  画像は音声ソフトに対応していないため、Alt属性でその画像の説明を加えるようにする。

沖縄の青空Alt属性に加える説明
【良い例】 沖縄の青空
【悪い例】 沖縄に行きました


 
 

11 表の作成について
  表を結合した場合、音声ソフトでは一部を読み飛ばしてしまうことがあるため、極力セルの結合はしない。また、読み上げ順に注意して表を作成すること。

1 2
3 4

※番号の順に読み上げられる

12 データファイルの掲載について
  誰でも見られるために、なるべく有料ソフト(Word、一太郎など)がなくても見られるようにする。
  ※ PDFファイルはAdobe Reader7.0以上の環境でAdobe Reader上から音声による読み上げが可能。

13 データファイルの変換について
  WordソフトからデータファイルをWebページにそのまま変換すると余計なタグが付いてしまうため、一太郎に一度変換してから更にWebページに変換する等の工夫をする。

14 使用する色について
  色覚に障害のある方のために色づかい等について配慮する。
  ※ 対策:赤と緑の組み合わせ、黄色と黄緑の組み合わせなどを避ける。
        背景と文字のコントラストがはっきりしたものにする。

15  音の自動再生について
  音声ソフトを使用している場合、音声ソフトの音と混合して実質そのページの内容が分からないという状態になってしまうため、音の自動再生は避ける。

16 早い周期の点滅について
  光の明滅によって光感受性発作を誘発することがあるため、使用しない。どうしても使用する場合は、明滅する範囲を極力小さくし、1秒間に2回以上明滅しないようにするとともに、彩度の高い赤の明滅及びコントラストの強い色の画面の反転を避ける。

17 自動的にページを移動しない
  時間がたつと自動的にページが移動する設定がされている場合、利用者がページの内容を読んでいる途中で別のページに移ってしまい、混乱してしまうため、自動的にページを移動しない。

18 ナビゲーションを読み飛ばすリンクを設定する
  ナビゲーションをページの先頭に設定している場合、音声ソフトは新しいページに移るたびにナビゲーションが読み上げ、本文を読み上げるまでに時間がかかってしまう。そのため、ナビゲーションの前に本文へ読み飛ばすリンクを設定する。

 

19 パンくずナビを設定する
  利用者がサイト全体のどこのページを見ているか分かるようにパンくずナビを設定する。

 



GoogleMapはこちらから 交通アクセス ホームページについてのお問い合わせ・ご意見ご感想はこちらのフォームから 〒320-8508栃木県宇都宮市若草1-10-6 とちぎ福祉プラザ3階 電話 028-622-0524 ファックス 028-621-5298