(1) 情報は取り消し線や太字等の文字修飾のみで伝えず 文字や音声読み上げソフト等でも伝えられるようにする JIS 7.1.1.1/JIS 7.1.3.3 解説 取り消し線や太字等の文字装飾は 音声読み上げソフト等で伝えられない場合があります また スタイルシート ( 文字の大きさや色 行間の幅 画像の配置等の見栄えに関する情報をまとめたファイル ) による表示を無効にしている利用者にも情報が伝わらない場合があります 正しく情報が伝わるように 文字装飾を使わずに文字 ( テキスト ) で情報を伝えるか 文字装飾と文字 ( テキスト ) による情報を併用しましょう A 取り消し線がなくても情報が伝わるように 文字で 取り消し 削除 不要にな りました 等の説明を入れましょう 良い例 : 文字で表示 ガーデニング講習会 パソコン講習会 ( 中止になりました ) スーツ講習会 悪い例 : 取り消し線のみで表示 取り消し線は中止になった講習会です ガーデニング講習会 パソコン講習会 スィーツ講習会 取り消し線が伝わらないと中止であることも伝わらない 太字ではなくても情報が伝わるように 文字で説明を入れましょう 良い例 : 太字と文字で表示 太字の講習会は参加申し込み受付中です ガーデニング講習会 ( 申し込み受付中 ) パソコン講習会 ( 申し込み受付終了 ) スイーツ講習会 ( 申し込み受付中 ) 悪い例 : 太字のみで表示 太字の講習会は参加申し込み受付中です ガーデニング講習会 パソコン講習会 スイーツ講習会 W3C( ウェブで利用される技術の標準化をすすめる国際的な非営利団体 ) が使用しない方が望ましい ( 非推奨 ) としていたり ブラウザによって対応していないウェブ技術 ( 要素等 ) を使用しない 参考 関連項目 : 作成基準 Ⅰ 2 公平で安全な情報提供 (1) 作成基準 Ⅱ 1 情報の提供 (2) 83
(2) 情報は記号や記号等の組み合わせのみで伝えず 文字や音声読み上げソフト等でも伝えられるようにする JIS 7.1.1.1/JIS 7.1.3.3 解説 記号によっては音声読み上げソフトで読み上げられなかったり 意図したとおりに読み上げられない場合があります また 音声読み上げソフトで記号を読み上げないように設定している場合もあります そのため 記号のみでページの内容や操作するために必要な情報を提供していると その情報が伝わりにくかったり 伝わらない場合があります 記号等の組み合わせで表現する顔文字や絵文字 ( アスキーアート ) 記号等を繰り返して装飾的な罫線を表現する場合も 音声読み上げソフトでは意図したとおりに伝わらないことがあります 音声読み上げソフトによっては顔文字等を読み上げるように個別に設定できる場合もありますが すべてを設定することはできません 正しく情報が伝わるように 文字 ( テキスト ) で情報を伝えるか 記号を画像にして 音声読み上げソフト等でもその記号で伝えたい情報を伝えられるようにしましょう A 音声読み上げソフトの読み上げ例 記号等 読み上げ例 新潟 長岡 にいがたながおか (T T) てぃーてぃー ---------- じゅっこのまいなす ( ) 等は読み上げないことがある 記号がなくても情報が伝わるように 文字でも説明を入れましょう 良い例 : 文字 ( 数字 ) で表示 講習会参加申し込み手順 1 申込 2 受講決定 3 講習会参加 84 悪い例 : 記号のみで表示 講習会参加申し込み手順 申込 受講決定 講習会参加 画像にした記号も 音声読み上げソフトで意味を読み上げるようにしましょう 良い例 : 画像の顔文字に代替テキスト ( 音声読 み上げソフトで読み上げる文字 ) 入力 定員に達したため 受付は終了しました m( )m 代替テキストの例 ごめんなさい 悪い例 : 記号のみで表示 定員に達したため 受付は終了しました m( )m 参考 関連項目 : 作成基準 Ⅰ 2 公平で安全な情報提供 (1) 作成基準 Ⅱ 1 情報の提供 (2)
(3) 音声読み上げソフト等でも正しく伝えられるように 単語の途中に書式を整えるための空白や強制改行を入れない JIS 7.1.3.2 解説 均等割り付け等にするために単語の途中に空白を入れると 音声読み上げソフト等では一つの単語として認識されず 正しく伝えられないことがあります また 縦書き等にするために単語の途中で強制的に改行を入れると 同様に正しく伝えられないことがあります 音声読み上げソフト等でも正しく伝えられるよう 単語の途中には空白や強制改行を入れないようにしましょう A 単語の途中には 空白を入れないようにしましょう 良い例 : 空白を入れない 目次 単語の途中には 強制改行を入れないようにしましょう 良い例 : 強制改行をしない 目次 悪い例 : 空白を入れて均等割り付け 目次 音声読み上げソフトの読み上げ例 め つぎ 悪い例 : 強制改行 (<br> タグ ) して縦書き 目 次 音声読み上げソフトの読み上げ例 め つぎ 参考 関連項目 : 作成基準 Ⅰ 2 公平で安全な情報提供 (1) 作成基準 Ⅱ 1 情報の提供 (2) 作成基準 Ⅲ 3 ページレイアウト (2) 8 リンク (3) 85
(4) リンクを設定していない文字には リンクが設定されていると誤解 解説 されるような色と下線をつけない JIS 7.1.4.1 一般的なブラウザ ( インターネット エクスプローラ等のホームページを閲覧するた めのソフトウェア ) の初期設定では 文字 ( テキスト ) にリンクを設定すると まだ開 いていないページへのリンクは下線のついた青い文字 一度開いたページへのリンクは 下線のついた紫の文字で表示されます リンクを設定していない文字に下線をつけると どの文字にリンクが設定されている のかわかりにくくなります 下線のついた青や紫の文字にすると更にわかりにくくなり ます リンクが設定された文字かどうか 利用者が見ただけですぐにわかるようにしま しょう リンクを設定していない文字には 下線をつけないようにしましょう 良い例 : 下線のない黒い文字 リンクを設定していない文字 リンクを設定した文字 ( 未読 ) リンクを設定した文字 ( 既読 ) 悪い例 : 下線のある青い文字 リンクを設定していない文字 リンクを設定した文字 ( 未読 ) リンクを設定した文字 ( 既読 ) リンクが設定されているのか見ただけではわからない A 参考 関連項目 : 作成基準 Ⅰ 2 公平で安全な情報提供 (3) 作成基準 Ⅱ 1 情報の提供 (2) 作成基準 Ⅲ 8 リンク (4) 86
(5) 文字は 画面拡大ソフト等を使用しなくても 文字が重なったり一部が欠けたりすることなく 大きさを変えられるようにする ただし 画像にした文字や映像の中に表示される説明用の文字は除く JIS 7.1.4.4 解説 画面拡大ソフト等のホームページ閲覧支援技術を使用していなくても 一般的なブラウザ ( インターネット エクスプローラ等のホームページを閲覧するためのソフトウェア ) で自分の見やすい文字の大きさに変えて閲覧している利用者がいるので 文字の大きさを固定せず 利用者が自由に変えられるようにしましょう また 文字を 200% まで大きくしても 文字が重なったり 文字の一部が欠けたりすることがないようにしましょう 画像にした文字等は大きさを変えられないので 読みやすい大きさにしましょう AA 文字の大きさは ブラウザでも大きさを変えられるように 絶対単位 (pt: ポイント ) ではなく相対単位 (% em) で指定しましょう % : 現在のフォントサイズを 100% とした相対単位 em: 現在のフォントサイズを 1 とした相対単位 ( 文字の大きさはスタイルシート ( 文字の大きさや色 行間の幅 画像の配置等の見栄えに関する情報をまとめたファイル ) で指定 ) インターネット エクスプローラの場合 メニューバーの 表示 - 文字のサイズ の 最大 大 中 小 最小 を選択することで文字の大きさが変わる 参考 関連項目 : 作成基準 Ⅲ 7 文字 ( テキスト )(6) 9 画像 (11) 87
(6) 大きさや色を変えられるように 文字は画像にしない ただし ロゴやデザイン上の表現のために必要やむを得ない場合は除く JIS 7.1.4.5 JIS 7.1.4.9 解説 画像にした文字は 画面拡大ソフト等のホームページ閲覧支援技術を使用していないと大きさを変えることができません また 色を変えることができません 利用者が 自分の読みやすい表示に変えられるように 文字は画像にしないようにしましょう ただし ロゴや書体 筆跡 デザイン上の表現のために必要な場合等は 文字を画像にしてもかまいません 画像にした文字は 必要に応じて音声読み上げソフト等でも伝えられるようにしましょう AA AAA 参考 関連項目 : 作成基準 Ⅲ 7 文字 ( テキスト )(5) 9 画像 (11) 88
(7) 特定の機種や環境でしか正しく表示されない可能性のある 丸数字 (1 2 3) 半角カタカナ( アイウエオ ) や記号 ( ) 等の機種依存文字は使用しない 解説 パソコン等の種類や OS と言われるパソコン等を動かすための基本となるソフトウェアの種類によって 正しく表示されないことがある文字を 機種依存文字 と言います 利用者の使うパソコン等の環境によって異なる文字が表示されたり 文字化けしたりすることがあります スマートフォンでも文字化けすることがあるようですし 今後開発される新しい端末でも必ず正しく表示されるとは限りません また 音声読み上げソフト等で正しく伝えられないこともあります 機種依存文字は 様々な環境で利用されるホームページでは使わないようにしましょう 機種依存文字は どの環境でも正しく表示される文字に置き換えましょう 機種依存文字の例丸数字 1 2 3 4 5 半角カタカナアイウエオカキクケコ単位記号ミリキロセンチメートルク ラム mm cm km mg kg 数学記号 その他 明治大正昭和平成 機種依存文字を使う場合は 画像にしましょう 画像にした機種依存文字は 音声読み上げソフトでも正しく読み上げるよう代替テキスト ( 音声読み上げソフトで読み上げる文字 ) を用意する 参考 関連項目 : 作成基準 Ⅲ 7 文字 ( テキスト )(2)(8) 89
2 (8) 日付 金額 単位 外国語等は 音声読み上げソフト等でも正しく伝わるように表記する 解説 記号を使用して日付や金額を表記したり 大文字のアルファベットで外国語等を表記 すると 音声読み上げソフト等では意図したとおりに伝わらないことがあります 音声読み上げソフト等でも正しく伝えられるように表記しましょう 音声読み上げソフトでも正しく読み上げるように表記しましょう 良い例 : 意図したとおりに読み上げる 表記 2014 年 5 月 15 日 音声読み上げソフトの 読み上げ例 にせんじゅうよねんごがつじゅうごにち 平成 26 年 へいせいにじゅうろくねん 水曜日 すいようび 10 時 じゅうじ 100 円 ひゃくえん 1,234 せんにひゃくさんじゅうよん 半角で, を使用 5 メートルごめーとる 2 階にかい Data でーた 電話 でんわ 悪い例 : 意図したとおりには読み上げない 表記 音声読み上げソフトの 読み上げ例 2014/5/15 ごぶんのにせんじゅうよんじゅうご 分数として読む 2014.5.15 にせんじゅうよんてんごじゅうご H26 えいちにじゅうろく ( 水 ) みず 10:00 じゅうぜろぜろ \100 えんまーくひゃく 半角 100 ひゃく 全角 1,234 いちにひゃくさんじゅうよん 全角で, を使用 5m ごえむ 2F にえふ DATA でぃえーてぃえー 大文字の単語はアルファベット 1 文字ずつ読む傾向がある TEL てぃーいーえる 参考 関連項目 : 作成基準 Ⅲ 7 文字 ( テキスト )(2)(7) 90
2 (9) 利用者の環境の既定の書体で表示されるようにする 解説 利用者の環境で規定ではない書体で表示されるようにすると 想定していたものと異なって表示されることがあります 特に利用者の環境にない特殊な書体で表示するようにすると 文字化けしたり読みにくくなったりする可能性があります 書体は設定せず 利用者の環境で既定の書体で表示されるようにしましょう 書体の設定は以前はよく使用されましたが W3C( ウェブで利用される技術の標準化をすすめる国際的な非営利団体 ) が使用しない方が望ましい ( 非推奨 ) としている 参考 関連項目 : 作成基準 Ⅰ 2 公平で安全な情報提供 (5) 作成基準 Ⅲ 4 コーディングルール (1) 91