④ アクセシビリティへの アクセシビリティへの配慮 への配慮 初心者ユーザ、シニアユーザ、障害者ユーザへの配慮に関わるガイドライン。 （バリアフリー、アクセシビリティ、ユニバーサルデザイン） (a) 用語への 用語への配慮 への配慮 [優先度B] 専門用語、外国語、カタカナ言葉、新語はできるだけ平易な日本語で表記するよう配慮する。これ らの言葉を使用する必要がある場合は用語説明を設ける。 参考：悪い例 リンク先が分かりづらい 参考：良い例 初めての訪問者でもリンク先がある程度、想像できる - 20/33 - ④ アクセシビリティへの配慮 (b) 文字の 文字の配慮 [優先度A] 文字サイズを固定しないようにする。このことにより利用者が文字の大きさをブラウザの設定で調 整できる。背景色と文字色のコントラストを十分取るよう配慮する。 参考：悪い例 背景と文字色のコントラスト差が低く識別が困難 参考：良い例 背景と文字色のコントラスト差が充分に確保されている - 21/33 - ④ アクセシビリティへの配慮 (c) 音声読み 音声読み上げソフトへの ソフトへの配慮 への配慮 [優先度B] 各ページのタイトルをタイトルタグにて記述する、単語中にスペースを入れない、画像にはＡＬＴタ グにて画像名または画像の示す内容（たとえば、円グラフの場合は、「回答の円グラフ」ではなく 「はい 84％ いいえ 16％」のように画像が示しているもの。）を記述する、の３点への配慮は 行うようこころがける。音声読み上げソフトへの対応は、ホームページの作成の配慮でかなりの精 度を実現できる反面、十分な精度を実現するためには数多くの対応項目が存在し、はじめから10 0％を実現することは困難であることも事実である。 参考：悪い例 <img src=”image/dsc10006.jpg” alt=”写真 1” border=” 0”> 音声読み上げソフトは、”写真1”と読み上げる。 参考：良い例 <img src=”image/dsc10006.jpg” alt=”サッカーをし ている男の子” border=”0”> 音声読み上げソフトは、”サッカーをしている男の子”と読み上げる。 - 22/33 - ④ アクセシビリティへの配慮 (d) 画面拡大ソフト 画面拡大ソフトへの ソフトへの配慮 への配慮 [優先度B] 縦型のサイトマップを用意する等の配慮。画面拡大ソフトは、全体の把握がしづらい、ブラウザ下 段にある横スクロールに気づきにくいという傾向がある。 表示例：画面拡大ソフトを使用した例 横スクロールさせるためにスクロールバーへカーソルを移動すると、直前まで読んでいた位置が 分かりづらくなる。 ※ 故意にブラウザのサイズを縮めています。 - 23/33 - ④ アクセシビリティへの配慮 (e) 色調への 色調への配慮 への配慮 [優先度B] 文字と背景、配色において、赤と緑、黄色と青などの組み合わせを避ける。 参考：悪い例 色覚特性によって識別しにくい組み合わせ（色盲の方に見えづらい事がある配色） 色覚特性によって識別しにくい組み合わせ(同上) 明度差が低く高齢者には識別が困難な組み合わせ 参考：良い例 明度の低い背景と明度の高い文字色の組み合わせ。明度差が充分に確保されている - 24/33 - ④ アクセシビリティへの配慮 (f) 操作性への 操作性への配慮 への配慮 [優先度B] クリック数を少なくする、クリックする対象を小さくしすぎないことに配慮する。 目の不自由な方だけではなく、マウス操作に不慣れな方、細かい操作ができない方のために、対 象は小さくしすぎない。 参考：アイコンしかクリックできない例 ･･････ <a href=”news.html”><img src=”arrow.gif” alt=” ” border=”0”></a> 診療を受ける方へのお知らせ ・・・・・ 参考：アイコンと説明 両方をクリックできる例 ･･････ <a href=”news.html”><img src=”arrow.gif” alt=” ” border=”0”> 診療を受ける方へのお知らせ</a> ・・・・・ - 25/33 - ④ アクセシビリティへの配慮 (g) 内容表現への 内容表現への配慮 への配慮 [優先度B] 平易な言葉遣い、図解の有効利用に配慮する。 ⑤ 表示速度への 表示速度への配慮 への配慮 利用者は様々なパソコンや回線環境を使用していることから、最新の環境でなくてもある程度の 表示速度を確保するためのガイドライン。 (a) 文書部分 [優先度B] 文書部分は１５Ｋバイト以内のサイズとなるよう配慮する。 (b) 画像部分 [優先度B] 画像は３０Ｋバイト以内のサイズとなるよう配慮する。これを超える必要がある場合は、小さなサム ネイル画像表示を行い、サムネイルをクリックすることにより実際の大きな画像を表示する方式の 検討を行う。 (c) ページ全体 ページ全体 [優先度B] 上記の文書と画像の大きさを心がけ、ページ全体として６０Ｋバイト程度のサイズとなるよう配慮す る。 参考：接続速度とダウンロードサイズ ADSLが広まったとはいえ、地域や環境によってはISDNやモデム接続の場合もある - 26/33 - ⑥ ホームページ内容 ホームページ内容の 内容の印刷への 印刷への配慮 への配慮 利用者は様々なパソコンやプリンタを使用していることから、利用者がホームページの内容をプリ ンタに印刷した場合に、その横幅がA4用紙に極力収まる様にするための配慮。 (a) ページの ページの横幅 [優先度A] 800×600の画面でページを表示したときに、ブラウザ上に横方向のスクロールバーが表示されな い幅に、ページの横幅が収まる様に配慮する。 参考：確認手順 画面のプロパティで解像度を800×600に変更する ブラウザを最大化して、表示を確認する - 27/33 - ⑥ ホームページ内容の印刷への配慮 (b) ページ内 ページ内の文章の 文章の改行 [優先度A] ページ内の文章の改行の設定は行わず、ブラウザの横幅に合わせて自動的に折り返すように ページを作成する。 表示例：ブラウザサイズ800pxの場合 表示例：ウィンドウサイズ540pxの場合 ウィンドウサイズ540pxの場合、 文章がウィンドウサイズに合わせて改 行される [みんなのウェブアクセシビリティ実証実験ホームページ http://www.jwas.gr.jp/ より抜粋 - 28/33 - 参考：サンプルソース テーブルの幅指定を%指定にする事により、自動的に折り返す <table width="90%" border="0"> <tr><td>･･････</td></tr> <tr><td>･･････</td></tr> </table> 但し、テーブルの<td>タグのnowrap属性を指定した場合<td>～</td>の間は改行されないので注意 <table width="90%" border="0"> <tr><td nowrap>･･････</td></tr> <tr><td nowrap>･･････</td></tr> </table> - 29/33 -
© Copyright 2024 ExpyDoc
