守谷市公式サイト作成ガイドライン（アクセシビリティガイドライン）

画像内の文字はスマホで読めるように

小さい画面で文字が潰れないか

情報を視覚的に見やすくするため、画像化したバナー・グラフ・フローを掲載することは好ましい。

画像内の文字サイズはスマホの画面サイズにした際に、文字が潰れないかなどを確認すること。

スマホでも小さい文字を読ませたい場合

通常の画像だと、使用者は画像を拡大することができない。

できるだけ避けるべきだが、スマホで小さい文字付の画像を読ませる場合、PDF化してアップロードすること。

フォントはゴシック体

画像内文字のフォントは原則ゴシック体を使用する。

イベント参加者募集等の親しみやすさなどを演出するための画像については、この限りではない。

標準フォント

• BIZ UDPゴシック
• HGP創英角ゴシックUB
• 欧文フォントが浮くため、英字を使う場合は、欧文用フォントと組み合わせると良い

例：
Bahnschrift Semi Bold

フリーフォント

• 源ノ角ゴシック JP Heavy
• Noto Sans JP Black
• Nasu
• M PLUS 1p BLACK

このページの先頭へ戻る

内部・外部リンクのルール

内部リンク

• 原則、独立して設定する
• 「新規にウインドウを開いて表示する」は使用しない

内部リンク見出し

• 原則、リンク先のページタイトルのみ
• 「こちら」「詳細はこちら」など、リンク見出しのみで内容が推測できないタイトルは避ける

外部リンク

• 原則、文章中ではなく、独立して設定する
• 「新規にウインドウを開いて表示する」を設定する

外部リンク見出し

原則、「リンク先のページタイトル」＋「（リンク先の組織名）」

例：新型コロナワクチンについて（厚生労働省）

トップページにリンクする場合

「（リンク先の組織名）」

例：厚生労働省

このページの先頭へ戻る

スペースの使用ルール

段落表現は字下げせず、改行

WEBでは段落表現に改行を使用する。

悪い例

守谷市の市制にあたり、市民の共感を呼び、市の個性を発揮できるような統一的なイメージを創造し、守谷らしさの印象づけを図ります。
また、地域の個性を育て、外部にアピールすることで、守谷のイメージアップと活性化につなげていくことを目的とします。

良い例

守谷市の市制にあたり、市民の共感を呼び、市の個性を発揮できるような統一的なイメージを創造し、守谷らしさの印象づけを図ります。

また、地域の個性を育て、外部にアピールすることで、守谷のイメージアップと活性化につなげていくことを目的とします。

会社等組織の名称

名称との間に半角スペース（Shift＋スペースキー）を挿入する。

例

株式会社 守谷商事

氏名

姓と名の間に半角スペースを挿入する。

例

守谷 太郎

文字間調整にスペースは使わない

見た目を整える目的で、一語内にスペースは使用しない。

悪い例

秘 書 課

良い例

秘書課

このページの先頭へ戻る

住所表記

正式な表記が明らかな場合、漢字を用いて番地部分を表記する。

悪い例

茨城県守谷市大柏950-1

良い例

茨城県守谷市大柏950番地の1

このページの先頭へ戻る

日時表記

• 「～」は使用しない
• 期間は「（日付）から（日付）まで」と表記
• 日付は「年・月・日・曜日」で構成
• 「年」は和暦または西暦
• 「曜日」はカッコ書きで、「〇曜」表記に統一
• （過去の日付のみ）曜日の省略可
• （表形式のカレンダーなど複数回日付を繰り返す場合）「年・月」を前述すれば、「日付・曜日」のみで可
• 時刻は12時間制とする
• 「午後0時00分」は「正午」と表記
• 「00分」は省略

悪い例

2023/2/6 Mon.
9:00～16:00

良い例

令和5年2月6日（月曜）
午前9時から正午まで

このページの先頭へ戻る

電話番号表記

4つのルール

• 「電話：（全角コロン）」で書き出す
• 「半角数字」＋「-（半角ハイフン）」を使う
• 「代表」や「内線：」はカッコで括る
• 番号は市外局番から

例

電話：0297-45-1111（内線：322）

このページの先頭へ戻る

数字表記

分数

「〇分の〇」と書く。

例

4分の3

4桁以上の数字

• 原則アラビア数字のみ使う
• 3桁ごとに「 , 」（半角カンマ）を使う

例

15,000,000円

このページの先頭へ戻る

単位表記

アルファベットは使用しない

アルファベットの単位は正しく音声読み上げされないため、カタカナで表記する。

例

km：キロメートル
ha：ヘクタール

このページの先頭へ戻る

画像代替テキスト

代替テキスト（ALT・alt）とは？

画像や動画などに何が掲載されているかを表す情報のこと。

主に視覚障がい者の方が音声ブラウザ（音声読み上げによるWEBブラウザ）などで情報を得るために必要なもの。

また、ページが重くて画像や動画が表示されなかった際に代わりに表示されるほか、検索エンジンの評価が良くなるため、上位に表示されやすくなる。

具体的にどういった記載が必要？

基本の10原則

• 画像をテキストに置き換えても違和感なく、情報を伝えることができるか
• 画像と代替テキストの意味合いが等価であるか
• 繰り返しを避ける
  （同じ代替テキストを並べる など）
• 短く、簡潔に
  （多くても80文字前後）
• 写真の場合、「写っているもの」
• 文字ベースの画像は「文字の内容」
• グラフは「グラフの概要と分析結果」or「近くに数値を表した表」
• チャートは「近くに説明を置く」or「分解して文章に」
• リンク画像は「リンク先のタイトル」
• 意味のない装飾には「不要」

このページの先頭へ戻る

画像の配色

色覚障がい者に見づらい色

日本人男性の20人に1人、日本人女性の500人に1人が色弱と言われる。

文字を含んだ画像などを作成する場合には、以下に配慮すること。

• 白黒にしても分かるように
• 寒色系同士・暖色系同士で組み合わせない
• 明度に差をつける
  （コントラストをつける）
• 文字は縁取りなど、境界をはっきり

このページの先頭へ戻る

PDFはなるべく使用しない

アクセシブルなPDF作成は難しい

可能な限り本サイト上で直接入力し、WEBページとして情報発信することを心掛けること。

どうしてもPDFで発信したいとき

やってはいけないこと

スキャンしたデータをそのまま掲載する

対応方法

• テキストデータが含まれた元データを入手し、掲載
• 事業者にガイドブック作成等を依頼する際に、PDF等を音声読み上げなどに対応するよう仕様書に記載する
• PDFへの変換時にWordやExcelで適切にマークアップ（構造化）する

PDFのプロパティを誤ったまま掲載する

注意

WordなどからPDFへ変換する際に、ソフトの設定によってはプロパティの日本語が文字化けすることなどがあるので注意する。

やるべきこと

PDFをWEBサイトで掲載するのと同じように構造化等する必要がある。

• 見出し・リスト・外部リンクなどの情報を追加する
• 画像に代替テキストを追加する
• 目次から該当文書に移動するリンクを追加する
• 言語設定、文書名などのプロパティを設定する

このページの先頭へ戻る

見出し・リストなどを使う

見出しを使い、文書を構造化する

中見出し<h2>、小見出し<h3>、細見出し<h4>などを使用し、文書を構造化すること。

見出しを設定することで、どの情報がどこに書かれているかを視覚的に判断しやすくなる。

また、音声読み上げの利用者にとっても見出しごとに飛ばし読みができるので、素早い情報の取得が可能になる。

やってはいけないこと

見出しの順序は飛ばさない

悪い例

「中見出し」、「細見出し」、「小見出し」の順

良い例

「中見出し」、「小見出し」、「細見出し」の順

見た目上の強調だけを目的に使ってはいけない

悪い例

中見出しに文章を入力する

• 見出しにリンクを設定してはならない
• 見出しに「色」や「太字」などで修飾してはならない

リストを使い、文書を構造化する

「・」で始まる箇条書き（順序無しリスト）や、「1.」で始まる箇条書き（順序付きリスト）は、自身でテキストを入力せずパーツを使用すること。

やってはいけないこと

• 「・」「 」「△」など、箇条書きの行頭記号を手入力してはならない
• 項目が1つのみの場合は、使用してはならない
• 以下のように、箇条書きの途中に説明を入れる際は、箇条書きを解除して記載してはならない

悪い例

箇条書きを解除した場合

• ああああ

「ああああ」の説明

• いいいい

「いいいい」の説明

良い例

箇条書きを解除せずに改行する

• ああああ
  「ああああ」の補足
• いいいい
  「いいいい」の補足

長い文章をリスト状に分解すると良い

対象者などの条件を表現するとき、いくつも文節をつなげた文章で書かれることが見受けられる。

分かりづらくなるので、要素を分解して箇条書きすること。

悪い例

この事業の対象者は、令和4年11月1日（火曜）から、令和5年1月20日（金曜）において、守谷市の住民基本台帳に登録されており、かつマイナンバーカードを所有し、平成16年4月2日以降生まれのNFC対応スマートフォンをお持ちのかた。

良い例

見出し（対象者）
令和4年11月1日（火曜）から令和5年1月20日（金曜）において以下の全てに該当するかた

• 守谷市の住民基本台帳に登録
• マイナンバーカードを所有
• 平成16年4月2日以降生まれ
• NFC対応スマートフォンを所有

このページの先頭へ戻る

複雑な表は作らない

複雑な表データや表をPDF化して掲載することはアクセシビリティ上・ユーザビリティ上好ましくない。

「表でない方が分かりづらい情報」や「事業者向けの情報」を除き、見出しを使用した構造化に努めること。

• 結合したセルは音声読み上げが正しく行われない
• スマホ等ディスプレイ幅の狭い端末で見ると、読みづらい

横3列まで

多くの利用者が使用するスマートフォンでは、情報量の多い表データは非常に見づらい。

特に「列数が多い」「文章が長い」表は使用者に負担がかかるため、極力避けること。

1セル1データ

各セルには「文章」や「複数要素」を記載せず、1セル1データを厳守すること。

結合しない

セル結合をすると、音声読み上げで適切な順番で読み上げることができない。

「同一内容でも各セルに記載する」「表を分ける」などの対応をとること。

スマホプレビューで確認する

作成担当者は原則パソコンで操作するため、パソコンで見やすいレイアウトに整えがちだが、使用者の端末は人それぞれ異なる。

特に表示が崩れやすい表データは必ずスマホプレビューで確認すること。

入れ子にしない

表の中に表を組み込んだ「入れ子」構造は、正しく音声を読み上げることが困難なため、避けること。

このページの先頭へ戻る

色に依存した表現をしない

色に依存した表現は、色覚障がい者や視覚障がい者が正しく情報を認識できない。

やってはいけない

• あああ
• いいい
• ううう

（注記）
赤色の文字は〇〇の場合、持参してください。

〇やってほしい

• あああ
• いいい（注記）
• ううう

（注記）
〇〇の場合、持参してください。

このページの先頭へ戻る

位置や形に依存した表現をしない

位置に依存した表現は、視覚障がい者が正しく情報を認識できない。

画面サイズや表示サイズによっても位置が異なるため、使用しない。

やってはいけない

右側の四角いボタンを選択

例外として、「写真の中の右上の人物は～」は表現上問題ない。

やってほしい

• 右側の「お問合せフォーム」と書かれた四角いボタンを選択
• 「お問合せフォーム」を選択

視覚障がい者にも晴眼者にも対応している

このページの先頭へ戻る