「総合展示ガイド」日本語版と英語版の2種類の入稿用データを制作し、PDFファイルで出力する。レイアウト・編集については、総合展示の空間デザインや『北海道博物館ガイドブック』等の館刊行物に則った形でデザインを行うこと。

北海道博物館多言語解説コンテンツ制作業務仕様書

１業務の名称

北海道博物館多言語解説コンテンツ制作業務

２業務の概要と目的

北海道博物館の施設案内、及び総合展示に係る多言語解説コンテンツとして、総合展示ガイド（印刷物）の入稿用データ、多言語対応ウェブサイト、北海道博物館の既往の資料管理システムと連携可能なスマートフォンによる多言語解説サービス

（展示ガイドアプリ）、同スマートフォン用展示ガイドアプリの表示サイン、同表示サインの場所を示した案内リーフレットの入稿用データを、各コンテンツ間におけるデザイン及びサービスの統一性を確保する観点から包括的に制作し、訪日外国人等への補助メニューを充実させる。

３業務の内容

（１）企画打ち合わせ

多言語解説コンテンツ制作に係る目的、及び展開方法について、北海道博物館担当職員と認識を共有し、制作するコンテンツの企画、演出、編集等について打ち合わせを行う。

（２）「総合展示ガイド」の入稿用データ制作

「総合展示ガイド」日本語版と英語版の2種類の入稿用データを制作し、PDFファイルで出力する。レイアウト・編集については、総合展示の空間デザインや『北海道博物館ガイドブック』等の館刊行物に則った形でデザインを行うこと。

＜１＞制作データ仕様

①体裁：A4判、フルカラー、144頁

②言語：日本語版と英語版の2種類

（日本語原稿、英語原稿、写真、図版データは北海道博物館が受託者に支給する。）

③データ形式

○inddファイル（Adobe社InDesignで制作）またはaiファイル（Adobe社illustrator

で制作）

○PDFファイル（入稿用）

④校正回数：３回

（３）多言語対応ウェブサイトの制作

多言語対応の北海道博物館ウェブサイトを制作する。制作にあたっては、既存の北海道博物館ウェブサイトをベースに、多言語案内・解説コンテンツを新規に追加する。

＜１＞制作条件

①既存の英語コンテンツ（トップページ+固定ページ14ページ）に準じ、中国語（中国）、中国語（台湾）、韓国語、ロシア語版のコンテンツを制作する。

②総合展示の展示ガイドコンテンツ（詳細資料解説）を制作する（300コンテンツ

×日本語、英語を含む6言語。１コンテンツ：日本語原稿で200～300字のテキスト+写真１点）。

③各言語の原稿、及び写真・図版等は、北海道博物館が受託者に支給する。

④その他既存のウェブサイトについて、北海道博物館担当者と打ち合わせのうえ、外国人が閲覧しやすく、かつ情報を更新しやすいウェブサイトに設計変更を行う。

（具体的内容は別紙１のとおり）

＜２＞サイトの仕様

①契約日時点で最新のバージョンのWordPressを用いて制作すること。

②対応するウェブブラウザのバージョンは、次のとおりとする。

Internet Explorer 9以上、Google Chrome 41以上、Firefox 36以上

③パソコン、タブレット端末、スマートフォンいずれのデバイスでも最適化されたページが閲覧できる、レスポンシブウェブデザインとし、いずれのデバイスからも音声、動画の再生が可能であること。

④動画はYouTubeへのリンクによる掲載でも可とするが、この場合は、画面上に

YouTubeのはめ込み画像が表示されるようにすること。

⑤北海道ウェブアクセシビリティガイドライン（別紙２）に配慮したデザインとすること。

⑥Google Analyticsを用いたアクセス解析を行うことができるよう、制作したページに北海道博物館が提供するトラッキングコードの埋め込みを行うこと。

⑦当館のウェブサーバーはIDCに設置しており（ハウジング）、同時に稼働する他システムのセキュリティを確保するため、FTPによる通信は不可とする。WordPressのメディアアップローダーからアップロードを行うことができない（または、適切でない）データは、サーバーへ直接必要なデータを移行するので、北海道博物館にデータを提供すること。

（４）スマートフォンによる多言語解説サービスの構築（展示ガイドアプリ）

来館者が自身のスマートフォンにアプリをダウンロードすることにより、総合展示室内で展示物の詳しい情報を入手できる多言語解説サービスを構築する。

＜１＞制作コンテンツの仕様

①制作数：300コンテンツ×６言語とする。

②１コンテンツ：日本語原稿で200～300字のテキスト+写真１点とする。

③言語：日本語、英語、中国語（中国）、中国語（台湾）、韓国語、ロシア語

④各言語の原稿及び写真は、北海道博物館が受託者に支給する。

＜２＞使用するアプリの条件

①アプリ概要

○展示ガイドアプリは、他の博物館・美術館においても利用可能な汎用性のあるものを採用すること。また、運用開始時にGoogle Play、App Storeからダウンロード可能なアプリであること。

○展示ガイドアプリは、利用者向けアプリ、職員向け管理システム共にクラウド環境で運用することとし、かつ、納品日から５年間の間、利用料やメンテナンス料などの運用期間中のランニングコストが一切発生しないものとすること。

＜３＞アプリ機能仕様

①展示ガイドアプリは、当館にて稼働中の資料管理システム（「X.X.Xxxxxx V11

博物館版」早稲田システム開発株式会社）と連携可能なものとすること。

②展示ガイドアプリはメニュー画面より、他館を含め、利用可能な館がリスト表示されること。

③展示ガイドアプリは、利用可能な館のリストから当該館を選択することにより、館の案内（説明文、画像）ページが表示されること。館の案内は画像の表示、非表示が可能で、画像の差し替えなどが館職員にて自由に行えること。

④展示ガイドアプリの館の案内ページに自館のWebサイトへのリンク設定が行えること。

⑤展示ガイドアプリは対象資料の番号をテンキーで入力することで選択可能であること。

⑥展示ガイドアプリでは、番号選択後、対象資料の名称、画像、説明文、再生ボタンが表示されること。尚、対象資料の画像については非表示も可能とすること。

⑦展示ガイドアプリでは、メニュー画面よりガイドアプリの説明を表示することが出来ること。

⑧展示ガイドメニュー画面より、対象となる言語（日本語、中国語（中国）、中国語（台湾）、韓国語、ロシア語）を選択可能なこと。

⑨展示ガイドアプリでは、選択可能な言語については、将来的な利用も鑑み、上記の他、フランス語、ドイツ語、イタリア語、スペイン語、ポルトガル語も選択可能とすること。

⑩展示ガイドアプリに表示する資料解説は音声データの再生の他、解説文（テキスト）のみの表示、動画（YouTube）の再生が可能であること。

⑪展示ガイドアプリでは、コンテンツの登録、編集は館職員が自由に行えること。

⑫展示ガイドアプリのコンテンツの登録、編集のための管理システムを有すること。管理システムはコンテンツの登録、編集の他、検索機能（キーワード、項目指定）、出力機能（全項目、項目指定）を有すること。また、データベース項目の設定やレイアウトなども自由に行えること。

（５）スマートフォン用展示ガイドアプリの表示サインの制作

（４）を利用者が使用する際に、その場所を示すための表示サイン（番号と対照させるためのもの）を総合展示室内の北海道博物館が指示した場所に制作・設置する。印刷するサインのデザインは、スマートフォン解説のサインであることに配慮したものを新たにデザインする。

＜１＞サイン仕様

①展示ケースやステージ上に設置するための表示サイン（置き型）

○サイズ：60×60mm

○素材・色：アクリル板（白）

○個数：計350個（予備50個含む）

○付属品：斜め置きするための演示具（アクリル製のキャプション立て）300個

②壁付け用の表示サイン（壁掛け型）

○サイズ：200×200mm

○素材・色：アクリル板（白）

○個数：計100個（予備50個含む）

○仕上げ：ピン留めできるようにアクリル板の左右2か所に穴空け加工

（６）表示サインの場所を示した案内リーフレットの入稿用データ制作

（４）の場所を示した案内リーフレットの入稿用データ（PDFファイル）を制作する。

＜１＞制作データ仕様

①体裁：A3判2つ折、4面、フルカラー

②言語：6言語（日本語、英語、中国語(中国)、中国語(台湾)、韓国語、ロシア語）併記の１種類

（6言語原稿、写真、図版データは北海道博物館が受託者に支給する。）

③データ形式

○inddファイル（Adobe社InDesignで制作）またはaiファイル（Adobe社illustrator

で制作）

○PDFファイル（入稿用）

④校正回数：３回

４成果品仕様

（１）「総合展示ガイド」入稿用データ

○DVD-ROM等：正副計２組（データファイルを収納）

○データ形式：①inddファイルまたはaiファイル（Adobe社のIndesign・illustrator用）

②PDFファイル（入稿用）

（２）多言語対応ウェブサイト

○DVD-ROM等：正副計２組（コンテンツデータファイル、操作マニュアルを収納）

○指定するサーバーにコンテンツデータファイルを格納

○Ａ４用紙に出力した操作マニュアル

（３）スマートフォン用展示ガイドアプリのコンテンツデータ

○DVD-ROM等：正副計２組（データファイルを収納）

（４）表示サイン

○置き型：計350個（予備50個含む）

○壁掛け型：計100個（予備50個含む）

（５）「案内リーフレット」入稿用データ

○DVD-ROM等：正副計２組（データファイルを収納）

○データ形式：①inddファイルまたはaiファイル（Adobe社のIndesign・illustrator用）

②PDFファイル（入稿用）

※（１）及び（５）については、2016年2月末日までに納品すること。その他は契約期間内に納品すること。

５版権

成果品の版権は北海道博物館のものとする。

６その他

・本業務において制作物にかかる著作xxに関する一切の権利は、北海道博物館に帰属するものとする。

・受託者は、業務に当たって知りえた情報を善良なる管理者の注意をもって管理し、受領した情報を北海道博物館が合意する目的以外に使用しないこと。

・成果品に瑕疵があったときは、受託者は発注者の指示により速やかに訂正を行うこと。

・本仕様書に記載のない事項についても北海道博物館と協議のうえ、本業務内容に必要と認められる作業については対応する。

別紙１現行ウェブサイトの設計変更内容

１ CMS（WordPress）及びプラグインの更新

WordPress（現在のバージョン 4.1.1）及び下記のプラグインを、契約日現在で最新のバージョンに変更の上動作確認を行い、現行ウェブサイトの動作に不具合があれば修正を行うこと。

【インストール済みプラグインの種類】

Akismet、Biz Calendar、カスタムフィールドテンプレート Easy Pie Maintenance Mode、Meta Slider、Post Expirator

２ウェブサイト全体の機能の追加

（１）ウェブサイトを印刷する際に、印刷用に特化したページを自動で生成するプラグインを組み込むこと。

（２）投稿ページ及び固定ページを複製できるプラグインを組み込むこと。

３ウェブサイト全体のデザイン調整

サイト全体について、閲覧者が最小限のページスクロールで必要な情報が得られるよう、余白やコンテンツの配置を調整すること。

４トップページのデザイン・機能の変更

（１）背景画像（トップページで最も大きく表示される画像）を削除し、背景画像下の Meta Slider（注目情報を表示する部分）を現行のテキスト・画像表示から画像のみの表示に変更する。Meta Slider は、季節ごとやイベント開催時の館内の様子を適宜掲載できるよう、職員による更新が容易なものとすること。

（２）「講座・体験イベント」の欄を、現行（直近３件のみ表示）から、開催まで１ヵ月を切ったイベントが全て表示されるよう変更する。（トップページへの表示／非表示を、イベントごとに設定できるようにする点は、現状どおり。）

表示する情報は、①日時②イベントカテゴリ③イベントタイトル④（受付を終了したイベントのみ）定員のため受付を終了した旨の記載とし、開催までの日数及びイベントの画像は表示しない。

（３）「講座・体験イベント」欄の上部に、「開催中／近日開催の展示会」の項目を設けること。イベント情報と同様、トップページの表示／非表示を展示会ごとに選択できるようにし、開催中の展示会と、トップページの表示を選択した展示会の情報がトップページに掲載されるようにすること。掲載する情報は、①会期②展示会の名称③画像１点とすること。

５イベント情報ページのデザイン・機能の変更

（１）ページ上部にあるイベントカテゴリを削除し、イベント一覧の表示がページ上部に表示されるようにすること。

（２）行事案内（PDF）がダウンロードできるようにすること。

（３）固定ページとして「過去のイベント」のページを新設し、過去のイベントが一覧で表示されるようにすること（イベントカテゴリごとのページは不要）。

（４）イベント投稿ページを次のとおり変更すること。

ア開催期間が１日のイベントについては、始期と終期を表示せず、開催日のみ表示されるようにすること。

イ現在ページごとに HTML を記述し作成しているイベント内容について、カスタムフィールドテンプレートの改修を行い、テンプレート上で必要な情報の入力と画像の選択を行うことにより、自動的にページが生成されるようにすること。

ウ定員に達し受付を終了したイベントについて、チェックボックスへチェックを行うことにより、画面上に「定員に達したため、受付を終了しました。」という文言が表示されるようにすること。また、この文言がトップページ「講座・体験イベント」の欄にも表示されるようにすること。

エ現在トップページに表示されるカレンダーのイベント開催日を色つきにするためには、「Biz Calendar 設定」画面でイベント開催日を入力する必要があるが、イベント投稿ページを作成することにより、イベント開催日が自動的に色つきで表示されるようにすること。

なお開催期間が長期にわたるイベントは、イベント開催日を色つきで表示する必要がないことから、イベントごとにカレンダーへの反映する／しないが選択できるようにすること。

６その他

本仕様書に基づく実施が困難な場合、またはデザイン・機能面でより効果的な方法がある場合は、北海道博物館と受託者で協議し、その内容を定めることができる。

別紙２

１はじめに 1

２ガイドライン作成に当たっての考え方 2

３ウェブアクセシビリティに関する取り組みについて 3

４ウェブアクセシビリティ配慮項目 4

4.1 ページ作成に関する共通事項 7

4.1.1 ページには固有のタイトルを設定する 7

4.1.2 必ず１つ以上の見出しを設定する 8

4.1.3 フォルダ名やファイル名は半角英数で適切に設定する 9

4.1.4 ページの横幅を適切に設定する 10

4.1.5.1 ページは長くなりすぎないように配慮する（１） 11

4.1.5.2 ページは長くなりすぎないように配慮する（２）〜各種対応方法〜 12

4.1.5.3 ページは長くなりすぎないように配慮する（３）〜各種対応方法〜 13

4.1.6 ページの容量に留意する 14

4.1.7 掲載情報は、適切に管理する 15

4.1.8 リスト機能を利用する 16

4.1.9 ページに到達する手段を複数用意する 17

4.1.10.1 正しく簡潔な構文を心がける（１） 18

4.1.10.2 正しく簡潔な構文を心がける（２）

～文章のコピー＆ペーストをする際の注意点～ 19

4.1.11 ヘッダーなどの共通で使用する部品は統一する 20

4.1.12 ナビゲーションを読み飛ばせるようにする 21

4.2 テキストに関する共通事項 22

4.2.1 文字色の違いについてはテキストで補足する 22

4.2.2 形や位置はテキストでも識別できるようにする（情報の識別や指示） 23

4.2.3 単語の間にスペースや改行を挿入しない 24

4.2.4 サイト内で使用する単語は統一する 25

4.2.5.1 文字色と背景色には、十分なコントラスト比を確保する（１） 26

4.2.5.2 文字色と背景色には、十分なコントラスト比を確保する（２）

〜参考：色の使用例について〜 27

4.2.6 日付・時間・通貨の単位は漢字で表記する 28

4.2.7 単語や文章を太字にする際の留意事項 29

4.2.8 移動・点滅するテキストを使用しない 30

4.2.9 顔文字を使用しない 31

4.2.10 書体の変更は最低限にする 32

4.2.11 機種依存文字を使用しない 33

4.2.12 文章を引用する際の留意事項 34

4.2.13 テキストのサイズは利用者が変更できるようにする 35

4.3 リンクの設定に関する共通事項 36

4.3.1 リンク先を推測できるようなテキストで表記する 36

4.3.2 リンクの文字色及び背景色を設定しない 37

4.3.3 リンク画像にはxxx先がわかるよう代替テキストを設定する 38

4.3.4 隣接する画像とテキストに対する同一のリンクは、一つにまとめる 39

4.3.5 リンク切れがないか確認する 40

4.4 画像の使用に関する共通事項 41

4.4.1 グラフなどで、色の違いによって情報を提供している場合は、模様も併用する 41

4.4.2 画像化されたテキストをできるかぎり使わない 42

4.4.3 画像には代替テキストを設定する 43

4.4.4 情報量の多い画像には、画像を説明するテキストを別途提供する 44

4.5 表の使用に関する事項 45

4.5.1 テーブル（表）を使用する場合は単純な構造にすることで、読み上げ順序に配慮する 45

4.6 ダウンロードデータに関する事項 46

4.6.1 データファイルの形式と容量を表記する 46

4.6.2 データファイルの容量を小さくするよう配慮する 47

4.6.3 ＰＤＦファイルで情報を提供する場合は、テキストによる代替情報を提供する 48

4.6.4 ダウンロードデータを利用するためのプログラムの入手先を明示する 49

4.7 入力フォームに関する事項 50

4.7.1 アンケートなどの各項目に入力すべき内容を説明する 50

4.7.2 利用者に入力操作を行わせる際の留意事項 51

4.7.3 プルダウンメニューはマウスだけでなくキーボードでも操作できるようにする 52

4.8 キーボード操作に関する事項 53

4.8.1 利用者の意図しないページの変化が起きないようにする 53

4.8.2 キーボードだけで、すべての操作ができるようにする 54

4.8.3 フォーカスについて 55

4.9 音声・動画に関する事項 56

4.9.1 GIFアニメーション画像を使用する際の留意事項 56

4.9.2 音声や映像の代替手段を用意する 57

4.9.3 音声や映像の再生は、利用者が制御できるようにする 58

4.10 せん光に関する事項 59

4.10.1 「せん光」を用いた表現をしない 59

4.11 特定の技術その他に関する事項 60

4.11.1 言語コードを設定する 60

4.11.2 複雑なレイアウトや装飾などは、スタイルシートを用いて表現する 61

4.11.3 Flash・Javaアプレット・JavaScriptを使用しない 62

4.11.4 フレームを使用しない 63

4.11.5 イメージマップを使用する場合には、適切な代替テキストを設定する 64

５チェックリスト 65

近年、インターネットの急速な進展や、スマートフォンの急速な普及など情報入手手段の多様化に伴い、ネット系広報をめぐる社会経済情勢は目まぐるしく変化しています。

ネット系広報の基本ツールであるウェブサイトは、文字や画像など様々な情報を多くの利用者に届けるツールのひとつです。

インターネットの浸透により、高齢者や障がい者にとってもウェブサイトは重要な情報源となっていますが、情報を提供する側が適切に対応をしないと、高齢者や障がい者がウェブサイトから情報を取得できない、操作できないといった問題が発生します。

このため、高齢者や障がい者を含めた誰もがウェブサイトを支障なく利用できるよう、ウェブアクセシビリティの重要性を理解し、適切な対応を行うことが重要です。

ウェブアクセシビリティとは、高齢者や障がい者といった、ウェブサイトの利用に何らかの制約があったり利用に不慣れな人々を含めて、誰もがウェブサイトで提供される情報や機能を支障なく利用できることを指しています。

このための指針として、ウェブアクセシビリティに関する日本工業規格が定められるとともに総務省で「みんなの公共サイト運用モデル」が定められ、地方公共団体等に対し、ウェブアクセシビリティに関する方針を策定し、公開するよう求めています。

★みんなの公共サイト運用モデル

また、平成２８年度に施行される障害者差別解消法（通称）では、障がい者の社会的障壁を取り除くために必要で合理的な配慮を行うこととされており、ウェブサイトを通した情報発信についても、同様の配慮が必要とされています。

★障害を理由とする差別の解消の推進に関する法律

このような背景から、北海道としてもウェブアクセシビリティに配慮するため、北海道公式ウェブサイト全7万ページのうち12,000ページ以上を対象に現状を把握、その結果を踏まえ達成基準及びポリシーを策定するとと

もに、各部局のトップページやアクセス数が多いページなど、主要な約2,500ページを対象に改修を行ったほか、各職員による今後の運用を想定し本ガイドラインを作成するなど一連の事業を、平成２５年度から２６年度にかけて、委託業務により実施してきたところです。

本ガイドラインをＣＭＳ操作説明書と併せて活用することで、ウェブアクセシビリティ向上に努め、利用者がより利用しやすいウェブサイトの構築に努めてください。

本ガイドラインは以下に示す利用者を想定して作成しています。

（１）ウェブサイト利用者

年齢や性別、身体の障がいの有無などに関らず、ウェブサイトを利用するすべての利用者

（２）ウェブサイトを利用する環境

ウェブサイトを利用するさまざまな環境を想定しています。

・デスクトップ型パソコンやノート型パソコン、モバイル端末などハードウェアの違い

・ブロードバンドやナローバンドなどの通信環境の違い

・Windows やMacintosh などのOS（基本ソフト）の違い

・Internet Explorer やFirefox などインターネットブラウザの違い

・キーボードやマウスなど操作機器の違い

・カラーやモノクロなどディスプレイの表示機器の違い

・身体障がいの状況に応じた入出力機器などの違い

（３）適用範囲

下記のドメイン以下に配置されているページで、コンテンツマネジメントシステム（CMS）のテンプレート機能を用いたページを対象とします。

なお、JavaScriptを用いているページについては、対象範囲から除外するものとします。

・xxxx://xxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxxx.xxxx.xxxxxxxx.xx.xx/

・xxxx://xxx.xxxxxx.xxxx.xxxxxxxx.xx.xx/

（４）参考とする規格等

・日本工業規格

「JIS X 8341-3 : 2010『高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第3 部：ウェブコンテンツ』」

・総務省

「みんなの公共サイト運営モデル」

・W3C

「ウェブコンテンツ・アクセシビリティガイドライン2.0」（WCAG 2.0）

3 ウェブアクセシビリティに関する取り組みについて

北海道では、ウェブアクセシビリティ向上のため、各職員が以下の通り取り組んでいきます。

（１）取り組み体制について

北海道公式ウェブサイトの管理・運営を行う広報広聴課が、コンテンツを作成する各職員へ本ガイドラインなどの周知に向けた研修などの取り組みを行うことで、ウェブアクセシビリティ向上に取り組んでいきます。

（２）職員の意識向上について

本ガイドラインを周知し、CMS操作説明書と併せて運用することで、ページ作成に携わる職員がウェブアクセシビリティ向上に取り組んでいきます。

職員がページを作成・更新する場合は、チェックリストを適宜活用するなどウェブアクセシビリティの達成状況や留意点を確認し、適切な配慮を行った後に公開していくよう努めます。

（３）委託業者への取り組み

今後委託業者によるページ制作にあたっては、本ガイドラインの趣旨を踏まえウェブアクセシビリティ配慮に関する事項を示し、遵守を求めていきます。

（４）検証について

ウェブアクセシビリティに関する対応状況については、本ガイドラインやチェックリストを使用して、作成・更新したページはもとより、既存のページについても機会を見ながら検証していきます。

ウェブアクセシビリティ配慮項目

4

本ガイドラインに示すウェブアクセシビリティ配慮項目として、ウェブアクセシビリティに関する日本工業規格を元に、北海道公式ウェブサイトにおいて重点的に配慮すべき項目を以下に設定しました。

本ガイドラインは既に「CMS操作説明書」が運用されている実態があることから、ウェブアクセシビリティのためのマニュアルの役割を果たすこの章に配慮項目毎の対応方法を記載するとともに、CMS上における具体の操作については、イントラネット上に掲載したCMS操作説明書（HTML版）の該当ページへのリンクを設定し簡単に参照できるようにするなど、よりウェブアクセシビリティを理解し実践しやすくなるよう工夫しました。

★コンテンツ管理システム利用支援のページ

xxxx://xxxxx/xxx/xxx/

なお、北海道公式ウェブサイトでは、特定の技術（CSSやJavaScriptなど）を原則使用禁止としていますが、作成の都合上、委託業者やホームページ編集の詳しい職員がやむなく使用する場合、代替手段による情報提供や、当該ページの更新マニュアル作成などにより担当職員の変更後もページ更新が可能になるなど、運用に支障ないよう対策を必ず行うよう求めています。

ウェブアクセシビリティ配慮項目一覧

本ガイドラインに示すウェブアクセシビリティ配慮項目として、ウェブアクセシビリティに関する日本工業規格を元に、北海道公式ウェブサイトにおいて重点的に配慮すべき項目を設定しました。

4.1 ページ作成に関する共通事項

4.1.1 ページには固有のタイトルを設定する

4.1.2 必ず１つ以上の見出しを設定する

4.1.3 フォルダ名やファイル名は半角英数で適切に設定する

4.1.4 ページの横幅を適切に設定する

4.1.5.1 ページは長くなりすぎないように配慮する（１）

4.1.5.2 ページは長くなりすぎないように配慮する（２）〜各種対応方法〜

4.1.5.3 ページは長くなりすぎないように配慮する（３）〜各種対応方法〜

4.1.6 ページの容量に留意する

4.1.7 掲載情報は、適切に管理する

4.1.8 リスト機能を利用する

4.1.9 ページに到達する手段を複数用意する

4.1.10.1 正しく簡潔な構文を心がける（１）

4.1.10.2 正しく簡潔な構文を心がける（２）

～文章のコピー＆ペーストをする際の注意点～

4.1.11 ヘッダーなどの共通で使用する部品は統一する

4.1.12 ナビゲーションを読み飛ばせるようにする

4.2 テキストに関する共通事項

4.2.1 文字色の違いについてはテキストで補足する

4.2.2 形や位置はテキストでも識別できるようにする（情報の識別や指示）

4.2.3 単語の間にスペースや改行を挿入しない

4.2.4 サイト内で使用する単語は統一する

4.2.5.1 文字色と背景色には、十分なコントラスト比を確保する（１）

4.2.5.2 文字色と背景色には、十分なコントラスト比を確保する（２）

〜参考：色の使用例について〜

4.2.6 日付・時間・通貨の単位は漢字で表記する

4.2.7 単語や文章を太字にする際の留意事項

4.2.8 移動・点滅するテキストを使用しない

4.2.9 顔文字を使用しない

4.2.10 書体の変更は最低限にする

4.2.11 機種依存文字を使用しない

4.2.12 文章を引用する際の留意事項

4.2.13 テキストのサイズは利用者が変更できるようにする

4.3 リンクの設定に関する共通事項

4.3.1 リンク先を推測できるようなテキストで表記する

4.3.2 リンクの文字色及び背景色を設定しない

4.3.3 リンク画像にはxxx先がわかるよう代替テキストを設定する

4.3.4 隣接する画像とテキストに対する同一のリンクは、一つにまとめる

4.3.5 リンク切れがないか確認する

4.4 画像の使用に関する共通事項

4.4.1 グラフなどで、色の違いによって情報を提供している場合は、模様も併用する

4.4.2 画像化されたテキストをできるかぎり使わない

4.4.3 画像には代替テキストを設定する

4.4.4 情報量の多い画像には、画像を説明するテキストを別途提供する

4.5 表の使用に関する事項

4.5.1 テーブル（表）を使用する場合は単純な構造にすることで、読み上げ順序に配慮する

4.6 ダウンロードデータに関する事項

4.6.1 データファイルの形式と容量を表記する

4.6.2 データファイルの容量を小さくするよう配慮する

4.6.3 ＰＤＦファイルで情報を提供する場合は、テキストによる代替情報を提供する

4.6.4 ダウンロードデータを利用するためのプログラムの入手先を明示する

4.7 入力フォームに関する事項

4.7.1 アンケートなどの各項目に入力すべき内容を説明する

4.7.2 利用者に入力操作を行わせる際の留意事項

4.7.3 プルダウンメニューはマウスだけでなくキーボードでも操作できるようにする

4.8 キーボード操作に関する事項

4.8.1 利用者の意図しないページの変化が起きないようにする

4.8.2 キーボードだけで、すべての操作ができるようにする

4.8.3 フォーカスについて

4.9 音声・動画に関する事項

4.9.1 GIFアニメーション画像を使用する際の留意事項

4.9.2 音声や映像の代替手段を用意する

4.9.3 音声や映像の再生は、利用者が制御できるようにする

4.10 せん光に関する事項

4.10.1 「せん光」を用いた表現をしない

4.11 特定の技術その他に関する事項

4.11.1 言語コードを設定する

4.11.2 複雑なレイアウトや装飾などは、スタイルシートを用いて表現する

4.11.3 Flash・Javaアプレット・JavaScriptを使用しない

4.11.4 フレームを使用しない

4.11.5 イメージマップを使用する場合には、適切な代替テキストを設定する

各項目の説明

ウェブアクセシビリティ配慮項目の解説ページでは、いくつかのカテゴリや項目に沿って説明しています。このページでは、その構成と項目についての説明をします。

【タイトル】

ウェブアクセシビリティ配慮項目のタイトルです。

【該当JIS項目】該当するJIS規格の項目です。

【等級】

JIS規格によって定められたウェブアクセシビリティ配慮のレベルです。最も優先すべき配慮項目がAとなっており、その上位のレベルとしてAA、さらに上位のレベルとしてAAAが用意されています。

（本書ではAAまでを掲載）

【説明】

ウェブアクセシビリティ配慮項目について、具体的に説明しています。

【対応方法】

『CMS操作説明書』の記載内容などに沿って対応方法を説明しています。

【対象者】

ウェブアクセシビリティ配慮項目が特にどの利用者に配慮しているのかをアイコンで示しています。

【アイコンの説明】

視覚に障がいがある人

全盲や色弱の利用者など、視覚による情報入手が難しい利用者に対しての配慮項目です。

聴覚に障がいがある人

音が聞き取りにくいなど、聴覚による情報入手が難しい利用者に対しての配慮項目です。

身体能力に障がいがある人

肢体不自由の利用者など、マウスやキーボードなどの操作が難しい利用者に対しての配慮項目です。

ページの閲覧に時間がかかってしまう人など

ウェブページの内容を理解するのに時間がかかる利用者などに対しての配慮項目です。

※これらの利用者は、音声読み上げソフトなどの補助ツールを使用することが想定されます。

【テクニカルアイコン】 CMSの標準画面以外でページを編集する際に必要となる、技術的な操作方法の説明です。

【補足】

補足情報を記載しています。

【CMS操作説明書該当ページ】

『CMS操作説明書』に該当ページがある場合、ページを示すとともに、ネット版にリンクしています。

【優先度】

この基準を達成する優先度を３パターンで示しています。

・「必須」……必ず達成してください

・「推奨」……可能な限り達成してください

・「参考」……達成するには高度な技術が必要ですが、達成に向けた取組を進めることが望まれます

ページには固有のタイトルを設定する

対象者：

優先度：必須

4.1.1

等級： A

該当JIS項目： 7.2.4.2

説明

書物や書類にタイトルが必要であるように、ウェブサイトにおけるページにもタイトルが必要です。タイトルは、利用者と検索エンジンに対してページの内容を端的に伝えるものです。

また、音声読み上げソフトは、最初にページのタイトルを読み上げることで利用者にページの内容を伝達することから、タイトルが不適切である場合、ページの概要を把握するのが困難となります。

対応方法

HTML

●他のページとの識別ができ、ページの内容が判断しやすいタイトルをつける。複数ページが同じタイトルとなっている場合は、内容に合うよう修正する。

headタグ内のtitleタグを用いて、ページタイトルを指定する。

※タイトルは、ブラウザのタイトルバーに表示されるだけでなく、ブックマーク（お気に入り）への登録や、検索エンジンの結果表示にも使用される。ここでは、タイトルバーにタイトルが表示されている状況を例として説明している。

○ 良い例

【適切なタイトルをつけた場合】

○ ページの内容が判断できる。

× 悪い例

【タイトルが重複している場合】

×ページの内容が判断できない。

ＣＭＳ操作説明書（PDF版）３９ページ（ページタイトルの入力）

WEB版にリンクする場合はこちら >>

必ず１つ以上の見出しを設定する

対象者：

優先度：必須

4.1.2

等級：A、AA

該当JIS項目： 7.1.3.1、7.2.4.6

説明

「タイトル」はページの内容を端的に要約したものですが、「見出し」はページ内の章や節の最初に置かれる表題となるものです。書物や書類の章ごとに表題があるように、ページ内にも内容を適切に伝えるために、見出しを設定する必要があります。

色やフォントのサイズなどの装飾で、見出しを表している場合がありますが、音声読み上げソフトの利用者には、文章の一部のようにしか聞こえないので、本文を読み終わるまでページの概要を把握できません。

そのため、見出し機能を設定し、早い段階で適切に概要を理解していただく必要があります。

対応方法

●ページの最初に、見出しの範囲を選択し、編集アイコンからHeading1を設定する。

●Heading1は必ず１ページに１つだけ設定する。

HTML

●編集アイコンを使い、各章の最初にHeading2からHeading6を設定する。数字が大きくなるにつれて下位の見出しになる。

見出しとなるテキストに対して<h1>テキスト<h1>などとなるように設定する。

※音声読み上げソフトには、見出しだけを読み上げる機能や、見出しの前にメッセージ音を鳴らすなどの機能があり時間を必要とせず、かつ的確にページの概要を把握することができる。

○ 良い例

【適切な見出しを設定した場合】

○ 見出しだけを抜き出して読み上げることができる

ためページの概要を把握しやすい。

× 悪い例

【装飾のみで見出しを設定している場合】

文字を大きく、太字にしているだけで、見出し（Heading）は設定されていない

× 見出しだけを抜き出して読み上げることができず、文章がひたすら読み上げられるように聞こえるため、ページの概要を把握しにくい。

【装飾目的で見出しを設定している場合】

× 本来見出しではないところで、メッセージ音が

なってしまい、混乱を招く。

ＣＭＳ操作説明書（PDF版）１６６ページ（文字を見出しとして設定）

WEB版にリンクする場合はこちら >>

Heading2

Heading1

4.1.3

フォルダ名やファイル名は半角英数で適切に設定する

該当JIS項目：なし

等級：なし

対象者：

優先度：推奨

説明

URLは、インターネット上の住所とでも言うべきもので、ドメインやフォルダ名、ファイル名によって構成されており、その内容は、住所としての役割を果たすため、固有のものである必要があります。

URLからもそのページの内容を推測できることが望ましいため、単なる数字の羅列や意味のない文字列は不適切です。直接入力されることもあるため、長すぎるものもまた不適切です。

また、日本語や全角英数字を使用した場合、ページが正しく表示されない不具合が発生する可能性があるため、フォルダ名・ファイル名は半角英数のみを使用し適切に設定する必要があります。

対応方法

●半角英数（小文字）を使用しフォルダ名・ファイル名を設定する。

ＣＭＳ操作説明書（PDF版）７７～８１ページ（ファイル名変更方法）

WEB版にリンクする場合はこちら >>

● ファイル名から内容が推測できるように努め、xxxないよう考慮する。

○ 良い例

【適切なフォルダ名・ファイル名をつけた場合】

フォルダ名

ファイル名

○ アドレスが短く内容を類推できる

× 悪い例

【フォルダ名・ファイル名が長い場合】

フォルダ名

ファイル名

×アドレスを直接入力するのが難しい

ページの横幅を適切に設定する

対象者：

優先度：推奨

4.1.4

等級：なし

該当JIS項目：なし

説明

ページを閲覧するため使用するモニタは、大きいもの・小さいもの・正方形のもの・長方形のものなど、大きさも形も様々です。

利用者のモニタを考慮し、どのようなモニタでも見やすいものとするためにページの横幅を一定数値以内に設定する必要があります。

これは、横幅が大きいページを作成した場合、横幅の狭いモニタを使用している利用者が縦だけでなく横にもスクロール（移動）が必要となり、ページを閲覧する時間の増加を避けるための配慮となります。

※平成27年2月現在、北海道公式ウェブサイトの横幅は、 750ピクセルで作成されています。

対応方法

HTML

●テーブルやセル、画像などに横幅を指定する場合は750ピクセル以内の数値を指定する。

ＣＭＳ操作説明書（PDF版）１３２ページ（テーブル挿入方法）

WEB版にリンクする場合はこちら >>

table要素やtd要素・th要素のwidth属性は、750以下の数値を指定する。

○ 良い例

○ ページ全体が見渡せ、

ページを見やすい。

大きいモニタ

小さいモニタ

× 悪い例

×ページ全体が見渡せず、

ページが見にくい。

大きいモニタ

小さいモニタ

ページは長くなりすぎないように配慮する（１）

対象者：

優先度：推奨

4.1.5.1

等級：なし

該当JIS項目：なし

説明

長すぎるページは、見るのが面倒になることがあります。また、利用者からの声として「ページがxxxて使いにくい」「情報を探しにくい」などという指摘が寄せられることがあります。

また、弱視の利用者や読み上げソフトなどの利用者は、情報を取得するためにより多くの時間が必要となります。さらに、上肢に障がいがある利用者は、スクロール操作が困難な場合があります。

こうしたことから、ページは、長くなりすぎないように配慮する必要があります。

対応方法

●ページの長さは、650ピクセルを1画面とし、約3画面以内とすることが望ましい。

●ページ内容の区切りで別ページに分割する。 → 4.1.5.2参照

●新着情報欄がある場合、過去の新着情報を別ページに分割する。 → 4.1.5.3参照

ＣＭＳ操作説明書（PDF版）該当なし

●【例外】縦長のページ構成が必要不可欠なページには、ページ先頭に簡潔な説明の挿入、ページ内リンク、「ページ先頭に戻る」リンク設定などの工夫をする。 → 4.1.5.3参照

○ 良い例

【適切な長さのページ】

× 悪い例

【不適切な長さのページ】

650ピクセル

最下部までに約３回

スクロールが

必要

最下部までに約１１回

スクロールが

必要

○ 適切な長さにすることで見やすいページとなる。

×ページが長いため、目的の情報を探すのに時間が

かかり、見にくいページとなる。

ページは長くなりすぎないように配慮する（２）

〜各種対応方法〜

4.1.5.2

ページ内容の区切りで別ページに分割する

■■◇◇◇◇について 1ページ目■■

1. △△△△について

1-1. ★★★★について

・・・・・・・・・・・

・・・・・・・・・・・・・・

1-2. ◆◆◆◆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

1-3. ☆☆☆☆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

2. ◆◆についてはこちらをクリック

■■◇◇◇◇について■■

1. △△△△について

2. ◆◆◆◆について

3. △△△△について

xxxx

1. △△△△について

1-1. ★★★★について

・・・・・・・・・・・

・・・・・・・・・・・・・・

1-2. ◆◆◆◆について

■■◇◇◇◇について２ページ目■■

2. ◆◆◆◆について

2-1. ☆☆☆☆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

2-2. △△△△について

・・・・・・・・・・・

・・・・・・・・・・・・・・

2-3. ★★★★について

・・・・・・・・・・・

・・・・・・・・・・・・・・

3. △△についてはこちらをクリック

・・・・・・・・・・・

・・・・・・・・・・・・・・

×

1-3. ☆☆☆☆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

2. ◆◆◆◆について

2-1. ☆☆☆☆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

2-2. △△△△について

・・・・・・・・・・・

・・・・・・・・・・・・・・

2-3. ★★★★について

・・・・・・・・・・・

・・・・・・・・・・・・・・

■■◇◇◇◇について３ページ目■■

3. △△△△について

3-1. ★★★★について

・・・・・・・・・・・

・・・・・・・・・・・・・・

3-2. ☆☆☆☆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

3-3. ◆◆◆◆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

「◇◇◇◇について」

にもどる

3. △△△△について

3-1. ★★★★について

・・・・・・・・・・・

・・・・・・・・・・・・・・

3-2. ☆☆☆☆について

・・・・・・・・・・・

・・・・・・・・・・・・・・

3-3. ◆◆◆◆について

・・・・・・・・・・・

ＣＭＳ操作説明書（PDF版）４２ページ（リンク設定方法）

WEB版にリンクする場合はこちら >>

・・・・・・・・・・・・・・

ページは長くなりすぎないように配慮する（３）

〜各種対応方法〜

4.1.5.3

過去の新着情報を別ページに分割する。

■■新着情報■■

2014年11月10日・・・・・・・・

2014年10月30日・・・・・・・・

2014年10月 1日・・・・・・・・

2014年 9月22日・・・・・・・・

2014年 9月15日・・・・・・・・

2014年 9月 3日・・・・・・・・

2014年 8月29日・・・・・・・・

・

2010年11月11日

■■新着情報■■

2014年11月10日・・・・・・・・

2014年10月30日・・・・・・・・

2014年10月 1日・・・・・・・・

2014年 9月22日・・・・・・・・

過去の新着情報はこちら

■■過去の新着情報■■

2014年 9月15日・・・・・・・・

2014年 9月 3日・・・・・・・・

2014年 8月29日・・・・・・・・

2014年 8月 6日・・・・・・・・

2014年 7月19日・・・・・・・・

2014年 7月10日・・・・・・・・

・

クリック

・

2010年11月11日

例外：縦長のページ構成が必要不可欠なページには、ページ先頭に簡潔な説明の挿入、ページ内リンク、「ページ先頭に戻る」リンク設定などの工夫をする。

■■◇◇◇◇について■■

1. ◎◎についてへ

2. ▲▲についてへ

クリックで目的の項目までジャンプできる

1. ◎◎について

・・・・・・・

・・・・・・・・・・・・

・・・・・・・・・・・

・・・・・・・・・・・・

クリックでページの

先頭までジャンプできる

ページの先頭へ

2. ▲▲について

・・・・・・・・・・・

・・・・・・・・・・・・

・・・・・・・

ページの先頭へ

ＣＭＳ操作説明書（PDF版）４２ページ（リンク設定方法）

WEB版にリンクする場合はこちら >>

１２８ページ（ページ内リンクの設定方法）

WEB版にリンクする場合はこちら >>

ページの容量に留意する

対象者：

優先度：推奨

4.1.6

等級：なし

該当JIS項目：なし

説明

利用者の中には、回線速度の遅い回線や、性能の低い機種を使用している方々がいます。

ファイルサイズが必要以上に大きい場合、閲覧時の読み込みに時間がかかることにより、必要な情報を取得しにくくなったり、利用者がストレスを感じたりする場合があります。

そうした利用者も使いやすいページとするために、容量に留意することが必要となります。

対応方法

●ページの不要な装飾をしない。

●画像の枚数やサイズに留意する。利用するファイルのサイズは基本的には1MB以内とし、ボリュームのある資料などであっても3MBを超えないようにする。

ＣＭＳ操作説明書（PDF版）１２０ページ（画像のリンク設定方法）

WEB版にリンクする場合はこちら >>

●ファイルサイズの大きい画像を掲載する必要がある場合は、サイズを落とした画像のサムネイルを掲載するとともに元の画像を別ページに掲載し、リンクを設定する。

○ 良い例

○ ページが短時間で表示される

× 悪い例

×画像が多用され、また、ファイルサイズの大きい画像

があることから、ページの表示に時間を要する

サムネイルをクリックすると、拡大写真のページに移動する

掲載情報は、適切に管理する

対象者：

優先度：推奨

4.1.7

等級：なし

該当JIS項目：なし

説明

ウェブサイトに掲載する情報には、年月の経過とともに現状と合わなくなるものがあります。

「掲載情報」の更新が滞り、古い情報が掲載され続けているページや、数カ月以上前に掲載された情報が新着情報として掲載されているページは、利用者に不適切な情報を提供することにより、サイトの信頼が損なわれる場合があります。

そのため、掲載情報を適切に管理することは、非常に重要です。

対応方法

●一つの項目の掲載件数は10件ほどを目安にし、多くなり過ぎないようにする。

●掲載情報は、掲載日数を設定し、運用する。

●古い情報が掲載され続けていないか、定期的に確認する。

ＣＭＳ操作説明書（PDF版）該当なし

●新着情報をアーカイブとして保存する必要がある場合は、「過去の新着情報」など別ページを用意し、xx移行するようにする。

○ 良い例【適切に管理されている場合】

○ 掲載情報の件数が適切であり見やすい。

× 悪い例【掲載件数が多く、古い情報が掲載されている場合】

× 掲載件数が多く目的のページを見つけにくい。すでに終了したイベントが掲載されている。

リスト機能を利用する

対象者：

優先度：推奨

4.1.8

等級： A

該当JIS項目： 7.1.3.1、7.2.4.１

説明

北海道公式ウェブサイトでは、「■」「●」などを使用して、箇条書きとしている場合が多く見られます。

音声読み上げソフトの利用者は、これらが「くろしかく」「くろまる」と読まれるなどにより、その部分が箇条書きであることを認識することが困難になります。

そのため、「リスト機能」を設定し、適切に情報を伝える必要があります。

対応方法

●リストに設定する範囲を選択し、編集アイコン（箇条書き）、（段落番号付き）のいずれかを

HTML

用いてリストを設定する。

ul、olタグを用いて、リストを設定する。

ＣＭＳ操作説明書（PDF版）１６９・１７０ページ（文字を箇条書きにする）

WEB版にリンクする場合はこちら >>

ulは箇条書きリスト、olは段落番号付きリストに使用する。

※音声読み上げソフトには、リスト機能を設定した部分にメッセージ音を鳴らし、箇条書きや段落であることを伝達する機能などがある。

○ 良い例

【リスト機能を使用した場合】

○ 箇条書きや段落であることが、どの利用者にも伝わりやすくなる。

× 悪い例

【リスト機能を使用していない場合】

×メッセージ音が鳴らず、単に続けて読まれるだけのた

め、箇条書きであることを認識することが困難。

【箇条書きのような配置だがリスト機能が使用されていない場合】

×メッセージ音が鳴らず、単に続けて読まれるだけのため、

新着情報リストの一覧であることを認識することが困難。

リスト機能なし

先頭が「数字」

先頭が「くろしかく」

段落番号付きリスト

箇条書きリスト

ページに到達する手段を複数用意する

対象者：

優先度：推奨

（一部対応済み）

4.1.9

等級： AA

該当JIS項目： 7.2.4.5

説明

ページに対して複数の到達手段を設けることで、利用者がサイト内の様々なページを行き来することができ、主要な情報へたどりつきやすくなるなど、より使いやすいサイトになります。

対応方法

●利用者が使いやすい分類、イメージしやすい経路でたどりつけるよう、各部局のトップページなどに主要な情報が掲載されたページへのリンクを設定するほか、同一カテゴリのページにもリンクを設定する。

●サイトマップや検索機能からの到達する方法も提供する。

ＣＭＳ操作説明書（PDF版）４６〜４９ページ（リンク設定方法）

WEB版にリンクする場合はこちら >>

※現行の北海道公式ウェブサイトでは、対応済み。

○ 良い例

【複数の手段を用意した場合】

○ 主要な情報が掲載されたページヘ複数の手段により到達できるため、利用しやすい状態になっている。

各部局の

トップページ

新着情報

一覧

同一

カテゴリの

ページ

サイトマップ

サイト内

検索機能

主要な情報が掲載されているページ

× 悪い例

【複数の手段が用意されていない場合】

× 主要な情報が掲載されているページヘ移動するための経路がひとつしかないため、利用しにくい。

同一カテゴリの

ページ

主要な情報が掲載されているページ

正しく簡潔な構文を心がける（１）

対象者：

優先度：推奨

（一部対応済み）

4.1.10.1

等級： A

該当JIS項目： 7.4.1.1、7.4.1.2

説明

現在、北海道公式ウェブサイトに掲載されている一部のページでは、インターネットブラウザの種類やバージョンなど利用者の環境によって、表示が崩れたり差異が発生している場合があります。

こうしたページは、情報を取得するために余分な時間がかかったり、利用者に誤った情報を伝えてしまうことがあります。

そのような状況を回避するために、正しく簡潔な構文（HTML、CSS）を心がける必要があります。（関連項目として、「複雑なレイアウトや装飾などは、スタイルシートを用いて表現する」（P61）も参照のこと）

対応方法

●Web標準に沿って構文を記述する。

※CMS操作説明書に従って作成すれば対応可能。

HTML HTML

HTML

●Word等で作成した文章のコピー＆ペーストにより作成したページは、多くの場合構文が異常となり、表示の崩れなどが発生するため、一度テキストにコピーしてから編集する。 → 次ページ参照

タグの閉じる順序を正しいものとする。

インライン要素内にブロック要素を使用しない。

ＣＭＳ操作説明書（PDF版）２１７ページ（HTMLについて）

WEB版にリンクする場合はこちら >>

marqueeタグ、blinkタグを使用しない。

○ 良い例

ソースコード（正しい記述方法）

× 悪い例

ソースコード（誤った記述方法）

<html>

<body>

インライン要素<a>内にブロック要素が

記述されている

リンクテキスト

</a>

テキスト

テキスト

テキストテキスト

閉じタグが記述されて

いない

</body>

</html>

表示される画面

○ ページが問題なく表示される

×正しくページを表示できない

<html>

<body>

<a href=“△△△”>リンクテキスト</a>

テキスト

テキスト

テキストテキスト

</body>

</html>

テキストテキスト

リンクテキストテキスト

テキスト

テキストテキスト

閉じタグが記述されている

ブロック要素内にインライン要素<a>が記述されている

正しく簡潔な構文を心がける（２）

～文章のコピー＆ペーストをする際の注意点～

4.1.10.2

対応方法（続き）

●Wordやxxxで作成した文書をコピー＆ペーストでCMS編集画面に登録すると、余分な情報も引き継いでしまうため、必ずメモ帳へのコピー＆ペーストを行った後に、メモ帳からCMS編集画面へ登録を行う。

○ 良い例

Word・xxxなど

メモ帳

CMS（編集画面）

・文字情報

・デザイン

・文字情報

コペー

ピー＆

スト

コピー＆ペースト

ソースコード 2,700文字

Ctrl + A ボタンを使うと、簡単にページ内の全テキストを指定できる。

文字数

少

構文

正常

○文字情報のみコピー＆ペーストされるため、

音声読み上げソフトでは、不要なタグ情報を読み上げないため、理解しやすい。

Word・xxxなど

・文字情報

・デザイン

コピー＆

ペースト

CMS（編集画面）

・文字情報

・デザイン

・大量の不要なタグ

×悪い例

文字数

多

構文

異常

ソースコード 33,000文字

×見た目は変わらないが、音声読み上げソフ

トでは、大量の不要なタグ情報も読み上げてしまうため、ページ内容が理解しにくくなる。また、多くの場合構文が異常になり、表示の崩れなどが発生する場合がある。

ヘッダーなどの共通で使用する部品は統一する

対象者：

優先度：（対応済み）

必須

4.1.11

等級： AA

該当JIS項目： 7.3.2.3

説明

各ページに必ず存在する要素として、ヘッダーやフッター（図１参照）などがあります。

これらは、各ページで統一したものを使用することで、利用者の使いやすさを向上させています。

図１：ヘッダー（赤枠部分上）・フッター（赤枠部分下）

対応方法

●ヘッダーやフッターは統一したものを使用する。

※現行の北海道公式ウェブサイトでは、対応済み。

補足

ページ本文で、メニューリンクなどの各ページで共通に使用する部品を作成する場合は、他ページと統一すること。（例１参照）

「課のページ」テンプレートを利用することで、容易に統一されたデザインのページを作成することが可能。

ＣＭＳ操作説明書（PDF版）３６〜３８ページ（テンプレートの利用）

WEB版にリンクする場合はこちら >>

例１：ページ本文で各ページで共通に使用する部品（赤枠部分）を作成したページ

ナビゲーションを読み飛ばせるようにする

対象者：

優先度：（対応済み）

必須

4.1.12

等級： A

該当JIS項目： 7.2.4.1

説明

利用者は視覚的に情報を取捨選択することを通じて、ナビゲーション（図１参照）をページ毎に確認することなく本文にたどり着くことができますが、音声読み上げソフト利用者は、ページを開く毎に同じナビゲーションの読み上げを聞かなければならないため、ページ本文に到達するのに時間を要します。

そのため、音声読み上げソフトの利用者がナビゲーションを読み飛ばせるような仕組みを提供する必要があります。

対応方法

図１：ナビゲーション

●ナビゲーションを読み飛ばす仕組みを導入する。

●●●のページへようこそ

・・・・・・・・・・・・

・・・・・・

・・・・・

ナビゲーションを読み飛ばすことにより、音声読み上げソフトの読み上げ時間が短くなる。

○ 良い例

本文へスキップするか選択できる

× 悪い例

本文へスキップするか選択できない

北海道のホームページ

「●●●のページへようこそホームページの使い方

・・・・・・・・・・・・サイトマップ

・・・・・・・文字を大きくするには

・・・・・」・・・

「●●●のページへようこそ

・・・・・・・・・・・・」

○すぐに本文の内容を

読み上げることができる

×ナビゲーションの内容をすべて読み上げてから

本文の内容を読み上げるため、余分な時間がかかる

ＣＭＳ操作説明書（PDF版）該当なし

ナビゲーション

ページ本文

※現行の北海道公式ウェブサイトでは、対応済み。

文字色の違いについてはテキストで補足する

対象者：

優先度：必須

4.2.1

等級： A

該当JIS項目： 7.1.4.1

説明

物事をわかりやすく伝えるための表現方法として、色を変えて違いを明らかにする方法があります。

例としては、カレンダーの祝日を赤い文字にしたり、注意を促す項目を赤い文字にするなどが挙げられます。

しかし、色覚異常の利用者や高齢者などは、こうした情報を取得できない場合があるため、テキストを用いた説明文による補足が必要になります。

対応方法

ＣＭＳ操作説明書（PDF版）１６８ページ（文字色変更方法）

WEB版にリンクする場合はこちら >>

●色の違いで物事を伝える場合は、色の使い分けによる相違点やポイントなど、テキストを用いた説明文により補足する。

○ 良い例

【テキストによる補足説明がある場合】

○ 色の識別が困難な利用者などにとっても、健常者と同様の情報を得ることができる。

× 悪い例

【テキストによる補足説明がない場合】

× 色の情報を得ることが出来ないため、色弱の利用者や高齢者、音声読み上げソフトの利用者は情報を正し

く得ることができない。

形や位置はテキストでも識別できるようにする

（情報の識別や指示）

対象者：

優先度：必須

4.2.2

等級： A

該当JIS項目： 7.1.3.3

説明

物事をわかりやすく伝えるために、形や位置の特徴を用いて説明する方法があります。

例としては、ボタンやリンクを「丸いマーク」や「右下のボタン」というように説明することなどが挙げられます。

しかし、音声読み上げソフトの利用者は、こうした説明だけでは情報を得ることができない場合があるため、テキストを用いた説明文による補足が必要になります。

対応方法

●形や位置の特徴を用いて説明する場合は、テキストを用いた説明文でも補足する。

○ 良い例

【テキストによる補足説明がある場合】

○ まる（○）以外に「実施」、バー（－）以外に「休業」という言葉が加わるなど、音声で情報を得る利用者にとっても、必要な情報を得ることができ

る。

○ 「次のページへ」ボタンの情報が書かれていることにより、音声で情報を得る利用者にも、何をク

リックすべきかわかる。

× 悪い例

【テキストによる補足説明がない場合】

× まる（○）や、xx（－）と音声で聞かされても、形の情報を得ることが出来ないため、音声で情報

を得る利用者は情報を正しく得ることができない。

× 「右のボタン」などと音声で聞かされても、情報を得ることが出来ないため、音声で情報を得る利

用者には、何をクリックすべきかわからない。

続きを読むには、右のボタンを押してください。

次のページへ

前のページへ

続きを読むには、右の「次のページへ」ボタンを押してください。

次のページへ

前のページへ

単語の間にスペースや改行を挿入しない

対象者：

優先度：必須

4.2.3

等級： A

該当JIS項目： 7.1.3.2

説明

ページを作成する際に、単語や文章の長さを調節するため、スペースや改行を用いる場合があります。そうすると、スペースを単語の区切り、改行を文節の区切りとして認識してしまうため、例えば「電話」は「でんはなし」、「日時場所」は「ひときばところ」と読み上げられてしまいます。そのため、音声読み上げソフトの利用者は、制作者の意図した情報を正しく認識することが困難になります。

対応方法

HTML

●文字列を入力する場合、単語の間にスペース及び改行を挿入しない。単語の間にbrタグを挿入しない。

○ 良い例

【適切に文字列を入力した場合】

でんわ

にちじばしょ

○ 文字列が正しく読み上げられるため、音声読み上げソフトの利用者は正しく内容

を認識することができる。

× 悪い例

【単語間にスペースを挿入した場合】

でんはなし

ひときばところ

×文字列が正しく読み上げられないため、

音声読上げソフトの利用者は、正しい内

容を認識できない。

【単語間に改行を挿入して縦書きにした場合】

でんはなし

ひときばところ

×文字列が正しく読み上げられないため、

音声読上げソフトの利用者は、正しい内

容を認識できない。

サイト内で使用する単語は統一する

対象者：

優先度：必須

（一部対応済み）

4.2.4

等級： AA

該当JIS項目： 7.3.2.4

説明

単語には、同じような意味を持つものが複数存在します。そのため、同一のページや、同じ項目の一連のページにおいてはそれらをいずれかに統一することで利用者に混乱を与えることなく、情報取得しやすく必要があります。

同じ意味を持つ単語を複数使用した場合、表記のゆれにより、読んで理解する方に違和感を与えるケースはもとより、聞いて理解する方には、発音が異なる単語を違う意味で捉えるなど混乱するケースも考えられます。

言葉の定義をはっきりさせながら使っていくことも大事になります。

対応方法

●ナビゲーションの表記を統一する。

※現行の北海道公式ウェブサイトでは、対応済み。

対応例

●名称や送りがななど、使用する単語を統一するとともに、可能な限り表現を短縮しない。

統一前の単語

アクセシビリティ

ウェブアクセシビリティ

Web Accessibility

音声読上ソフト音声読み上げソフト音声読上げソフト

ユーザーユーザ利用者閲覧者

音声読み上げ結果

あくせしびりてぃ

うぇぶあくせしびりてぃだぶりゅえい

おんせいどくじょうそふとおんせいよみあげそふとおんせいどくあげそふと

ゆーざーゆーざ

りようしゃえつらんしゃ

統一後の単語

ウェブアクセシビリティ

音声読み上げソフト

利用者

文字色と背景色には、十分なコントラスト比を確保する（１）

対象者：

優先度：推奨

4.2.5.1

等級： AA

該当JIS項目： 7.1.4.3

説明

ある文字色と背景色の組み合わせを読みやすく感じるか否かは、利用者によって様々であり、特に、色覚異常の利用者や高齢者などは色の識別がより困難な場合があります。

そこで、一つの指標として規格によって定められたコントラスト比を使います。

この数値を一定以上にすることで、より多くの利用者にとって読みやすい状態を作り出すことができます。

また、多くの色を使うサイトは、利用者が情報を取得しにくくなる可能性があるため、過剰な装飾などによる文字色と背景色の指定は避け、色を使う必要がある場合は、識別しやすい組み合わせを用いてください。

対応方法

●識別しやすい色の組み合わせを用いる。識別しにくい色の組み合わせ（例：白色と黄色、緑色と赤色、水色と灰色、桃色と灰色など）はしない。（例１）

●文字の背景に写真や壁紙などの画像を用いる場合、文字が読みにくくならないよう配慮する。（例２）

●文字を入れた画像で、デザイン上、十分なコントラスト比を確保できない場合、縁取り線を付与することで対応する。このとき、識別しやすい組み合わせを用いる。（例３）

（関連項目として、「画像には代替テキストを設定する」（P43）、「情報量の多い画像には、画像を説明する

テキストを別途提供する」（P44）も参照のこと）

●文字色と背景色の使用は、必要最低限に抑えることが望ましい。また、リンクには使用しない。

（関連項目として、「リンクの文字色及び背景色を設定しない」（P37）も参照のこと）

◆例１【識別しやすい組み合わせを用いる】

○ 良い例 × 悪い例

◆例２【文字の背景に写真や壁紙などの画像を用いる場合】

○ 良い例 × 悪い例

◆例３【文字を入れた画像で、十分なコントラスト比を確保できない場合】

○ 良い例 × 悪い例

※ 参考：色の使用例について

次ページを参照すること

北海道

※規格によって、４．５：１というコントラスト比が定められているが、専用ツールによる測定が必要となるなど、厳密な対応は難しいことから、以下の例示を参考にしてページ作成にあたり反映すること。

北海道

文字色と背景色には、十分なコントラスト比を確保する（２）

〜参考：色の使用例について〜

4.2.5.2

カラーピッカーを用いた場合の組み合わせ例

カラーピッカーは、編集画面上から色を設定する際に使う。

【白色（背景色もしくは文字色）との組み合わせ例】

・・・推奨される色

・・・よく用いられるが推奨されない色

（コントラスト比が規定以下となってしまう色）

【黒色（背景色もしくは文字色）との組み合わせ例】

・・・推奨される色

・・・よく用いられるが推奨されない色

（コントラスト比が規定以下となってしまう色）

日付・時間・通貨の単位は漢字で表記する

対象者：

優先度：推奨

4.2.6

等級：なし

該当JIS項目：なし

説明

日付や時間・通貨は、「/」や「:」などの記号を用いることで、直感的にわかりやすくなります。

こうした表記にすることで、見た目はスマートに感じることがありますが、音声読み上げソフトでは作成者の意図したとおりに読み上げできない場合があります。

そのため、日付・時間・通貨の単位は、漢字で表記する必要があります。

対応方法

●日付の表記に記号「/」や「.」を用いず、漢字の単位「年」、「月」、「日」を使用する。

●時間の表記に記号「:」を用いず、漢字の単位「時」、「分」、「秒」を使用する。

●通貨の表記に記号「¥」を用いず、漢字の単位「円」を使用する。

ＣＭＳ操作説明書（PDF版）１２ページ（ページ作成・修正上の注意）

WEB版にリンクする場合はこちら >>

（外国通貨の場合は「ドル」や「セント」などカタカナを使用する）

○ 良い例

【単位を正しく表記した場合】

日付： 2014年1月20日時間：午前10時8分通貨： 1,300円

にせんじゅうよねんいちがつはつかごぜんじゅうじはっぷん

せんさんびゃくえん

○ 正しく読み上げることができる。

× 悪い例

【単位を正しく表記していない場合】

日付： H26/01/20時間： AM10:08通貨： ¥1,300

えいちにじゅうろくぜろいちにじゅうえーえむじゅうぜろはち

せんさんびゃく

× 作成者の意図したとおりに読み上げることができない。

※読み上げ結果は、使用するソフトウェアにより違いがある。掲載している読み上げ結果は、一例である。

単語や文章を太字にする際の留意事項

対象者：

優先度：推奨

4.2.7

等級： A

該当JIS項目： 7.1.3.1

説明

文章の重要な箇所や必須事項などを表現するため、太字にする場合があります。

これは、文字の見た目を変えるだけでなく、音声読み上げソフトの利用者に向けて、「強調」を示すような仕組みでもあります。音声読み上げソフトは、「強調」された文字をゆっくり読み上げることなどにより、利用者にその文字が強調されていることを伝えます。

一方、文字の大きさを調整するなど装飾を目的として、文章すべてを太字にしているページも見受けられますが、音声読み上げソフトの利用者は混乱する場合があります。

そのため、強調したい文字のみを太字にしてください。

対応方法

HTML

●強調したい文字を選択し、編集アイコンのアイコンを選択する。強調したい文字をstrongタグで囲む。

HTML

補足

やむを得ず装飾目的で文字を太字にしたい場合は、太字にしたい文字をbタグで囲む。

ＣＭＳ操作説明書（PDF版）１６７ページ（太字設定方法）

WEB版にリンクする場合はこちら >>

「強調」を示すstrongタグに対し、bタグは、「強調」を示さず、見た目のみ太字にする役割を持っている。

○ 良い例

【強調したい文字のみが太字になっている場合】

○ 強調される部分が明確に読み上げられ、音声読み上げソフトの利用者にとっても内容が理解しやすい。

× 悪い例

【装飾目的で文字が太字になっている場合】

× 強調する必要のない部分まで強調されているため、音声読み上げソフトの利用者は混乱する。

CMSの標準機能として、文字を太字にする機能があります。これは、文字の見た目を変えるだけでなく、音声読み上げソフトの利用者に向けて、「強調」を示すような仕組みとなっています。音声読み上げソフトは、「強調」された文字をゆっくり読み上げることなどで、利用者にその文字が強調されていることを伝えます。

そのため、装飾目的のために文字を太字にすることは避け、強調したい文字のみを太字にしてください。

移動・点滅するテキストを使用しない

対象者：

優先度：推奨

4.2.8

等級： A

該当JIS項目： 7.2.2.2、7.2.3.1

説明

装飾を主な目的として、テキストも自動的に移動させたり、点滅させたりすることが可能です。

しかし、移動や点滅をするテキストは、利用者によっては認識しにくく、読みにくさを感じる場合があります。とりわけ、画面を拡大して閲覧する弱視の方にとっては、移動や点滅が余計に目立つため、大変見にくいものとなります。

また、移動・点滅が永続的に繰り返されると利用者の集中力を削いでしまう場合があります。さらに、早い点滅はてんかん発作の原因となる場合があります。

こうしたことから、移動・点滅するテキストの使用を避けてください。（関連項目として、「『せん光』を用いた表現

をしない」（P59）も参照のこと）

対応方法

HTML

●移動・点滅するテキストを使用しない。 marquee要素を使用しない。 blink要素を使用しない。

顔文字を使用しない

対象者：

優先度：推奨

4.2.9

等級： A

該当JIS項目： 7.1.1.1

説明

文字と記号を用いて、その見た目で情報を伝える方法として顔文字がありますが、顔文字を使用すると、音声読み上げソフトでは正しく読み上げられず、意味の通じないものとなります。

また、装飾目的で顔文字を多用すると、利用者にとって読みにくいものとなります。全ての利用者にとって使いやすいページになるよう、顔文字を使用しないでください。

対応方法

●顔文字を使用しない。

○ 良い例

【顔文字を使用していない場合】

「〜しています」

○ 正しく読み上げられ、利用者に違和感を感じさせない。

× 悪い例

【顔文字を使用している場合】

「〜していますかっこぺきじょぺきじょかっことじ」

× 意味の通じない音声が読み上げられ、利用者が混乱する。

〜しています。（＾＾）

〜しています。

書体の変更は最低限にする

対象者：

優先度：推奨

（一部対応済み）

4.2.10

等級：なし

該当JIS項目：なし

説明

ページのテキストは、利用者の端末を購入した時に標準で設定されている（デフォルト）書体で表示されます。

ページのテキストには、xxxxxの書体の他に設定可能な書体が多数存在していますが、変更を行うと、端末によっては書体が表示されない場合があります。

また、デフォルトの書体は、様々な利用者が読みやすいとされるものになっているため、弱視の利用者や高齢者は、書体の変更により読みにくさを感じる場合があります。

対応方法

HTML

●書体の変更は最低限にとどめる。

fontタグのstyle属性またはface属性でフォントの種類を指定しない。

※CMS標準編集画面に従って作成すれば、フォントの変更操作がないため対応可能。

●Word等で整形した文書のコピー＆ペーストを行わない。テキストファイルに一度コピーするなどして、

テキスト以外の情報をそぎ落としたあとでコピー＆ペーストを行う。（関連項目として、「正しく簡潔な構文を

心がける（１）」（P18）も参照のこと）

○ 良い例

【書体の変更をしていない場合】

端末A

端末B

端末C

○ それぞれ利用環境で、デフォルトの書体が表示されており、読みやすい。

× 悪い例

【書体の変更をしている場合（ここではHG行書体に変更）】

端末A 端末B

端末C

× 利用環境によって意図した表示と異なった書体で表示されている。また、利用者によってはデフォルトの書体より読みにくい場合がある。

Word等で整形したテキストのコピー＆ペーストを行う場合、ペースト以前の書体を引き継いでしまう場合がある。

HG行書体で表示されており、利用者によっては読みにくく感じる

デフォルトの書体が

強制的に反映される場合もある

デフォルトの書体が表示される

機種依存文字を使用しない

対象者：

優先度：推奨

（一部対応済み）

4.2.11

等級：なし

該当JIS項目：なし

説明

丸付き文字などの機種依存文字や半角カタカナ文字を用いると、利用環境によっては文字が正しく表示されない場合があります。機種依存文字は、変換を行う際にその旨のメッセージが表示されることがあります。また、道のCMSで使用を禁止している文字の資料として「CMS操作説明書【別紙4-1】禁則文字一覧」があります。その他、半角カタカナ文字も使用禁止となっています。

こうした文字を使用しないことで、すべての利用者に対して正常にページが表示されるように配慮することが必要です。

対応方法

●機種依存文字（丸付き文字や省略記号など）を使用しない。

●禁則文字（CMS操作説明書上で使用を禁止している文字）を使用しない。

※CMS標準編集画面に従って作成すれば、保存時に禁則文字の有無がチェックされるため対応可能。

ＣＭＳ操作説明書（PDF版）９４ページ（禁則文字について）

WEB版にリンクする場合はこちら >>

●半角カタカナ文字を使用しない。

参考：文字化けを起こす可能性のある文字の例

【機種依存文字】

【禁則文字】

CMS操作説明書別紙資料「禁則文字一覧」を参照すること。

【半角カタカナ文字】

禁則文字一覧へ >>

文章を引用する際の留意事項

対象者：

優先度：参考

4.2.12

等級： A

該当JIS項目： 7.1.3.1

説明

文章を引用する場合は、引用していることを示すようにHTMLで記述する必要があります。

また、参照元（例：「xxxxのxxxより引用～～」という文で言えば「xxx」の部分）にも参照元であることを示すように記述する必要があります。

そうすることで、引用部分とそうではない部分を利用者が理解しやすくなるため、音声読み上げソフトの利用者にも配慮することができます。

音声読み上げソフトは、指定された部分の読み上げ速度やピッチに違いをつけて読み上げるなどの方法で、引用あるいは参照元であることを伝えます。

HTML

対応方法

引用した文章をblockquoteタグで囲む。参照元をciteタグで囲む。

※現行のCMS標準編集画面では、文章の引用設定ができないため対応困難（直接ソースプログラムの編集が必要）。

補足

HTML

引用していることを示すタグを設定した場合、自動的に字下げが行われる。レイアウトを整えるためのものではないことから、引用目的以外での使用はしない。

ＣＭＳ操作説明書（PDF版）該当なし

レイアウトを整える目的でblockquoteタグを使用しない。

参考：文章を引用したときのタグの設定例

（xxxxの「 xxx 」より引用）

引用であることを示す。

（例： <blockquote>私はその人を～ </blockquote> ）

参照元であることを示す。

（例： <cite>xxx</cite>）

私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。

テキストのサイズは利用者が変更できるようにする

対象者：

優先度：推奨

（対応済み）

4.2.13

等級： AA

該当JIS項目： 7.1.4.4

説明

ブラウザには、テキストのサイズを大きくする機能があります。（図１参照）小さく読みにくいと感じた場合、この機能を用いてテキストのサイズを拡大することができます。主に弱視の利用者や高齢者が活用しています。

ページを作成する際、テキストのサイズ指定方法を、「px」や「pt」などの絶対単位（ブラウザの設定に依存せず普遍的なサイズを指定する単位）にすると、この機能を使用することができなくなります。

そのため、テキストのサイズの指定に当たり留意する必要があります。

➀

➀ALTキーを押し、

メニューバーを出現させる。

②

②「表示」→「文字のサイズ」から、任意の文字サイズに変更できる。

対応方法

図１：テキスト（文字）のサイズを大きくする機能（Internet Explorer11の場合）

●文字の大きさを変更したい部分を選択し、下向きのxxのボタンを押して文字の大きさを変更する。

HTML

●テキストのサイズは絶対単位で指定せず、相対単位で指定する。

fontのsize属性を用いてテキストのサイズを指定する。

HTML

※CMS標準編集画面に従って作成すれば対応可能。

ＣＭＳ操作説明書（PDF版）４０ページ（フォントサイズの変更方法）

WEB版にリンクする場合はこちら >>

CSSを使用し％、em、キーワード（xx-small、x-small、small、medium、large、x-large、xx-large、 smaller、larger）のいずれかを用いてテキストのサイズを指定する。

4.3.1

リンク先を推測できるようなテキストで表記する

該当JIS項目： 7.2.4.4

等級： A

対象者：

優先度：推奨

説明

利用者はリンクを選択する前に、設定されているリンクのテキストの文脈から、リンク先がどのようなページなのかを推測し、自らが求めている情報か否かを判断しています。

そのため、文脈からリンク先を推測しにくいテキストでは、利用者に混乱を与える可能性があります。

また、音声読み上げソフトの中には、リンクのテキストだけを読み上げる機能を持つものがあるため、音声読み上げソフトの利用者にも配慮が必要です。

対応方法

● リンクのテキストからリンク先が推測できるように配慮する。

補足

ＣＭＳ操作説明書（PDF版）１１７ページ（文字のリンク設置方法）

WEB版にリンクする場合はこちら >>

適切な説明がないまま「詳しくはこちら」など、断片的に表示されているリンクも、避けるべき表現である。

音声読み上げソフト

（リンクのテキストだけを

読み上げる機能使用時）

こちら

○ 良い例

【リンク先を推測できるようなリンクの場合】

広報紙「ほっかいどう」の最新号を作成しました。

広報紙「ほっかいどう」2014年11月全体版はこちら（PDF：526KB）広報紙「ほっかいどう」2014年11月簡易版はこちら（PDF：181KB）

音声読み上げソフト

（リンクのテキストだけを

読み上げる機能使用時）

広報紙「ほっかいどう」2014年11月全体版はこちら（PDF：526KB）

広報紙「ほっかいどう」2014年11月簡易版はこちら（PDF：181KB）

○ リンク先を推測することができ、利用者が安心してページを開くことができる。

なお、リンク先がPDFなどのデータファイルの場合は、そのデータファイルの形式と容量を表記する。

（関連項目として、「データファイルの形式と容量を表記する」（P46）も参照のこと）

× 悪い例

【リンク先を推測できないリンクの場合】

広報紙「ほっかいどう」の最新号を作成しました。

全体版はこちら簡易版はこちら

× 文脈からリンク先を推測できず、利用者に混乱を与える場合がある。

また、リンクのテキストだけを読み上げる機能を持つ音声読み上げソフトは、「こちら」を複数回読み上

げるため、リンク先を推測することが困難となる。

リンクの文字色及び背景色を設定しない

対象者：

優先度：推奨

4.3.2

等級： A

該当JIS項目： 7.1.4.3

説明

ページを作成する際に、リンクの文字色及び背景色が設定されている場合が多く見られます。

北海道公式ウェブサイトでは、リンクにマウスカーソルを合わせたとき、リンクの文字色が白色となり、背景色が紺色となるようあらかじめCMS上で設定されています。この色は、リンクである文字列を認識しやすくするための仕組みとなっています。

こうした仕組みを理解せずに文字色や背景色を変更することにより、リンクである文字列が読みにくくなる場合があるとともに、リンクにマウスカーソルを合わせた際、リンクの文字色とリンクの背景色が同化し、文字列がさらに読みにくくなります。

対応方法

●設定したリンクには、文字色及び背景色の変更を行わない。

HTML

●既にリンクの背景色が指定されている場合は、文字ごと削除した上で再入力する。

ＣＭＳ操作説明書（PDF版）１６８ページ（文字に下線、文字色変更）

WEB版にリンクする場合はこちら >>

aタグを使用している文字列には、fontタグで文字色及び背景色の設定を行わない。

○ 良い例

【リンクの文字色及び背景色を設定していない場合】

○ リンクにマウスカーソルを合わせた時、文字列の読みやすさが保たれる。

また、利用者にとって、文字列がリンクであるこ

とを認識しやすい。

マウスカーソルを合わせていない時

マウスカーソルを合わせた時

【例外：背景色が濃い場合】

白色に

設定

○ リンクの文字色を設定していない時、背景色と文字色が同化してしまうため、リンクの文字色を白色などに設定することも可とする。

リンクの文字色を設定していない時

リンクの文字色を設定した時

× 悪い例

【リンクの文字色が設定された場合】

× マウスカーソルを合わせた時、文字色の紫色と背景色の紺色が同化し、文字列が読みにくくな

る。

マウスカーソルを合わせていない時

マウスカーソルを合わせた時

【リンクの背景色が設定された場合】

× マウスカーソルを合わせた時、文字色の白色と背景色の黄色が同化し、文字列が読みにくくな

る。

マウスカーソルを合わせていない時

マウスカーソルを合わせた時

リンク画像にはリンク先がわかるよう代替テキストを設定する

対象者：

優先度：推奨

4.3.3

等級： A

該当JIS項目： 7.1.1.1、7.2.4.4

説明

ボタンやリンクバナーなどのリンク画像にも、通常の画像と同様に代替テキストを設定する必要があります。

その際、リンク先がどのようなページか推測しやすい代替テキストを設定することで、音声読み上げソフトの利用者に対しても配慮を行います。

そうすることにより、リンク先のURLのみが読み上げられたり、リンク先がどのようなページか推測できず利用者が混乱することを防ぐことができます。

対応方法

●リンク画像には、リンク先がどのようなページか推測しやすい代替テキストを設定する。

HTML

imgタグのalt属性に説明文を記述する。（例：<img alt=“説明文”>）

以下の画像には、北海道公式ウェブサイトのトップページへのリンクが設定されているものとする。

○ 良い例

【リンク先を推測しやすい代替テキストが設定されている場合】

○ 音声読み上げソフトの利用者にもリンク先が想像しやすく、使いやすい。

× 悪い例

【リンク先を推測しやすい代替テキストが設定されていない場合】

× 音声読み上げソフトの利用者はリンク先の内容と異なるため、使いにくい。

【代替テキストが設定されていない場合】

× リンク先のURLが読み上げられ、音声読み上げソフトの利用者は使いにくい。

代替テキスト：

（空）

音声読み上げ結果：

「xxxx://xxx.xxxx.xxxxxxxx.xx.xx/xxxxx.xxx」

代替テキスト：

北海道のロゴマーク

音声読み上げ結果：

「北海道のロゴマーク」

代替テキスト：

北海道のトップページへ

音声読み上げ結果：

「北海道のトップページへ」

ＣＭＳ操作説明書（PDF版）１１４ページ（画像挿入方法）

１２０ページ（画像のリンク設置方法）

WEB版にリンクする場合はこちら >>

隣接する画像とテキストに対する同一のリンクは、一つにまとめる

対象者：優先度：推奨

4.3.4

等級： A

該当JIS項目： 7.1.1.1、7.2.4.4

説明

リンクを設定する場合、通常はテキスト・画像問わず、それぞれに対して設定を行います。

しかし、画像とテキストが隣接していて、なおかつリンク先が同一の場合、音声読み上げソフトの使用者に配慮し、これらを一つにまとめる必要があります。

これは、音声読み上げソフトが、同じリンクを二度読み上げることになるためです。

対応方法

●隣接する画像とテキストは、同一のリンクにまとめる。その際、画像の代替テキストの入力欄には半角スペースを入力する（空白ではない）。

HTML

画像とテキストの外側を、aタグを用いて囲む。

（例：<a href=“リンク先のURL”><img src=“画像のURL” alt=“半角スペース”>リンクであるテキスト</a>）

マウスを

乗せると

ホームへ戻る

○ 見た目と実際のリンク設定が一致するため、

違和感を覚えずスムーズにページを閲覧できる。

マウスを

乗せると

ホームへ戻る

×見た目と違い、２つのリンクが存在することにより、利用者が混乱する。

○ 良い例

【リンクが一つにまとまっている】

× 悪い例

【リンクが一つにまとまっていない】

＜音声読み上げソフト利用者の場合＞

×同じ内容を二度読まれるため、利用者が混乱する。

音声読み上げ結果：

ホームへもどるホームへもどる

ホームへ戻る

＜音声読み上げソフト利用者の場合＞

○ シンプルな読み上げ結果で、スムーズにリンクの内容を理解することができる。

音声読み上げ結果：ホームへもどる

ＣＭＳ操作説明書（PDF版）４２〜５０ページ（リンク設置方法）

WEB版にリンクする場合はこちら >>

リンク切れがないか確認する

対象者：

優先度：推奨

（一部対応済み）

4.3.5

等級：なし

該当JIS項目：なし

説明

リンク切れが存在している場合、利用者は必要としている情報を得られない場合があります。

また、リンク元は、リンク先のページ・ファイルなどを削除しても、自動的に削除されるものではありません。

そのため、リンク先となるページを削除・移転する場合は、そこにつながるリンク元のページも修正する必要があります。

対応方法

●リンク先が存在しているかどうか確認し、状況に応じて対応する。（例１）

※リンク先が道のCMSで管理されているページであれば、保存時に自動的にチェックされる（外部リンク除く）。

●リンク先のURLが変更されている場合があるため、定期的に確認し、状況に応じて対応する。（例２）

リンク切れの事例

以下のようなページを発見した場合、リンクの削除や修正など、対応が必要。

例１：インターネット上にページが存在しない

Googleの場合

北海道公式ウェブサイトの場合

ページが見つからないといった趣旨のページが表示され、当該ページが存在しない場合は、リンクの削除、別なＵＲＬに移転していることが判明した場合は、リンク先の変更を行う。

例２：ページのURLが変更されている

ページのURLが変更されたことを告知するページには、「ページを移転しました」や「ウェブサイトは引っ越しました」などといった表記がよく用いられる。このようなページは一定期間を経過すると削除される可能性が高いため、確認次第リンク

先を変更することが望ましい。

ＣＭＳ操作説明書（PDF版）１１７～１３０ページ（リンクの設定方法）

９５ページ（リンクのエラーについて）

WEB版にリンクする場合はこちら >>

グラフなどで、色の違いによって情報を提供している場合は、

模様も併用する

対象者：

優先度：必須

4.4.1

等級： A

該当JIS項目： 7.1.4.1

説明

物事をわかりやすく伝えるための表現方法として、色を変えて違いを明らかにする方法があります。

例としては、「グラフなどの画像で、データを色付けし、その色に対応する凡例を示す」などが挙げられます。

しかし、色覚異常の利用者や高齢者などは、こうした情報を取得できない場合があるため、模様による補足が必要になります。

対応方法

●帯グラフや円グラフなどを掲載する場合は、色だけでなく模様の違いでも表す。

補足

模様の違いだけではなく、テキストを用いた説明文でも補足すると、より利用しやすいページとなる。

ＣＭＳ操作説明書（PDF版）１１４ページ（画像挿入方法）

WEB版にリンクする場合はこちら >>

（関連項目として、「文字色の違いについてはテキストで補足する」（P22）も参照のこと）

○ 良い例

【模様により補足されている場合】

色の情報が得られない場合のイメージ

○ 色の識別が困難な利用者などにとっても、同様の情報を得ることができる。

× 悪い例

【模様により補足されていない場合】

色の情報が得られない場合のイメージ

× 色の識別が困難な利用者は、情報を正しく得ることができない。

画像化されたテキストをできるかぎり使わない

対象者：

優先度：推奨

4.4.2

等級： AA

該当JIS項目： 7.1.4.5

説明

テキストには、行うことのできる装飾が限られているため、見出しなどで、装飾をしたり、その部分を目立たせたりしたい場合に、画像を用いることがあります。

その場合、視覚的には強弱をつけるなどの自由度が高まりますが、テキストが画像化されると、文字の拡大・画面の色の反転・行間の変更などを行うことが困難となるため、弱視や色覚異常の利用者などが不便に感じる場合があることから、テキストをなるべく画像化しないよう、配慮が必要となります。

なお、例外として画像化することが認められているものがあります。詳しくは対応方法の【例外】を参照してください。

対応方法

●画像化されたテキストをできるかぎり使わない。

【例外】以下の場合は、テキストの画像化が認められている。

・複雑にデザインされた文字など、画像化しないと視覚的な表現が難しいもの。

ＣＭＳ操作説明書（PDF版）該当なし

・書体のサンプルやロゴタイプなどのように、画像化しないと伝えたい情報が表現できないもの。

○ 良い例

【テキストとして表現している場合】

× 悪い例

【画像化している場合】

○ 画面の色を反転したり、文字を拡大することができ、利用者にとって読みやすい方法を選

ぶことができる。

【画面の色の反転】

× 画面の色を反転したり、文字を拡大することができず、読

みにくい。

【文字の拡大】

※ 例外：テキストの画像化が認められている例

画像化したテキストは、代替テキストを入れることも大事なポイントとなる。

【複雑にデザインされた文字の例】

複雑にデザインされている場合、画像でなければ表現が難しいため、

画像化が認められている。

【ロゴタイプの例】

【書体のサンプルの例】

ロゴタイプは、図案そのものが団体やキャンペーンを伝える

手段となるため、画像を用いることが認められている。

端末にインストールされていない書体の見た目を

表現する方法として、画像化が認められている。

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

ウェブアクセシビリティについてのページ

画像には代替テキストを設定する

対象者：

優先度：推奨

4.4.3

等級： A

該当JIS項目： 7.1.1.1

説明

ページの作成において、テキストだけで説明するよりも、画像を用いることで利用者が情報をより取得しやすくすることができます。

その際、文脈にそった簡潔な代替テキストを適宜設定することで、音声読み上げソフトの利用者に対しても配慮を行います。

対応方法

●バナーやアイコンなど、情報量が少なく端的な画像には、代替テキスト入力欄で簡潔に説明する。（例１）

●装飾目的など読み上げる必要のない画像には、代替テキスト入力欄に半角スペースを入力する。（例２）

HTML

●複数でひとつの意味を成す画像には、１つ目の画像に代替テキストを入力し、残りの画像には半角スペースを入力する。（例３）

imgタグのalt属性に説明文や半角スペースを記述する。（例：<img alt=“説明文”>）

● 猫・・・・・

●情報量が多く、代替テキストでは説明しきれない場合、画像を説明するテキストを別途提供する。

◆例１【文脈に沿った簡潔な代替テキストを入力する】

○ 良い例 × 悪い例

今日の天気は、でした。

代替テキスト：雨

今日の天気は、でした。

代替テキスト：傘

サイト内検索：

× 音声読み上げソフトの利用者には、

意味が通じない

場合がある。

代替テキスト：検索

代替テキスト：虫眼鏡

◆例２【装飾目的や読み上げる必要のない画像に代替テキストを設定する】

○ 良い例 × 悪い例

カテゴリー：ペット

● 犬

代替テキスト：

読みあげない（半角スペース挿入）

カテゴリー：ペット

● 犬

代替テキスト：２匹の犬の写真

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

ユーザビリティについて

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

ユーザビリティについて

× 読み上げる必要のない代替テキストが読み上げられることにより、

音声読み上げソフトの利用者などは、ページを

理解するのに余計な時間を

要してしまう。

代替テキスト：

読みあげない（半角スペース挿入）

代替テキスト：四角

◆例３【複数でひとつの意味を成す画像に代替テキストを設定する】

○ 良い例 × 悪い例

レビュー評価：レビュー評価：

× 音声読み上げソフトの利用者には、

意味が通じない

場合がある。

代替テキスト：星代替テキスト：空星

代替テキスト：

読みあげない

（半角スペース挿入）

代替テキスト：

５つ星の内３つ星

続けて読み上げると。

「x x x xx x星」となる。

ＣＭＳ操作説明書（PDF版）１１４ページ（画像挿入方法）

WEB版にリンクする場合はこちら >>

説明

ページの作成において、テキストだけで説明するよりも、画像を用いることで利用者が情報をより取得しやすくすることができます。

その際、情報量の多い画像にあっては、画像の説明文を別途提供することで、音声読み上げソフトの利用者に対しても配慮を行います。

対応方法

HTML

●地図やグラフ・図表など、情報量が多く複雑な画像の場合、ページ内のいずれかに画像の示す内容を説明文として提供するとともに、代替テキスト入力欄には、説明文の位置を示す情報を入力する。

imgタグのalt属性に説明文を記述する。（例：<img alt=“説明文”>又は<img alt=“説明文の場所”>）

●代替テキストでは画像を簡潔に説明し、情報量の多い画像の説明は別のページで提供する。

HTML

longdesc属性を用いて、複雑な図の説明が提供されているURIを提供する。

●テキスト表記で事足りる情報を、特別な理由がないにも関わらず画像化することを避ける。

【情報量が多く、複雑な画像の場合】

画像の情報量：多い代替テキスト：適当ページ内説明：適当

○ 隣接する場所にアクセス方法の説明文が提供されているため、視覚的に情報を取得できない利用者にとっても理解しやすい。

× 悪い例

【画像の情報量が多く、十分な説明文が提供されていない場合】

画像の情報量：多い代替テキスト：不適当ページ内説明：不適当

× 代替xxxxの「アクセスマップ」以外の説明がなく、音声読み上げソフトの利用者には目的地へどのように行けばいいのかなど、必要な情報を取得する事が困難である。

代替テキスト：アクセスマップ

代替テキスト：

アクセスマップ。この画像の直後に詳しいアクセス方法があります。

ＣＭＳ操作説明書（PDF版）１１４ページ（画像挿入方法）

WEB版にリンクする場合はこちら >>

テーブル（表）を使用する場合は単純な構造にすることで、

読み上げ順序に配慮する

対象者：

優先度：推奨

4.5.1

等級： A

該当JIS項目： 7.1.3.1、 7.1.3.2

説明

視覚的に情報を提供する際、テーブル（表のことを言う）を用いることで利用者に伝わりやすくなります。その際、音声読み上げソフトの利用者に対しても配慮が必要になります。

そこで、テーブルに「タイトル」を設定、内容を推測できるようにするほか、テーブルの「見出し項目」を適切に設定し、利用者に配慮します。また、音声読み上げソフトでは、左上のセルを始点として左から右へ順に読み、１段下がってまた左から右に読むことを繰り返します。この順序に沿った形で作成することにより、音声読み上げソフトの利用者は内容をスムーズに把握できます。

なお、複雑な表を作成したり、表のセル内にさらに表を作成すると、意図しない読み上げ順序になる場合があるため、極力単純な表を作成する必要があります。

対応方法

●テーブル以外の表現方法（リスト化など）がないか検討する。

（関連項目として、「リスト機能を利用する」（P16）も参照のこと）

●テーブルは可能な限り単純な構造にし、読み上げ順序を考慮する。

HTML

●レイアウトを目的としたテーブルには、「タイトル」と「見出し項目」の設定を行わない。レイアウトを目的としたテーブルには、cаption要素とth要素を記述しない。

HTML

●タイトルを挿入したいテーブルを選択し、編集アイコンのを選択し、わかりやすい「タイトル」をつける。

cаption要素を用いて、テーブルにわかりやすいタイトルをつける。このとき、テーブルのsummаry

属性にはcаption要素と重複した情報を含めず、概要や見方を説明する。

HTML

●テーブルの「見出し項目」となるセルを指定する。

テーブルの「見出し項目」となるセルにはth要素を用いる。

※現行のCMS標準編集画面では、テーブルの見出し項目を設定できないため対応困難

参考：テーブルの読み上げ順序例

音声読み上げソフトでは、図内の番号順に読み上げられる。

参考：テーブルに「タイトル」と「見出し項目」を入れた場合の例

音声読み上げソフトの利用者は、タイトルからテーブルの内容を推測しやすい。

また、見出しを追って読み上げることがで

きるため、テーブルの内容がわかりやすい。

タイトルが表示される

見出しが

指定されている

（直接ソースプログラムの編集が必要）。

１	２	３	４
５	６	７	８
９	１０
９	１１	１２	１３

ＣＭＳ操作説明書（PDF版）１１ページ（ページ作成・修正上の注意）

１３６ページ（表のタイトル挿入方法）

WEB版にリンクする場合はこちら >>

データファイルの形式と容量を表記する

対象者：

優先度：推奨

4.6.1

等級： A

該当JIS項目： 7.2.4.4

説明

リンクにはページを移動するものの他に、PDFを表示したりWordやExcelなどのダウンロードが開始されるものなど様々なデータファイルが存在しています。

そのため、リンク内にデータファイルの形式が表記されていないと、当該データファイルを利用できない利用者が開こうとして不具合が発生する場合があることから、あらかじめデータファイルの形式を表記する必要があります。

対応方法

HTML

●PDF・Excelなどのデータファイルにリンクを設定する場合には、リンクテキスト内にデータファイルの形式を表記する。また、データファイルの容量も、可能な限り表記する。

ＣＭＳ操作説明書（PDF版）１１７ページ（リンクの設定方法）

WEB版にリンクする場合はこちら >>

ファイルの形式を、аタグの中に表記する。（例：<а>ガイドライン（PDF：64KB）</а>）

※音声読み上げソフトの機能には、リンクだけを抜き出して読み上げるものもある。

○ 良い例

【データファイルの形式をリンク内に正しく設定した場合】

○ どの利用者にとってもリンク先がデータファイルだと認識でき、利用者は自分のインターネット環境にあったデータファイルか判断で

きる。

【例外：見出しにデータファイルの形式を表記する場合】

○ レイアウト上の問題などでそれぞれのリンクにデータファイルの形式を表記することが難しい場合は、見出しに形式を表記し、以下の

リンクが同じ形式と示す方法を取る。

× 悪い例

【リンクの中に設定されていない場合】

× データファイルの形式・容量は表記されているが、リンクに設定されていないため、音声読み上げソフトの利用者はリンク先のデータ

ファイルの形式を判断できない。

【データファイルの形式の記述がない場合】

× リンク先のデータファイルの形式を判断出来ないため、誤ってデータファイルを開こうとして不具合が発生する可能性がある。

データファイルの容量を小さくするよう配慮する

対象者：

優先度：推奨

4.6.2

等級：なし

該当JIS項目：なし

説明

ページやPDFファイルへリンクを設定したり、 WordやExcelファイルなどをダウンロードするよう設定する場合、

「ページの容量に留意する（P14）」でも規定されている通り、それらの容量を小さくする必要があります。

これは、回線の速度や端末の性能など、利用者の環境によっては情報を取得しにくくなることを防ぐものです。データファイルの容量が大きい場合、ダウンロードに時間がかかり、利用者に負担をかける可能性があります。

対応方法

● PDFファイル・Excelファイルなどのデータファイルにリンクを設定する場合には、データファイルを分割するなどの配慮を行い、1ファイル当たりの容量を極力小さくする。

●設定したテキストリンクには、データファイルの形式を表記し、容量についても、可能な限り表記する。

補足

説明書

ＣＭＳ操作説明書（PDF版）該当なし

データファイルの容量の目安は1MBとする。

○ 良い例

【1冊の資料のPDFファイルを分割し、1ファイル当たりの容量を小さくした場合】

ウェブアクセシビリティ説明書のダウンロード

1. 表紙（PDF：509KB）

2. はじめに（PDF：123KB）

3. ウェブアクセシビリティとは（PDF：217KB）

4. ウェブアクセシビリティ達成基準（PDF：576KB）

5. おわりに（PDF：189KB）

ウェブ

アクセシビリティ

説明書

ページが短時間で

表示される。

○ １つ１つのデータファイルをダウンロードするのに時間がかからない。

× 悪い例

【1冊の資料のPDFファイルを分割せず、1ファイル当たりの容量が大きい場合】

ウェブアクセシビリティ説明書のダウンロード

● ウェブアクセシビリティ説明書（PDF：2.1MB）

ウェブ

アクセシビリティ

× データファイルをダウンロードするのに時間がかかる。

ページの表示に時間

を要する。

ＰＤＦファイルで情報を提供する場合は、

テキストによる代替情報を提供する

対象者：

優先度：推奨

4.6.3

等級： A

該当JIS項目： 7.1.1.1

説明

資料や書類などをインターネット上で公開する際に、効率を優先してPDFファイルを用いることがあります。素早い対応が求められる場合など、一時的な対応としては効果的ですが、音声読み上げソフトによっては、

PDFファイルの読み上げに対応していない場合があります。

また、スキャンデータなど、画像で構成されたPDFファイルは、音声読み上げが困難な場合があります。

そのため、PDFファイルで情報を提供する場合は、代替手段となるページも併せて提供する必要があります。

対応方法

●簡単な案内や文書などは、可能な限りテキストによるページ（htmlファイルなど）で作成する。（例１）

例１【簡単な案内や文書などは、極力テキストで作成する】

○ 良い例

× 悪い例

クリスマス限定ショップの実施予定（PDF：102KB）

PDF

読み上げできない

○ ページ本文に情報を記載している。

× PDFのみで情報を提供しており、音声読み上げソフトによる対応が

困難など、情報を得られない場合がある。

例２【PDFで情報を提供する場合は、代替となるテキストページも併せて提供する】

○ 良い例 × 悪い例

○ PDFファイルとhtmlファイルを併用して情報提供している。

× PDFのみで情報を提供しており、

情報を得られない場合がある。

ウェブアクセシビリティ説明書のダウンロード

1. 表紙（PDF：509KB）

2. はじめに（PDF：123KB）

3. ウェブアクセシビリティとは（PDF：217KB）

4. ウェブアクセシビリティ達成基準（PDF：576KB）

5. おわりに（PDF：189KB）

ウェブアクセシビリティ説明書のダウンロード

1. 表紙（PDF：509KB）

2. はじめに（PDF：123KB）

3. ウェブアクセシビリティとは（PDF：217KB）

4. ウェブアクセシビリティ達成基準（PDF：576KB）

5. おわりに（PDF：189KB）

テキスト形式はこちら

ウェブアクセシビリティ説明書（html版）

ＣＭＳ操作説明書（PDF版）１０ページ（ページ作成・修正上の注意）

WEB版にリンクする場合はこちら >>

●PDFで情報を提供する場合は、代替手段としてテキストによる説明ページも併せて提供する。（例２）

ダウンロードデータを利用するための

プログラムの入手先を明示する

対象者：

優先度：推奨

4.6.4

等級：なし

該当JIS項目：なし

説明

PDFファイルなどのダウンロードデータは、専用のプログラムがインストールされていないと、ブラウザ上で表示することができません。

そのため、プログラムの入手先を明示する必要があります。

対応方法

ＣＭＳ操作説明書（PDF版）１１７ページ（文字のリンク設置方法）

WEB版にリンクする場合はこちら >>

●ダウンロードデータを利用するためのプログラムの入手先を明示する。

参考例

【PDFファイルを閲覧するソフトの入手先を明示する例】

他団体のロゴマークを活用しリンクを設定する際には、当該団体の使用許諾の条件を十分に確認し同意のうえ、活用すること。

（関連項目として、「隣接する画像とテキストに対する同一のリンクは、一つにまとめる」（P39）も参照のこ

と）

このＰＤＦファイルを閲覧・印刷するにはAdobe Reader（アドビ・リーダー）というソフトウェアが必要です。このソフトウェアは、無料でインターネット上からダウンロードすることができます。

ダウンロードする場合は、下記のリンクをクリックして下さい。

Acrobat Readerはこちらからダウンロードできます。

該当JIS項目： 7.2.4.6、7.3.3.2

7.4.1.2

アンケートなどの各項目に入力すべき内容を説明する

対象者：

優先度：必須

（一部要対応）

4.7.1

等級：A、AA

説明

アンケートフォームなどにおいては、入力欄にわかりやすい説明をつけることで、利用者がスムーズに入力することができます。

なお、音声読み上げソフトは通常左上を起点に左から右、そして一段下がって左から右に読むことを繰り返すことから、入力欄の説明内容や位置によっては、利用しにくくなる場合がありますので、配慮が必要となります。

対応方法

●入力フォームの直前に、わかりやすい項目名を記載する。（例１）

●必須入力や、カタカナ表記などの入力条件がある場合は、入力フォームの直前で、わかりやすく説明する。

（例２）

HTML

●入力フォームの項目名と、入力フォームを関連付ける。

項目名は、label要素のfor属性を用いてテキストエリアとの関連付けを行う。

※現行のCMS標準編集画面では、テキストに対し入力フォームを関連付けることができないため対応困難

ＣＭＳ操作説明書（PDF版）１８３ページ（アンケートページについて）

WEB版にリンクする場合はこちら >>

（直接ソースプログラムの編集が必要）。

例１：入力フォームの直前に、わかりやすい項目名を記載する

○ 良い例 × 悪い例

○ 各入力欄の直前（左側）に何を記入したらいいか

がわかりやすく書いてあり、利用しやすい。

× 音声読み上げソフトの利用者は、「お名前」を読み上げた直後に入力を迫られ、姓や名をどちらに入力したらよ

いのか判断できず、利用しにくい。

例２：必須入力や、カタカナ表記などの入力条件がある場合は、入力フォームの

直前でわかりやすく説明する

○ 良い例

× 悪い例

○ 必須項目がどの利用者にとっても判断できる。また、音声読み上げソフトの利用者でも、事前に全角カタカナ入力が条件と分かるため、スムーズに入力できる。

（関連項目として、「文字色と背景色には、十分なコントラスト比を確保する」（P26）も参照のこと）

× 色の情報を得ることができない利用者は、必須項目がどれか判断ができない。

（関連項目として、「文字色の違いについてはテキストで補足する」（P22）も参照のこと）

また、音声読み上げソフトの利用者は、入力後に全角カタカナ入力が条件と知るため、入力操作が二度手間に

なるなど、利用しにくい。

お名前（姓）お名前（名）

※全角カタカナで入力してください。

※赤文字は必須項目です。

※全角カタカナで入力してください。

お名前（姓）＊必須お名前（名）＊必須

（姓）

お名前

（名）

お名前（姓）お名前（名）

該当JIS項目： 7.3.3.1、7.3.3.3

7.3.3.4

利用者に入力操作を行わせる際の留意事項

対象者：

優先度：参考

（一部対応済み）

4.7.2

等級：A、AA

説明

アンケートフォームなどにおいて利用者に入力してもらう際、利用者が入力ミスをしたり、未入力のまま送信することを防ぐための対応が必要です。その対応方法としては、入力エラーを利用者へ知らせる方法（対応方法 A）と、送信する前に入力内容の確認画面を用意する方法（対応方法B）があります。

詳しくは、対応方法を確認してください。

対応方法

HTML

●対応方法A：入力ミスや未入力などの入力エラーが発生した場合、該当箇所や修正方法を、テキストで知らせる。

クライアントサイド（JavaScriptなど）で、入力エラーをアラートで警告し、該当箇所や修正方法をテキストで知らせる。

●対応方法B：利用者が内容を送信する前に、入力内容の確認画面を設け、入力エラーがあった場合に修正できるようにする。（提供方法については多岐にわたるため、指定はされていない。）

※現行のＣＭＳでは、必須入力チェックのみ対応可能。

補足

ＣＭＳ操作説明書（PDF版）１９２ページ（アンケートページの作成）

WEB版にリンクする場合はこちら >>

JavaScriptの使用は原則禁止であるが、委託業者やページ編集の詳しい職員が、やむを得ずHTML編集モードによりJavaScriptを記述する場合は、JavaScriptに対応できない閲覧環境の利用者に向けた代替手段も必ず用意すること。また、後任者の円滑なページ更新に備え、当該ページの更新マニュアル作成・引継など、運用開始後のトラブル防止に向けた十分な対策を必ず行うこと。

プルダウンメニューはマウスだけでなく

キーボードでも操作できるようにする

対象者：

優先度：参考

4.7.3

等級： A

該当JIS項目： 7.2.1.1、7.3.2.2

説明

表示スペースが限られている場合や選択肢が多い場合、プルダウンメニュー（図１参照）を用いることもひとつの手段です。

プルダウンメニューを用いる際、キーボードを使って操作を行う利用者への配慮が必要です。

図１のとおり、「移動」という実行ボタンがない場合、キーボードを使って操作を行う利用者は意図しないページに移動してしまい、目的のページを選択できないことがあります。

このような状況を回避するために、「移動」などの実行ボタンを提供する必要があります。

実行ボタン（ここでは「移動」ボタン）のあるプルダウンメニューであれば、

矢印キー、タブキー及びエンターキーにより、ページを選択し、移動することができる。実行ボタンがなければ、キーボードを使って操作を行う利用者が利用しにくくなる。

図１プルダウンメニュー

図２さまざまな実行ボタン

対応方法

● プルダウンメニューはキーボードでも選択・移動ができるように実行ボタンをつける。

HTML

input要素にtype=“submit”を指定し、実行ボタンをつける。

（例： <input type=“submit” value=“移動”>）

※現行のCMS標準編集画面では、実行ボタンを設置できないため対応困難

（直接ソースプログラムの編集が必要）。

利用者の意図しないページの変化が起きないようにする

対象者：

優先度：必須

（一部対応済み）

4.8.1

等級： A

該当JIS項目： 7.3.2.1

説明

一般的にページの移動や入力欄の選択などを行う場合は、キーボードの操作や、マウスのクリック操作などが必要になります。それにより、利用者は自らの意思を反映することができます。

しかし、フォーカス（注１）を移動した瞬間にページが移動してしまうなど、利用者が操作した覚えがないのに画面が遷移した場合、利用者は混乱を起こす可能性があります。

そのため、利用者の意図しないページの変化が起きないようにし、利用者に配慮する必要があります。

注１…タブキーを押して、リンクやアンケートフォームなどの入力欄へ移動する際、利用者が今どこを選択しているかを視覚的に表した枠。ブラウザにより、見た目は異なるが、必ず表示される。（HTMLやCSSで故意に表示させない設定をしている場合を除く）

対応方法

●フォーカスを移動した瞬間にページの変化が起きないようにする。

HTML

※CMS操作説明書に従って作成すれば対応可能。

状況の変化に対するトリガー（注２）として、focus ではなく、activate を用いる

注２…ページの変化を引き起こす動作。例としてフォーカスを移動したりリンクをクリックしたりすることが挙げられる。

●実行ボタンのないプルダウンメニューは使用しない。（関連項目として、「プルダウンメニューはマウスだけ

でなくキーボードでも操作できるようにする」（P52）も参照のこと）

補足

キーボードだけで、すべての操作ができるようにする

対象者：

優先度：参考

（一部対応済み）

4.8.2

等級： A

該当JIS項目： 7.2.1.1、7.4.1.2

説明

一般的に、利用者は、マウスやタッチパッドなどを用いて操作を行っていますが、視覚や上肢に障がいがあり、マウスなどの使用が困難な方々にしばしば用いられているのが、キーボードを使用してページを操作する方法です。

そのため、キーボードの利用者に配慮する必要があります。

対応方法

●「矢印キー」による画面スクロール、「Tab」キーと「Enter」キーによる画面移動の操作など、キーボードによる操作ができるようにする。

※CMS操作説明書に従って作成すれば対応可能。

●実行ボタンのないプルダウンメニューは使用しない。（関連項目として、「プルダウンメニューはマウスだけ

でなくキーボードでも操作できるようにする」（P52）も参照のこと）

●イベント・ハンドラ（注１）を用いる場合、キーボードにも対応する。

注１…マウスをクリックするなどの個々の動作（イベント）があった時に、JavaScriptにより実行される処理。

※現行のCMS標準編集画面では、JavaScriptを記述できないため対応困難（直接ソースプログラムの編集が必要）。

HTML

イベント・ハンドラを用いる場合、マウス・キーボードそれぞれ固有のソースを記述する。次の表は、マウスイベント・ハンドラに対応するキーボードイベント・ハンドラの候補である。

表：イベント・ハンドラ対応表

マウス向け	mousedown	mouseup	click	mouseover	mouseout
キーボード向け	keydown	keyup	(keypress)	focus	blur

補足

フォーカスについて

対象者：

優先度：参考

（一部対応済み）

4.8.3

等級：A、AA

該当JIS項目： 7.2.4.3、7.2.4.7

説明

利用者が、マウスやキーボードで選択している部分をフォーカスと言い、視覚的にわかりやすくすることで利便性を向上させることができます。

また、キーボードで操作している場合に選択している部分が移動する順序は、左から右へ、そして上から下へといった視覚的に認知しやすい順序にすることで、利便性を向上させることができます。

これらは、自由に移動を行うことができるマウスに対して、キーボードで操作を行う利用者の利便性が著しく損なわれないようにするための配慮です。

フォーカスされている部分

テキストリンクにフォーカスされている様子。

（GoogleChrome最新版による表示）

入力欄にフォーカスされている様子。

（GoogleChrome最新版による表示）

①

②

③

④

⑤

⑥

⑦

入力欄の一般的な順序。不規則な順序になると、利用者が混乱する場合がある。

対応方法

HTML

●フォーカスされていることが視覚的に認知できるようにする。

outlineプロパティを0またはnoneに指定しない。

●設定したリンクには、文字色及び背景色の変更を行わない。（関連項目として、「リンクの文字色及び背景

色を設定しない」（P37）も参照のこと）

●フォーカスの移動順序は、視覚的に認知しやすい順序とする。

※CMS操作説明書に従って作成すれば対応可能。

HTML

tabindex属性を用いて、フォーカスの移動順序を変更しない。

GIFアニメーション画像を使用する際の留意事項

対象者：

優先度：推奨

4.9.1

等級： A

該当JIS項目： 7.2.2.2

説明

動きのある画像として、GIFアニメーション画像というものがあります。GIFアニメーション画像を使用すると、ページが華やかになったり、目立たせたい箇所をより強調することが可能となります。

しかし、GIFアニメーション画像の動きは利用者が停止させることができないため、認識しにくく、読みにくさを感じる場合があります。また、利用者の集中力を削いでしまう場合があります。

さらに、早い点滅は発作の原因にもなるため、GIFアニメーション画像を使用する際は配慮が必要です。

（代表的な事例としては、視聴者が光過敏性発作などを起こした「ポケモンショック」（1997年）などがあります。）

対応方法

●GIFアニメーション画像を可能な限り使用しない。

●やむを得ずGIFアニメーション画像を使用する場合は、動きが５秒以内に停止するよう作成する。

補足

GIFアニメーション画像を使用する場合は、以下の点についても留意すること。

１．コントラスト比の高い画像の反転表示が行われないこと。

２．画像が切り替わる領域の大きさに関わらず、画像が静止している時間の間隔を２秒以上とすること。

３．画像が点滅するものは、点滅の間隔を０.５秒以上とすること。

（関連項目として、「移動・点滅するテキストを使用しない」（P30）も参照のこと）

該当JIS項目： 7.1.2.1、7.1.2.2、

7.1.2.3

音声や映像の代替手段を用意する

対象者：

優先度：参考

4.9.2

等級： A

説明

音声や映像はテキストや静止画像に比べて高い情報発信力を持っているため、有効な手段として掲載する場合があります。

その際には、音声や映像から情報を取得することが困難な利用者のため、音声の内容を書き起こしたテキストや手話が収録されている映像を提供するなどの配慮が必要です。

対応方法

●音声情報には、聴覚の不自由な利用者のために、内容を書き起こしたテキストや、手話が収録されている映像を併せて提供する。

ＣＭＳ操作説明書（PDF版）１２ページ（ページ作成・修正上の注意）

WEB版にリンクする場合はこちら >>

●映像情報には、視覚の不自由な利用者のために、内容を書き起こしたテキストや、状況を説明する音声を併せて提供する。

参考：代替提供する手段の概念図

音声情報を

提供する場合

映像情報を

提供する場合

映像

音声

テキスト

映像

テキスト

音声

音声や映像の再生は、利用者が制御できるようにする

対象者：

優先度：参考

4.9.3

等級： A

該当JIS項目： 7.1.4.2、7.2.2.2

説明

ページには、様々な方法で音声や映像を表示することができます。

しかし、ページを開いた際に、自動的に音声や映像が再生されると、利用者としては予期せぬ音声や映像などにより、困惑する原因となります。

また、音声読み上げソフトの利用者は、自動的に再生された音声と読み上げ音声が重なり、聞き取りにくくなる場合があります。

そのため、音声や映像を提供する場合は、その再生・制御方法に配慮する必要があります。

対応方法

●ページを開いた際に、音声や映像が自動的に再生しないようにする。（３秒以内に停止する場合を除く）

●利用者が音声や映像の出力を制御できる機能を提供する。

ＣＭＳ操作説明書（PDF版）該当なし

（再生・停止・一時停止・スキップ・音量調節など）

「せん光」を用いた表現をしない

対象者：

優先度：推奨

4.10.1

等級： A

該当JIS項目： 7.2.3.1

説明

ある部分を強調させたい場合、点滅させるという表現方法があります。

ウェブサイトでは、GIFアニメーション画像やテキスト、動画について、点滅させる表現方法があります。その際、明るさの差が大きいと、せん光と呼ばれるものとなります。

せん光の頻度が高くなると、てんかん発作の原因となる場合があります。

過去には、視聴者が光過敏性発作などを起こした「ポケモンショック」（1997年）などの事例があり、ＮＨＫと民放連が、原則として１秒間に３回を超える点滅をしないなどの配慮事項を規定したガイドライン（注１）を作成し対応しています。

このような経過もありますので、GIFアニメーション画像やテキスト、動画をページに掲載する場合、せん光を用いた表現は避けてください。

注１...ガイドラインポケモンショック等を受け、NHK及び民放連では、1998年アニメーション等の制作にあたって留意すべき事項を取りまとめた「アニメーション等の映像手法に関するガイドライン」を制定し、放送に関わる全ての者が遵守すべきものと位置づけている。

対応方法

●GIFアニメーション画像や動画でせん光を用いた表現を使わない。また、動画で、せん光と覚しき箇所があれば削除する。

（関連項目として、「GIFアニメーション画像を使用する際の留意事項」（P56）も参照のこと）

●テキストでせん光を用いた表現を使わない。

（関連項目として、「移動・点滅するテキストを使用しない」（P30）も参照のこと）

HTML

marquee要素やblink要素を用いない。

※せん光かどうかを判断するには、「Photosensitive Epilepsy Analysis Tool (PEAT) 」などの専用のツールが必要。

補足

GIFアニメーション画像を使用する場合は、以下の点についても留意すること。

１．コントラスト比の高い画像の反転表示が行われないこと。

２．画像が切り替わる領域の大きさに関わらず、画像が静止している時間の間隔を２秒以上とすること。

ＣＭＳ操作説明書（PDF版）１２ページ（ページ作成・修正上の注意）

WEB版にリンクする場合はこちら >>

３．画像が点滅するものは、点滅の間隔を０.５秒以上とすること。

説明

北海道公式ウェブサイトでは、現在のところ、日本語の他に英語・中国語繁体字・中国語簡体字・韓国語・ロシア語にて提供されています。

ページを作成する際には、使用している言語に合わせた言語コードを設定する必要があります。正しく設定されていない場合、文字化けや表示の変化などの不具合が生じることがあります。また、音声読み上げソフトでは、正しく読み上げられない場合があります。

そのため、それぞれの言語は、日本語も含め、言語コードを適切に設定する必要があります。

対応方法

HTML

●ページ上において、言語コードを指定する。

日本語のページには、ソースコードに<html lang=“ja”>と記述する。

※現行の北海道公式ウェブサイトでは、対応済み。

HTML

●１ページ内で、部分的に異なる言語を用いる場合には、言語が切り替わった箇所にlang属性を用いて明示する。

テキストの一部に英語を用いる場合、英語のテキストと記述する。中国語繁体字の場合・・・中国語繁体字のテキスト

中国語簡体字の場合・・・中国語簡体字のテキスト

韓国語の場合・・・・・・・・・韓国語のテキスト

ロシア語の場合・・・・・・・・ロシア語のテキスト

※現行のCMSでは、ページ内で言語を指定できないため対応困難。

4.11.2 複雑なレイアウトや装飾などは、スタイルシートを用いて表現する

該当JIS項目： 7.1.3.1、7.1.4.5

等級： A、AA

対象者：

優先度：参考

説明

レイアウトや装飾を行う場合の方法としては、スタイルシート（CSSとも言う、ページの見栄えやレイアウトを細かく指定できる技術。）を用いる方法とテーブル（ページのソースコード内で編集できる表）を用いる方法があります。北海道公式ウェブサイトでは、テーブルを用いてレイアウトしている場合が多く見られます。

しかし、ウェブアクセシビリティの観点では、スタイルシートを用いるのが望ましいとされています。

これは、スタイルシートを用いることにより、利用機器に合わせた表示が容易になり、ファイルサイズを軽減できるなど、利用者にとって使いやすいページとなるためです。

そのため、北海道公式ウェブサイトで用意しているテンプレート以上の複雑なレイアウトや装飾などを施す場合は、スタイルシートを用いて表現することとなります。

対応方法

●スタイルシートを用いてレイアウトや表現方法を制御する場合、HTML構文は適切な文書構造で記述する。

●やむをえずテーブルを用いてレイアウトを行う場合は、単純な構造にし、読み上げ順序に配慮する。（関連項目として、「テーブル（表）を使用する場合は単純な構造にすることで、読み上げ順序に配慮する」（P45）も参照のこと）

補足

「北海道公式ウェブサイトの作成・更新にあたっては、例えば[課のページ]テンプレートのようなシンプルな構成のページとなるよう心がけること。

※スタイルシートの使用は原則禁止であるが、委託業者やページ編集の詳しい職員が、やむを得ずHTML編集モードによりスタイルシートを用いる場合は、後任者の円滑なページ更新に備え、当該ページの更新マニュアル作成・引継など。運用開始後のトラブル防止に向けた十分な対策を必ず行うこと。

Flash・Javaアプレット・JavaScriptを使用しない

対象者：

優先度：参考

4.11.3

等級：なし

該当JIS項目：なし

説明

ページにおいて動的な表現を用いる場合、 Flash（注１）・Javaアプレット（注２）・JavaScript（注３）を使用することがあります。

FlashやJavaアプレットは、ページにおいて動的な表現が可能ですが、専用のプログラムを導入していないと情報を取得しにくくなる場合があります。

また、音声読み上げソフトの利用者などは、利用環境に対応していない場合があります。そのため、原則として、FlashやJavaアプレットは使用しないでください。

JavaScriptについても、利用環境に対応していない場合やJavaScriptを無効にしている利用者がいることから、原則として、使用しないでください。

注１…音声や動画、アニメーションを組み合わせて作られるコンテンツ。マウスやキーボードによる操作もできる場合がある。表示するには「Flash Player」という無料のプログラムをインストールする必要がある。

注２…視覚的なコンテンツや動的なページを表現できる、アプリケーションやページを表現する仕組みの一種。表示するには「Java」という無料のプログラムをインストールする必要がある。

注３…ページを記述するプログラム言語の１つ。ページに「動き」を作ることができる。

対応方法

●Flash・Javaアプレット及びJavaScriptを原則として使用しない。

※現行のCMSでは、Javaアプレットは使用不可。

●やむをえずFlashを使用する場合は、 Flash を閲覧するためのプログラムの入手先を明示する。

（関連項目として、「ダウンロードデータを利用するためのプログラムの入手先を明示する」（P49）も参照すること）

●やむをえずJavaScriptを使用する場合は、JavaScriptを利用できない環境の利用者に対しても、代替の情報を提供する。

補足

委託業者やページ編集の詳しい職員が、やむを得ずHTML編集モードにより活用しページを作成する場合は、対応できない閲覧環境の利用者に向けた代替手段も必ず用意すること。また、後任者の円滑なページ更新に備え、当該ページの更新マニュアル作成・引継など、運用開始後のトラブル防止に向けた十分な対策を必ず行うこと。

フレームを使用しない

対象者：

優先度：参考

4.11.4

等級：なし

該当JIS項目：なし

説明

ページのレイアウトを行う方法として、「フレーム」というものがあります。

フレームは以下の図１のように、メニューと本文を分割する場合などに用いられる手法です。

しかし、音声読み上げソフトやテキストブラウザ（注１）を使用している利用者にとっては、フレームの操作が困難な場合があります。

また、xxxxによってはフレームをサポートしておらず、利用者が情報を取得しにくい場合があります。そのため、フレームを使用しないでください。

※注１…ページをテキストのみで表示するブラウザ。ページに埋め込まれた画像やFlashアニメーションなどは表示されないとともに、

HTMLやCSSで指定された文字装飾や色、レイアウトなどの指定、表組みなどの要素は表示に反映されない。

メニュー

概要

使用方法問い合わせ

概要の本文テキスト

・・・・・

フレームとは、ページを分割して複数のページを同時に表示させる手法です。

ここでは、メニュー（menu.htm）と、コンテンツの本文（contents.htm）の２ページが同時に表示されています。

例として、メニューの「概要」リンクをクリックすると、右側に「概要」のコンテンツが表示されるといった仕組みです。

contents.htm

menu.htm

図１：フレーム

対応方法

●フレームを使用しない。

補足

１．フレームを使用しないことに伴い、縦長のページ構成になる場合は、ページ先頭に簡潔な説明の挿入、ページ内リンクの設定などの工夫をすることで、利便性が高まる。（関連項目として、「ページは長くなりすぎないように配慮する（３）」（P13）も参照のこと）

２．職員が作成可能なページには必ずヘッダ・フッタ等が設定されるため、フレーム構成に適したページを作成することはできない。

イメージマップを使用する場合には、

適切な代替テキストを設定する

対象者：

優先度：参考

4.11.5

等級： A

該当JIS項目： 7.1.1.1、7.2.4.4

説明

画像にリンクを設定する場合、全体に設定する方法と部分的に設定する方法があります。

部分的に設定する方法として、地図上のエリアに直接リンクを設定するなどの場合、イメージマップ（図１参照）を用いることで視覚的にわかりやすく情報を伝えることができます。

その際、イメージマップとリンクの代替テキストを設定することで、視覚的に情報を取得することが困難な音声読み上げソフトの利用者などに対しても配慮を行います。

エリアにリンクが指定されており、クリックすることでリンク先へ

飛べる仕組みとなっている。地図などによく用いられる。

図１：イメージマップの例

対応方法

●イメージマップの全体の画像に代替テキストを入れる。

（例：札幌市の地図。詳細を見るには、各区を選択すること。）

HTML

img要素にalt属性を付与し、全体の画像を説明する簡潔な代替テキストを入れる。

●イメージマップ内のリンクとなっている部分に代替テキストを入れる。（例：東区）

HTML

area要素にalt属性を付与し、リンク先のページを想像しやすい簡潔な代替テキストを入れる。

※現行のCMS標準編集画面では、エリアそれぞれに代替テキストを設定できないため対応困難

ＣＭＳ操作説明書（PDF版）１２３ページ（イメージマップ設置方法）

WEB版にリンクする場合はこちら >>

（直接ソースプログラムの編集が必要）。

チェックリスト

5

ページ作成及び更新を担当する職員は、本ガイドラインに基づいてページ作成及び更新を行ってください。

作成及び更新したページが、本ガイドラインに基づいているかを調査する場合は、次ページの「チェックリスト」を使用してください。

チェックリスト使用手順

1. 作成及び更新したページが、チェック項目に該当する場合は、「配慮の必要性の有無」の欄に✔をつけます。

※共通項目については、必ず配慮が必要ですので、【必須】としています。

2. チェックリストの「配慮の必要性の有無」の欄が【必須】となっている項目及び、【✔】をつけた項目について、「配慮項目」と「項目内容」を確認し、達成していれば「OK」の欄に、達成していなければ

「NG」の欄に、該当するものがなければ「該当なし」の欄に【✔】をつけます。

3. 「NG」の欄に【✔】をつけた項目及び、「OK」か「NG」か「該当なし」かの判断が困難な項目については、

「ガイドライン関連ページ」に記載されている該当ページを参考にしてください。

配慮の必要性の有無	配慮項目	項目内容	OK	NG	該当なし	ガイドライン関連ページ	優先度
	入力フォームを使用していますか？
	アンケートなどの各項目に入力すべき内容を説明する	●入力フォームの直前に、わかりやすい項目名を記載する。				50	必須（一部要対応）
	アンケートなどの各項目に入力すべき内容を説明する	●必須入力や、カタカナ表記などの入力条件がある場合は、入力フォームの直前で、わかりやすく説明する。				50	必須（一部要対応）
	利用者の意図しないページの変化が起きないようにする	●実行ボタンのないプルダウンメニューは使用しない。				53	必須（一部対応済み）
配慮の必要性の有無	配慮項目	項目内容	OK	NG	該当なし	ガイドライン関連ページ	優先度
	音声・動画を使用していますか？
	GIFアニメーション画像を使用する際の留意事項	●GIFアニメーション画像を可能な限り使用しない。				56	推奨
	GIFアニメーション画像を使用する際の留意事項	●やむを得ずGIFアニメーション画像を使用する場合は、動きが５秒以内に停止するよう作成する。				56	推奨
配慮の必要性の有無	配慮項目	項目内容	OK	NG	該当なし	ガイドライン関連ページ	優先度
	せん光するものはありますか？
	「せん光」を用いた表現をしない	●GIFアニメーション画像や動画でせん光を用いた表現を使わない。また、動画で、せん光と覚しき箇所があれば削除する。				59	推奨
	「せん光」を用いた表現をしない	●テキストでせん光を用いた表現を使わない。				59	推奨

北海道ウェブアクセシビリティガイドライン

Document Metadata

Table of Contents

Document Metadata