七ヶ浜町ウェブサイトのアクセシビリティに対する取り組みについて
基本方針
ウェブアクセシビリティについては、2004 年6 月に日本規格協会により、「JIS X 8341- 3 ウェブコンテンツ」として規格化され、また、障害者基本法の一部を改正する法律が2004 年6 月4 日に公布し、第19 条の2 に「国及び地方公共団体は、行政の情報化及び公共分野における情報通信技術の活用の推進に当たっては、障害者の利用の便宜が図られるよう特に配慮しなければならない。」という内容が盛り込まれるなど、地方自治体における対応が急務となりました。
本町では、「七ヶ浜町ウェブサイト アクセシビリティガイドライン」を制定し、高齢者、身体の不自由な方、キーボードやマウスを利用しにくい方、小さい画面で閲覧されている方、テキスト専用のブラウザで閲覧されている方など、より多くの方が戸惑うことなく便利に利用する事ができる「ユニバーサル」志向のウエブサイトづくりに努めます。
サイト全体について
ウェブコンテンツは、関連する文法、技術の規格や仕様に準拠し、論理構造にしたがって記述します。
視覚ブラウザを利用すると、文字の大きさ・強調・色・配置などで全体を見渡してそのページの概要を予測することが出来ます。しかし、音声ブラウザではその情報を読み上げない限り内容知ることはできません。そのため、音声ブラウザによってはリンク部分のみを読み上げる・見出し部分のみを読み上げるなどの機能があります。このような機能はウェブコンテンツが文法、規格や仕様に沿って正しく書かれていることを前提として作られているため、正しく書かれていないとその機能を十分に発揮することが出来ません。コンテンツは文字の大きさや色などの違いで表現せず、必ず大見出し・小見出し・本文という論理構造を正しいタグを使って表現します。
コンテンツの表現はスタイルシートを使うようにします。また、スタイルシートを使用する場合は、未対応のウェブブラウザでも利用できるように努めます。
スタイルシートを用いることによって、サイズ、色、行間、背景色などを指定することができます。ただし、すべてのブラウザが等しくスタイルシートに対応しているわけではないため、使用する場合には十分なチェックと使い分けを行います。
すべてのページに内容が判る適切なタイトルをつけます。
ページのタイトルはブックマークへの登録に使われます。もし、タイトル情報が適切でない、または記述されていない場合にはそのページをもう一度開かなければ内容がわからなくなってしまいます。 また、音声ブラウザではタイトルが最初に読み上げられますので、タイトル情報が適切でなければページを一通り読み上げないと、そのページが目的のページかどうかの判断が出来ない場合があり大変不便です。 そのため、タイトル情報は必ずそのページの内容を表す名称をつけるようにします。
ウェブサイト内で迷わないような工夫を行います。
ウェブサイトはいつものページがリンクによって繋がり合うことで全体が構築されています。利用者はリンクをたどってページ間を移動し情報を探していくため、ページの移動に迷わないよう配慮することは重要です。特に階層が深くなると自分がどこにいるのかわからなくなりがちなため、トップページから現在のページまでの階層を表記して全体の構成がわかるようにします。 また、ナビゲーションメニューや見出し、本文のレイアウトは統一性を持たせるように努めると共に、基本的な操作部分は統一するように配慮します。全体構成がわかる総目次(サイトマップ)も用意します。
表は分かりやすい構造にし、複雑な表には属性を使用して構造を区別できるようにします。
データを表形式で表すと、スクリーン・リーダーや音声ブラウザでは表の縦横などの全体像や見出しとデータの違いを把握することが難しくなるため、表の構造を単純にし、見出しには見出しタグを使って他のデータと区別するようにします。一覧表が大きくなる場合は、出来るかぎりセルの結合を使わないなどの配慮も行います。
点滅したり動いたりする表現は出来るかぎり使用しないようにします。
画面を激しく点滅させると光過敏性の症状を持つ人に対して発作を誘発させる危険があります。また、点滅・移動するテキストや画像を読むことが非常に困難な場合もあれば、それが気になって本来の情報に集中できないこともあります。 そのため、テキストは点滅・移動させないようにします。また、アニメーション画像などで該当する場合にも大きさや点滅する速度に注意します。
画面解像度800X(カケル)600 ピクセルでウィンドウを最大化したときに、横スクロールしないようにします。
パソコンの画面解像度は1024X(カケル) 768 ピクセル以上のものが増えてきましたが、ノートパソコンや古い型のパソコンでは画面解像度が800 X(カケル) 600ピクセルの小さな画面が使われていることもあります。 全画面表示で横スクロールが発生すると、縦方向・横方向の2 通りの操作が必要になり、また、横にはみ出した情報を利用者が見落とす可能性もあります。そのため、 画像解像度800X(カケル) 600 ピクセルでブラウザのウィンドウを最大化したときに横スクロールが発生しないように意識して制作します。
フレームは出来るかぎり使用しません。使用する場合はフレーム未対応ブラウザや操作への配慮を行います。
音声ブラウザではフレームを別々のページとして認識し動作するので、操作が難しくなります。また、フレームに対応していないブラウザもあることを考慮し、フレームを使用する場合にはフレームの識別が付くように的確なタイトルをつけ、またフレーム未対応ブラウザーでもページを使用できるように配慮します。
操作全般について
キーボードだけで、全ての操作が行えるようにします。
肢体や視覚に障害があるためマウスなどの画面上の入力位置や座標を指定するポインティングデバイスの使用が困難な方でも、キーボードを使ってブラウザを操作することは可能な場合もあります。 そのため、キーボードの「上方向」「下方向」「Tab 」「Enter 」キーを使って操作できるようにします。
ページを自動的に更新したり、別ページに移動しません。また、新しいページを開くことは必要最低限にします。
ページ内の情報を読むために必要な時間には個人差があり、予測できるものではありません。特に音声ブラウザの場合、読み上げている最中にページが移動したことに気づかず、現在の位置や状況を判断しにくくなり混乱することがあります。 そのため、JavaScriptなどによる自動ページ移動や更新を行わないようにします。 また、やむをえず別ウィンドウを開く場合には、事前に知らせたり、ウィンドウが無数に開くことを避けるようにします。
操作するボタンやリンクテキストなどは、見やすく、操作しやすいように工夫します。
リンクのあるもの(画像・テキスト)は、リンクがあることが見ただけでわかるようにし、マウスなどのポインティングデバイスに不慣れな人でも操作しやすいよう大きさに配慮します。また、「ここをクリック」のようにリンク先がわからない表現をすると利用者の予期しなかったページにジャンプする可能性がある他、音声ブラウザでリンク箇所のみを抜き出して読み上げた場合にはリンク先がまったくわかりません。リンクのあるテキストはリンク先の内容が推測できるものにするよう努めます。
各ページ共通に使われるナビゲーションやメニューは、任意に読み飛ばせるようにします。
ページの上下や左右などに、どのページにも共通のナビゲーションを使用しているページは見た目には操作しやすい反面、障害を持つ人にとってはナビゲーションバーの存在が邪魔になる場合があります。そこで、ナビゲーションバーなどのどのページにも共通で掲載される情報をスキップして本文へショートカットできる仕組みを用意します。
画像について
画像には代替テキストをつけます。
代替テキストとは、画像が表示されない場合に画像の代わりに内容を表すテキストのことです。音声ブラウザやテキストブラウザ、または点字出力の場合にこの代替テキストが使用されるため、その画像の内容を説明する代替テキストを使用します。また、それ自体には意味を持たない飾りとしての画像には、音声ブラウザで読み上げられない半角空白を代替テキストに指定します。
画像のファイルサイズに注意します。
サイズの大きな画像は、そのファイルサイズが大きければ大きいほど全てを表示するまでに時間がかかります。詳細を伝えるための写真資料や画像そのものの質を重視する場合は、事前に小さな画像とファイルサイズを添えた一覧ページを表示し、利用者が必要な画像だけを拡大して利用できるようなページ構成にします。
色や形について
内容を区別するために色や形だけに頼らないようにします。
音声ブラウザやテキストブラウザでは、色や画像を表現することができません。そのため、色や形のみで情報を提供していると内容を理解できない可能性があります。また音声ブラウザでは記号を読み上げないため注意が必要です。 そのため、色や形のみで内容の違いを説明せずに、文字を強調する、記号・画像とテキストを併用するなどの配慮をして、色がなくても判るようにします。
背景色と文字色のコントラストや配色に注意します。
背景色と文字色のコントラストが低いと読みづらくなります。 また、色覚特性のある人や高齢者・弱視の方にとって読みづらい配色がありますので、色を多用する場合は見やすい配色かどうか十分に確認するようにします。
文字について
利用者が自由に文字サイズを拡大・縮小できるようにします。
pt やmm などの単位でのサイズ指定のことを「絶対サイズ指定」といいます。この指定はフォントサイズを固定させることであり、どんな状況でも利用者はそのサイズに変更を加えることができません。 これとは逆に、%やem といった相対的な単位で行うサイズ指定のことを「相対サイズ指定」といいます。 テキストのサイズ指定には、「絶対サイズ指定」は利用せず、利用者のブラウザで文字サイズを変更できる「相対サイズ指定」を行うようにします。
読みの難しい言葉には、その読みが分かるように振り仮名を付けるようにします。
人の名前や地名など読みの難しい固有名詞は音声ブラウザによっては正しく読まない場合があります。 難しい読みをする漢字には正しい読み方が伝わるように、ひらがなかカタカナで読みをつけるようにします。
表現のために単語の途中にスペースや改行を入れません。文字に取り消し線を使用しません。
空白や改行は、音声ブラウザでは一つの区切りとして認識しますので、文字の均等配置をするために「日_時」や「場_所」のように空白を利用して間隔を明けた単語は正常に読み上げられません。単語の途中に空白や改行を入れると検索エンジンなどでも正常に検索することができなくなります。 また、取り消し線など意味が大きく変わる文字修飾タグを使用しても、音声ブラウザではその飾りが読み上げられないことがあり、正反対の意味で伝わってしまいます。見た目の表現だけではなく、意味が伝わるように配慮します。
数値は半角数字を使用します。
数値を全角で入力し、さらにカンマなどを追加すると、音声ブラウザでは数値と認識せず全く異なる読み方をする場合があります。正しい値を伝えるため、数値には半角数字を使用します。
機種依存文字を使用しません。
機種依存文字とは、各OS の規格(JIS 規格等)の違いによって表示が異なったり、または表示できない文字のことです。 特に丸数字や半角カナは使用する頻度が高いため、使用する際は(1)(2)(3)といった別の表記などを行います。特別な理由により機種依存文字を使用する必要がある場合には、文字を画像化した上で代替テキストにその読みを設定して使用します。
単位は出来るだけ日本語で表記するようにします。
1F 、1/1 、(月)(火)、13 :30 、などの単位や省略形は音声ブラウザでは全く異なる意味に解釈される場合があります。正しく内容を伝えるため、単位などは日本語で表記するようにします。
特定の技術・ファイルなど
誰でも操作できる技術を使うようにします。それができない場合は、代わりの方法も用意します。
ブラウザに機能拡張するためのプラグインを追加することで動画や音声の再生ができるようになり、静止画像では表現できなかった複雑な情報も表現することができます。また、JavaScript(ジャバスクリプト) などのプログラムを利用してページに動きをもたせて情報を表示することもできます。しかし、これらの中には操作に制限があるため利用できる人が限定される場合があります。セキュリティ上の問題からJavaScript(ジャバスクリプト)を使用しない利用者には使うことが出来ません。これらの技術を使用する場合は、同等の情報を受け取れる代わりの方法も用意するようにします。
別途ファイルを添付する場合には利用者の環境を考慮します。
Word やExcel 、一太郎ファイルを掲載しても、そのソフトを持っていない利用者は内容を見ることができません。また、PDF ファイルのように専用ソフトをダウンロードして利用する場合にも、ダウンロードに不慣れな初心者や、音声ブラウザ利用者には見ることができません。このため、情報は基本的にHTML を使って掲載するようにしますが、申請書など印刷が目的のファイルや、内容の改ざんを防ぐためセキュリティに配慮が必要など、HTML では支障がある場合のみ別途ファイルを使用し、別途ファイルを使用していること、専用ソフトのダウンロードが必要な場合にはページ下部等にそのソフトの入手先・入手方法を明記します。
この件に関する問合せ
政策課 情報政策係(電話:022-357-2117)