文字の大きさ
縮小
標準
拡大
色の変更
標準
青地に黄色
黄色地に黒
黒地に黄色
  • Foreign language
  • 携帯サイト
  • 市へのお問い合わせ
  • サイトマップ
  • Eメール配信サービス 防災情報などお役立ち情報満載。

ホーム > ウェブアクセシビリティ方針について

ここから本文です。

更新日:2015年8月21日

ウェブアクセシビリティ方針について

伊豆の国市のホームページは、すべての人が利用しやすいホームページを目指して、ウェブアクセシビリティに関するJIS規格(日本工業規格)「高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ」(JISX 8341-3:2010)、および「みんなの公共サイト運用モデル改訂版(2010年度)」を踏まえて、ウェブアクセシビリティに取り組んでいます。

今後とも、ウェブアクセシビリティに配慮したホームページづくりを進めてまいります。

伊豆の国市ウェブアクセシビリティ・ガイドライン

目次

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

アクセシビリティとは
アクセシビリティとは、「アクセスのしやすさ」を意味します。高齢者や障がい者はもちろん病気やけがなどで一時的な障がいのある人など全ての人が、ホームページで提供されている情報に問題なくアクセスでき、だれでも平等に利用できるように制作することです。
日本ではJIS X8341-3:2004が標準です。
平成16年6月20日制定されたこの規格は、主に高齢者、障がいのある人及び一時的な障がいのある人(以下、高齢者・障がい者といいます)が、ウェブコンテンツを利用するときの情報アクセシビリティを確保し、向上させるために、ウェブコンテンツの企画、設計、開発、制作、保守及び運用をするときに配慮すべき事項について規定されています。公共性が求められる行政機関や自治体では、遵守することが重要であるといえます。
同規格は平成22年8月20日に改正版JIS X8341-3:2010が公示されました。旧規格の成果も取り組まれ、動的なウェブや知的障がいをはじめとする認知障がいへの配慮なども重要視されています。また、客観的に検証可能な内容になっており、より国際的・標準的な規格となっています。

伊豆の国市では、コンテンツ管理システムを導入し、各課職員の更新性、利便性を図るとともに、閲覧者の見やすい、使いやすいホームページを目指し、アクセシビリティの準拠に注力していきます。

どんなことに困っているのか

障がいとは

  • 全盲:画面を見ることができない。マウスを操作できない。
  • 弱視:画面を拡大しないと見えにくい。
  • 色覚特性:識別できない色がある。
  • 聴覚障がい:音声が聞こえない。聞きづらい。
  • 運動障がい:手や指先が動かない。動かしづらい。

加齢に伴う変化

  • 加齢に伴い、視覚・聴覚が変化する。
  • 思いどおりに体を動かせなくなる。
  • 全体的な傾向としては、IT関係の専門用語や新語は苦手である。

一時的な状況

  • けがや病気に伴い、視覚・聴覚・運動機能が変化する。
  • 職場環境では、音がでないように設定している。

なぜホームページのアクセシビリティが必要か

障がい者のInternet利用率

インターネットを利用する障がい者の約9割が、利用後の生活の変化について「よい方向に変わった」又は「どちらかと言えばよい方向に変わった」と回答しています。

出典:総務省情報通信政策研究所
「障がいのある方々のインターネット等の利用に関する調査報告書
―国民全般の情報環境との比較を通じて―」

ページ作成の考え方について

ページを作成する際には、「ページ内で伝えるべき情報を提供すること」という考え方で作成します。補足資料として提供するPDFファイルや動画ファイルの情報がなくても、伝えるべき必要最低限の情報は取得できるようなホームページを目指します

ページタイトルについて

各ページに適切なタイトルを入れる

音声ブラウザで読み上げる場合、最初に読み上げるのがページのタイトルです。このタイトルの名前の付け方があいまいだと、何のページなのかが理解しづらく、自分に必要なページなのかそうでないのかも判断できません。
ページのタイトルには、利用者がページの内容を識別できる名称を付けます。
タイトル=見出し1が基本ルールです。

見出しについて

ページ本文には必ず見出しを設定する

見出しとは本や新聞の題名のようなものです。
特に音声プラウザの利用者は、音声で読み上げられる見出しの情報でページ全体を把握し、目的の情報を探すため「見出し」の役割は大変重要です。色やフォントのサイズなど見た目に頼って見出しを表す手段など、正しく見出しが設定されていない場合は、音声プラウザの利用者は本文を読むまでページの内容を把握できません。ページ本文がどんな内容なのか、伝えたいことを的確に表す「見出し」を設定しましょう。

パンくずリストについて

パンくずリストを各ページにつける

多くの情報が提供されているホームページでは、ページを閲覧するうちに、自分がサイト内のどの位置(階層構造)にあるページを閲覧しているのか、そうすれば前のページに戻れるかが分からなくなる可能性があります。
また、検索などで階層の深いページに直接訪問した場合にも、関連情報や他のページへの移動が容易になるため、すべてのページに適切なパンくずリストをつけましょう。
※パンくずリスト
現在観覧しているページのサイト内での位置(階層構造)と、各階層へのリンクを簡潔に示したものです。

読み上げ順について

ページを作成するときには読み上げ順を考慮すること

ページを作成するときには音声プラウザでの読み上げ順を考慮します。
表(テーブル)の要素をレイアウト目的で使用した場合、作成者が意図しない順序で読み上げられる可能性がありますので、表(テーブル)の要素をレイアウト目的で使用しないことが望ましいです。また、単語間に空白文字、改行を入れることも意図しない読み上げをする場合がありますので、単語間に空白文字、改行は入れないようにします。

表について~表題・概要をつける~

分かりやすい表題・概要をつける

表に音声ブラウザが認識できるように表題(キャプション)が設定されていない場合には、音声ブラウザの利用者が表を読み上げていることに気付かないことがあります。このため、音声ブラウザの利用者への表を読み上げていることがわかるように、また表の内容を把握しやすいように、表には表題(キャプション)をつける必要があります。
また、表には視覚的には見えませんが、音声ブラウザでは読み上げられる「概要(テーブル目的/構造)」を設定することができます。
分かりやすい表題と概要を付けて音声ブラウザの利用者へ表であることを明示します。

表について~行・列の見出し~

行や列の見出しを指定する

行や列の見出し項目には見出しの指定をします。表に適切な見出しを指定していない場合、音声ブラウザは、各行・各列の見出し項目を読み上げず、表の内容が把握しづらくなってしまう必要があります。

表について~複雑な構成の表~

複雑な構成の表はできるだけ作成しない

セルの結合を多用すると、音声ブラウザで、各行・各列の見出し項目を意図したとおりに読み上げられないことがあります。セルの結合は極力避けるようにします。
また、表が複雑になりそうな場合は、表を分割して複数の表とすることで、シンプルな表として提供できます。

表について~表形式の情報の掲載~

表の情報を掲載する場合はテーブルを使用すること

表として提供する情報は、スペースやタブを入れて、見た目だけ表のようにした内容を掲載しないでください。音声ブラウザによっては、表形式で提供することで、情報セルと見出しセルの関係性を確認することができる情報があります。

画像形式の代替テキストについて~適切な代替テキスト~

.適切な代替テキストをつける

画像等の非テキスト情報には、代替テキスト(alt属性)を設定します。音声ブラウザなど画像を表示することができないブラウザは、代替テキスト(alt 属性)を参照します。
そのため、代替テキスト(alt属性)には、わかりやすい適切な内容を記述する必要があります。

画像形式の代替テキストについて~簡潔に表記する~

代替テキストは簡潔にする

代替テキストが長くなるようであれば画像の近くに説明文を用意し、代替テキストには画像の概要と説明文のある場所を示すようにします。

画像形式の代替テキストについて~装飾的な画像~

装飾的な画像の代替テキストは空にすること

装飾的な画像に代替テキストを入れると、音声ブラウザを使用している場合、ページの内容を理解する妨げになる場合があります。

装飾的な画像については、音声ブラウザがその画像を無視するように代替テキストに「空(alt="")」を設定するようにします。

画像の代替テキストについて~複数の画像~

複数画像の組み合わせでひとつの内容を伝えている場合

複数の画像でひとつの内容を伝えている場合、代替テキストはひとつの画像にのみ入れて、後の画像の代替テキストは空(alt="")にしましょう。

画像の代替テキストについて~隣り合った画像~

隣り合った画像とテキストにリンクを設定する場合

画像とその画像の説明テキストにリンクを設定する場合、別々にリンクを設定すると、重複した説明を音声ブラウザ利用者に提供することになります。隣り合った画像とテキストにリンクを設定する場合には、画像とテキストを同じリンクの中に入れて画像の代替テキストを空にしましょう。

文字の表記について(1)

日付や曜日は年月日・○曜日と正しく表記する

日付に記号を用いたり、曜日を省略した形で表記すると音声読み上げソフトは正確に情報を伝えることができません。

文字の表記について(2)

時間は時分で表記する

時間を表記するときに記号を用いると、音声読み上げソフトは正確に情報を伝えることができません。正しく、時、分の表記をしましょう。

文字の表記について(3)

単語の途中にスペースを入れない

単語の途中にスペースが入ると、音声読み上げソフトはひとつの単語として認識できないため、的確な読み上げができません。
レイアウト目的のスペースも望ましくありません。音声ブラウザによっては、一文字として認識してしまうことがあります。

文字の表記について(4)

単語の途中に改行を入れない

単語の途中に改行を入れて縦書きに見せるようにしていると、音声読み上げソフトはひとつの単語として認識できないため、的確な読み上げができません。

文字の表記について(5)

読みの難しい言葉はできるだけ使用しない

ページの中で人名や地名などの固有名詞や難しい専門用語を用いる場合、それを読むことができない利用者がいる可能性があります。
また、音声ブラウザでも正しい読み上げが行われない可能性がありますので、フリガナをつけることや、漢字表記をやめることなどの検討をしましょう。
専門用語、行政用語であるため、理解できない利用者がいる可能性があります。括弧書きで説明を併記しましょう。

文字の表記について(6)

フォント種類やサイズを固定にしない

高齢者や弱視者が利用する場合、文字が小さくて読みづらく感じることがあります。ウェブブラウザには、このような場合に文字の大きさを変更して閲覧できる機能があります。フォントサイズを固定するとその機能を利用できなくなるので、フォントサイズを固定しないでください。
コンテンツ管理システムで生成されたホームページでは、フォントサイズはCSSで制御しているため、<font>タグを使用してもサイズは変更されません。

文字の表記について(7)

機種依存文字や半角カタカナを使用しない

特定機種にのみ存在する文字を機種依存文字といいます。
機種依存文字や半角カナは機種依存文字にあたります。機種依存文字を使用すると、OSの違い(WindowsやMacintosh)により文字化けが起きたり、違う文字として表示されたりするため、使用しないようにしてください。

文字の表記について(8)

英単語は半角小文字で表記する

英単語が全て大文字により表記されている場合、音声ブラウザでは、アルファベットが一文字ずつ読み上げられることがありますので、原則として小文字で表記してください。ただし、「NPO」「PHS」などのように略語等で大文字表記が通例となっている場合や製品名などの固有名詞はこの限りではありません。

文字の表記について(9)

数値は半角数字を使用する

数値を全角数字で表記すると、音声読み上げソフトによっては1文字ずつ数字を読んでしまうものもあります。
正確に情報を伝えるために数字は半角で表記するようにしてください。

色について~背景色と文字色~

背景色と文字色には、識別しやすい色の組合せを使う

ホームページで色を使う場合、色の組み合わせに注意します。色の組み合わせによっては弱視・高齢の利用者など、文字が読みにくい、または全く読めないといった問題が起きる可能性があります。背景色と前景色、背景色と文字色のコントラスト(明度差)に配慮が必要です。

色について~色に頼った表現~

色の違いに頼った表現はしない

色で情報を区別しても、伝わらない利用者がいることに配慮してください。見た目だけのための色の指定も避けるようにしましょう。色の違いで情報を伝えているときには、テキストでも同様の情報が伝わるようにしましょう。

色について~明滅を利用しない~

動きのある表現はしない

文字が動いたり、文字が明滅したりするなど、動きのある表現を利用すると情報が伝わらない利用者がいることに配慮してください。

感覚的な情報について

理解や操作のための情報を感覚的な特徴だけで伝えない

内容を理解したり、閲覧のための操作をしたりするための情報を、形、位置、大きさ、方向、音のような感覚的な特徴だけで伝えることがないように、テキストでも該当する情報を特定するようにしてください。

ファイル名・フォルダ名について

半角英数字、ハイフン(-)のみ使用し、わかりやすくする

ファイル名やフォルダ名を漢字やひらがな、全角英数字にするとインターネット上で表示されない場合があります。
また、ファイル名やフォルダ名が長すぎるとアドレスが長くなり、直接入力する場合の負担が大きくなってしまいますので、階層を浅く、わかりやすいファイル名をつけるようにしましょう。尚、ローマ字はヘボン式を用いることとします。

リンクについて~リンク先の内容の表記~

リンク先の内容がわかるようにする

「こちら」や「詳細」のみにリンクを設定すると、リンク先の内容が想像できず、音声読み上げソフトの利用者はどこへリンクされているのか判断することができません。
添付ファイルも同様で、何のファイルで、どのくらいのサイズであるかを表記する必要があります。
必ず、リンク先の内容を表す言葉に対してリンクを設定するようにしましょう。

分かりやすい情報の伝達について

目的や内容が分かる例題やサンプルを提供する

例題やサンプルを提示して理解しやすい情報提供を実施します。

特にお問い合わせフォームなどを作成する場合には、フォームに記載するべき内容や形式、文字の種類等、何を伝えたいのか、どのように記載してほしいのかを例題やサンプルを併記することで、利用者が正しく情報を入力する手助けになるようにしてください。

より良いウェブサイトにするためにみなさまのご意見をお聞かせください

このページの情報は役に立ちましたか?

このページの情報は見つけやすかったですか?