(2) 装飾のための画像等は音声読み上げソフト等で不必要な情報を伝えないようにする JIS 7... 解説装飾のための画像等は音声読み上げソフトで必要のない情報を読み上げたりしないようにしましょう装飾のための画像等は音声読み上げソフトで代替テキスト ( 音声読み上げソフトで読み上げる文字

(1)

【解説】画像で伝えたい情報を示す写真やイラスト、グラフ、画像にした文字等は、画像を見なくても情報が伝えられるように、その画像の示す情報を適切に音声読み上げソフトや点字ディスプレイ（画面に表示された文字を点字に変換し、配列されたピンを上下させて、凹凸を発生させることで点字を表す機器）等で、読み上げたり点字に変換できるようにしましょう。【対応方法・実装例】 ●音声読み上げソフトで読み上げたりできるように代替テキスト(音声読み上げソフトで読み上げる文字)を用意しましょう。 ≫良い例：代替テキスト入力 ※代替テキスト「菜の花の写真」悪い例：代替テキスト未入力 ※音声読み上げソフトで、画像のファイル名 (***.gif、***.jpg)を読み上げる。 ●画像の情報を適切に伝えられる代替テキストを用意しましょう。文字を画像にした場合は、その文字を代替テキストにしましょう。 ≫良い例：情報を伝えられる代替テキスト ※代替テキスト「夕景の信濃川の写真」悪い例：情報が伝わらない代替テキスト ※代替テキスト「写真」 ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ９画像(２)(３)(４)(５)(６)(７)(８)(９)

A

(2)

【解説】装飾のための画像等は、音声読み上げソフトで必要のない情報を読み上げたりしないようにしましょう。【対応方法・実装例】 ●装飾のための画像等は、音声読み上げソフトで代替テキスト（音声読み上げソフトで読み上げる文字）を読み上げたりしないように設定しましょう。 ≫良い例：代替テキストに「空」を設定メニュー・カレーライス・スープ ※代替テキスト「”“」(音声読み上げソフトで読み上げない) 悪い例：必要のない代替テキスト入力メニュー・カレーライス・スープ ※代替テキスト「飾りの画像」悪い例：代替テキスト未入力メニュー・カレーライス・スープ ※音声読み上げソフトで、画像のファイル名 (***.gif、***.jpg)を読み上げる。 ●画像の近くに画像の示す情報を伝える文字（テキスト）がある場合は、音声読み上げソフトで二重に読み上げたりしないようにしましょう。 ≫良い例：代替テキストに「空」を設定夕景の信濃川の写真 ※代替テキスト「”“」(音声読み上げソフトで１回読み上げる) 悪い例：代替テキスト入力夕景の信濃川の写真 ※代替テキスト「夕景の信濃川の写真」(音声読み上げソフトで２回読み上げる) ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ９画像(１)(３)

A

(3)

【JIS 7.1.1.1】【解説】あらかじめ一つの画像を分割しておき、一つの画像のように見えるように配置して表示させる場合（スライス画像）は、一つ一つの画像毎に画像の示す情報を音声読み上げソフトで読み上げたりするようにすると、同じ情報を繰り返し伝えてしまうことになります。一つの画像にだけ、音声読み上げソフトで読み上げたりするようにしましょう。【対応方法・実装例】 ●一つの画像にだけ、音声読み上げソフトで読み上げたりするように代替テキスト（音声読み上げソフトで読み上げる文字）を設定し、残りの画像は読み上げたりしないように設定しましょう。 ≫良い例：１つの画像に代替テキスト入力 ※代替テキスト「海水浴場の写真」「”“」(空) 「”“」(空) 「”“」(空) (音声読み上げソフトで１回読み上げる) 悪い例：すべての画像に代替テキスト入力 ※代替テキスト「海水浴場の写真」「海水浴場の写真」「海水浴場の写真」「海水浴場の写真」（音声読み上げソフトで４回読み上げる） ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ９画像(１)(２)

A

(4)

【解説】画像にした文字を使用する場合は、画像を見なくても情報が伝えられるように、その文字等を音声読み上げソフトや点字ディスプレイ（画面に表示された文字を点字に変換し、配列されたピンを上下させて、凹凸を発生させることで点字を表す機器）等で、読み上げたり点字に変換できるようにしましょう。ただし、装飾の目的で画像にした文字等は、音声読み上げソフトで読み上げたりしないようにしましょう。【対応方法・実装例】 ●音声読み上げソフトで読み上げたりできるように、画像にした文字等を代替テキスト（音声読み上げソフトで読み上げる文字）に設定しましょう。 ≫良い例：代替テキスト入力 ※代替テキスト「最優秀賞」悪い例：代替テキスト未入力 ※音声読み上げソフトで、画像のファイル名 (***.gif、***.jpg)を読み上げる。 ●長い文章等を画像にした場合は、同等の情報を画像の近くに文字（テキスト）で用意しましょう。 ≫良い例：代替テキストに何の画像か入力先輩からのメッセージ３年前に夫と３人の子どもと新潟にＩターンし、日々楽しく農業をしています。 ※代替テキスト「手書きのメッセージ」音声読み上げソフトで本文を１回読み上げる。悪い例：代替テキストに本文を入力先輩からのメッセージ３年前に夫と３人の子どもと新潟にＩターンし、日々楽しく農業をしています。 ※音声読み上げソフトで本文を２回読み上げる。 ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ９画像(１)(２)(９)(11) 10色彩と配色(２)

A

最優秀賞

(5)

【JIS 7.1.1.1】【解説】グラフや説明図、地図等複雑な情報を表す画像には、音声読み上げソフト利用者等だけではなく画面を見ている利用者にも情報が伝わるよう、画像の近くに文字（テキスト）で要約や説明を用意しましょう。【対応方法・実装例】 ●グラフや説明図には、その画像が何であるか音声読み上げソフト等で読み上げたりできるように代替テキスト（音声読み上げソフトで読み上げる文字）を設定し、近くに要約や説明を用意しましょう。 ≫良い例：代替テキストで画像が何であるか説明し、近くに詳細な説明を用意居住地別のイベントの参加者の割合は、イベント開催場所のＡ市からの参加者が 60％と最も多く、続いて近接するＢ市から 20％、Ｃ町から 10％、その他の市町村から 10％でした。 ※代替テキスト「居住地別のイベントの参加者割合のグラフ」悪い例：代替テキストで画像が何であるかだけ説明 ※代替テキスト「居住地別のイベントの参加者割合のグラフ」（音声読み上げソフト利用者等にはグラフの内容が伝わらない） ●施設への案内図等には、音声読み上げソフト利用者等にも情報が伝わるように交通手段や所要時間、道案内を文字（テキスト）で用意しましょう。 ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ９画像(１)

A

A市 B市 C町その他 20% _60% 10%10% 居住地別のイベント参加者割合 A市 B市 C町その他 20% _60% 10%10% 居住地別のイベント参加者割合

(6)

【解説】画像の形や大きさだけでページの内容や操作するために必要な情報を提供すると、ホームページの操作に不慣れな利用者や視力が低下している利用者、音声読み上げソフト利用者等に、その情報が伝わりにくかったり、伝わらない場合があります。形の違い等を利用することでわかりやすく見やすくなる面もあるので、視覚的な情報と文字（テキスト）を併用し、音声読み上げソフト等でも伝えられるようにしましょう。【対応方法・実装例】 ●画像の形や大きさだけでなく、画像に文字を表示したり、音声読み上げソフトで読み上げたりできるよう代替テキスト（音声読み上げソフトで読み上げる文字）を用意しましょう。 ≫良い例：形と文字で表示、代替テキスト入力丸い送信ボタンをクリックしてください。 ※代替テキスト「送信」悪い例：形のみで表示丸いボタンをクリックしてください。 ≫良い例：形と文字のリンクで表示（トップページへ戻るボタン） ○○○○○トップページに戻る悪い例：形のみで表示（トップページへ戻るボタン） ※不慣れな利用者にとっては、家の画像で何を伝えようとしているかわからない。 ≫良い例：大きさと文字で表示、代替テキスト入力（文字の大きさ変更ボタン） ※代替テキスト「大きな文字」「標準の文字」悪い例：大きさのみで表示（文字の大きさ変更ボタン） ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２)

A

あいうえお _{あいうえお} 大きな文字 _{標準の文字} 送信

(7)

【解説】リンクの設定されている画像は、簡潔に、リンク先の内容を音声読み上げソフトや点字ディスプレイ（画面に表示された文字を点字に変換し、配列されたピンを上下させて、凹凸を発生させることで点字を表す機器）等で、読み上げたり点字に変換できるようにしましょう。一般的には、リンク先の内容はリンク先のページタイトル等がわかりやすいでしょう。音声読み上げソフトで読み上げる文字が入力されていなくて、なおかつ読み上げをしないように設定されていない場合、リンク先のページのアドレス（URL）を読み上げてしまうことがあります。アドレスではリンク先のページの内容まではわからないことも多いので、リンク先の内容が簡潔に伝わるようにしましょう。【対応方法・実装例】 ●リンクの設定された画像には、音声読み上げソフトでもリンク先の内容を簡潔に読み上げたりできるよう代替テキスト（音声読み上げソフトで読み上げる文字）を用意しましょう。 ≫良い例：代替テキスト入力 ※代替テキスト「試験会場一覧」悪い例：代替テキスト未入力 ※音声読み上げソフトで、リンク先のページのアドレス(URL)を読み上げる。 ≫良い例：リンク先の内容がわかる代替テキスト ※代替テキスト「申込みはここをクリック」悪い例：リンク先の内容不明の代替テキスト ※代替テキスト「ここをクリック」 ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ８リンク(１) ９画像(１)

A

AAA

試験会場一覧試験会場一覧申込みはここをクリック！ここをクリック！

(8)

【解説】画像の一部にリンクを設定したり、一つの画像に複数のリンクを設定する場合（地図や案内図等に利用されるイメージマップ、クリッカブルマップ）は、音声読み上げソフトや点字ディスプレイ（画面に表示された文字を点字に変換し、配列されたピンを上下させて、凹凸を発生させることで点字を表す機器）等でも、リンクの設定された画像の部分毎にリンク先の内容を簡潔に読み上げたり点字に変換できるようにしましょう。点字に変換できるようにしましょう。音声読み上げソフトで読み上げる文字が入力されていなくて、なおかつ読み上げをしないように設定されていない場合、リンク先のページのアドレス（URL）を読み上げてしまうことがあります。また、サーバサイド（サーバ側で処理される）イメージマップは音声読み上げソフトで読み上げられない場合があるので、クライアントサイド（クライアント側で処理される）イメージマップを使用しましょう。なお、地図画像上のリンクの位置を探すよりも、規則的に並んだ順番の方が探しやすい利用者もいるので、別にリンクの設定された文字（テキスト）で一覧等を用意した方が望ましいページとなります。【対応方法・実装例】 ●リンクの設定された画像には、音声読み上げソフトでもリンク先の内容を簡潔に読み上げたりできるように代替テキスト（音声読み上げソフトで読み上げる文字）を用意しましょう。 ≫良い例：代替テキスト入力、一覧を用意 ※代替テキスト「村上地域振興局」悪い例：代替テキスト未入力、一覧なし ※音声読み上げソフトで、リンク先のページのアドレス(URL)を読み上げる。 ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(１) 作成基準Ⅱ １情報の提供(２) 作成基準Ⅲ ８リンク(１) ９画像(１)(７) 村上地域振興局地域振興局村上地域振興局新発田地域振興局新潟地域振興局三条地域振興局長岡地域振興局

A

AAA

(9)

【解説】画像にした文字を音声読み上げソフトで読み上げたりできるようにしただけでは、音声読み上げソフトや検索エンジンのロボット等は見出しやタイトルとして解釈してくれません。見出しであることを解釈できるようにすると、音声読み上げソフトによっては、見出しを読み上げる前に音をならしたり、見出しのみを読み上げることができたりします。また、検索エンジンのロボットでは、見出しとして指定された文字をページ内の重要なキーとして検索する場合があります。【対応方法・実装例】 ●画像にした文字を見出し等にする場合は、音声読み上げソフトで読み上げたりできるよう代替テキスト（音声読み上げソフトで読み上げる文字）を用意するだけでなく、見出し等であることが解釈できるように設定しましょう。 ※新潟県ホームページ管理システムでは、見出しやタイトルは文字（テキスト）で表示され、画像化した文字は見出しやタイトルにはできない。 ○参考・関連項目：作成基準Ⅲ ３ページレイアウト(６) ４コーディングルール(１) ５文章構造(１) ９画像(１)(４)(11)

A

(10)

【解説】ホームページ上で、実際の画像の大きさよりも大きく表示させるように設定すると、大きく表示した分画像は荒く表示されてしまいます。逆に実際の画像の大きさより小さく表示させるように設定しても、元の画像のファイルサイズは変わらないので、ファイルサイズが重い分だけ表示に時間がかかります。また、縦横比が実際の画像と異なるように設定すると縦長あるいは横長にゆがんで表示されてしまいます。画像はホームページ上で表示したい大きさに変更し（リサイズ）、その大きさのまま表示するようにしましょう。【対応方法・実装例】

●Microsoft Office Picture Manager（マイクロソフトオフィスピクチャーマネージャー）を使用して画像サイズを小さくする方法（情報政策課設置の庁内ＬＡＮ接続パソコンの場合）

① 左下の「スタート」ボタンから「すべてのプログラム」－「Microsoft Office」－「Microsoft Office 2010 ツール」－「Microsoft Office Picture Manager」を起動します。

② 画像ファイルを開いたら、メニューの「画像」－「サイズ変更」をクリックします。 ③ 「サイズ変更」メニューが右側に表示されたら、「ユーザー設定のサイズ」で、小

さくしたいサイズを入力します。サイズ変更後、保存します。

(11)

文字を画像にした場合、一般的なブラウザ（インターネット・エクスプローラ等のホームページを閲覧するためのソフトウェア）で自分の見やすい文字の大きさや文字色と背景色の組み合わせに変えることができないので、読みやすいデザインで作成するようにしましょう。書体もできるだけ、読みやすい書体にしましょう。【対応方法・実装例】 ●読みやすい大きさと書体で文字を画像にしましょう。 ≫良い例：大きい文字 ※少なくとも 14 ポイント以上の文字にする。悪い例：小さい文字 ○参考・関連項目：作成基準Ⅰ ２公平で安全な情報提供(４) 作成基準Ⅲ ９画像(４) 10色彩と配色(２)

大きい文字

小さい文字

(12)

【解説】ホームページに使用する画像のファイル形式にはいくつかの種類があり、ファイル形式によって画質やファイルサイズが異なります。適切なファイル形式の画像を使って、きれいで表示の早いホームページを作りましょう。「GIF（ジフ）形式」は、最大 256 色までしか表現できませんが、平面的なイラスト、ロゴ、アイコンなどに向いています。ホームページに掲載する画像は輪郭が四角ですが、透明色の指定ができるので、背景を透明にして丸い形等に見せることができます。「JPEG（ジェイペグ）形式」は、フルカラーで表現できるので、多くの色を必要とする写真やグラデーションのある画像等に向いています。透明色は表現できません。「PNG（ピング、ピーエヌジー）形式」は、ホームページ用に新しく開発されたファイル形式です。フルカラーでも表現することができるほか、透明色も表現できます。ただし、古いブラウザ（インターネット・エクスプローラ等のホームページを閲覧するためのソフトウェア）では、表現が一部対応できないことがあります。なお、「BMP(ビットマップ)形式」の画像ファイルは、データサイズが大きいのでそのままホームページに載せるのは不向きなファイル形式です。【対応方法・実装例】 ●ホームページに使用する画像のファイル形式は、それぞれの特徴に合わせて使い分けましょう。 ≫良い例：GIF 形式に向いている画像項目のポイントなどの小さな画像平面的なイラスト ≫良い例：JPEG 形式に向いている画像多色を使用する写真グラデーションを使った画像 ○参考・関連項目：作成基準Ⅲ ９画像(10)