アクセシビリティガイドライン(パソコン用)
ここから本文
前提条件
適用範囲
本ガイドラインは、「視覚障害者情報総合ネットワーク（サピエ）」のウェブサイトに適用する。
適用除外
業務系システムなどにおいては本ガイドラインの適用を除外することができる。
想定する利用環境と制限事項
パソコン
- 基本ソフト：
- Windows10 21H2以降。
- ブラウザ：
- Google Chrome バージョン100、Microsoft Edge バージョン100以降。
- ウェブ読み上げソフトウェア：
- 国内の主要な画面音声化ソフト、音声ブラウザ（ブラウザ音声化インターフェースソフトウェア）。
- 制限事項：
- ソフトウェアの構成によっては、本ガイドラインに示したウェブの仕組みを利用できないことがある。 例、見出し・箇条書き・表組みタグやページ内リンクの利用度合いは、製品ごとに異なる。
- 動作確認：
- 目視での操作と画面を見ない操作（音声読み上げ使用）で動作を確認する。
- 目視での操作：Google Chrome、Microsoft Edge使用。
- 読み上げ操作：PC-Talker Neo Version2112にてGoogle Chrome、Microsoft Edgeを使用。
必須事項
1.文書構造(ページタイトル、見出し、箇条書き、表組み)
1-1.ページタイトル <title>
- ページタイトルには、ページの識別ができ、内容を的確に示す文言をつける。
- リンク前後のページでは、ページタイトルに同一の文言を用いない。
1-2.見出し <h1> 〜 <h6>
- 文章の見出しの意味を持つ部分には、見出しのタグを使う。
- 大見出し <h1> は各ページに1つだけ用いる。それ以外の見出しは、意味に応じて適切なレベル(中〜小)の使い分けを行う <h2>〜<h6>。
- 大見出し <h1> にはページタイトルと同じ文言を用いる。
- 大見出し <h1> は、原則として本文の前に設置する。
- 検索結果の一覧ページでは、各検索結果のタイトルを見出しとする。
1-3.箇条書き <ol> <ul>
- 文章の箇条書きの意味を持つ部分には、箇条書きのタグを使う。
- 箇条書きタグは、順序あり <ol> と、順序なし <ul> を意味に則して使い分ける。
1-4.表組み <table>
- 見出しセルには <th> タグを使用する。
- レイアウト目的でテーブルタグは使用しない。
- 表組みの表記ルール。
- 空白セルを設けない。
- 行をセル単位で左から右へ読み上げて、表の上下左右の関連が推測できる。
2.アクセスキー
リンクには、割り当てルールに従ってアクセスキーを設ける。
- 使用する文字
- アクセスキーには数字(1〜0)を用いる。
- 割り当てルール
- 各数字の割り当ては次の通りとする。
- ポータルサイト
- 1〜6: カテゴリへのリンク。
7、9: 割り当て無（任意に使用可）。
8: 各サイトホームへのリンク。
0: ポータルホームへのリンク。 - それ以外のサイト
- 1〜7、9: 割り当て無（任意に使用可）。
8: 各サイトホームへのリンク。
0: ポータルホームへのリンク。
- 禁止事項
- アクセスキーによって、直接処理が開始される要素には、アクセスキーを割り当てないこと。
例、送信ボタンやリセットボタンなど、アクセスキーによってそのボタンが実行される場合。 - アクセスキーの表記
- 項目名の末尾に（）つきで記す。例、「ポータルホーム（0）」。 但し、項目名の行頭に番号を付記するような場合は省略できる。
3.項目の数
- 目次やメニューなどで一度に把握する項目は原則として6件以下とする。
- 6件を超える場合は、階層化やグルーピング（ページ内リンク、見出しタグなど）により、一度に把握する項目を6件以下とすることが望ましい。
- 項目の数に関わらず、メニューには順序ありまたは順序なし箇条書きタグを用いる。
4．ガイドメッセージ
- 画面音声化ソフトのためのガイドメッセージ（不可視テキスト）を設ける。
- 詳細は「コーディング仕様書」に規定する。
ガイドメッセージの例
- 「ページタイトル：○×」：
- ページの先頭に設置する（○×はタイトルと同じ文言）。
- 「現在位置」：
- ページの現在位置を示すパス（パンくずリスト）の開始位置に設置。
- 「ここから本文」：
- 本文がページの先頭から始まらない場合に必要。
- 「ページの終わり」：
- ページの末尾に設置する。
5．一貫性
- サイト内で共通に用いるリンク、ラベル、ページタイトル、キャプション、見出し、メッセージなどには、サイト全体で統一した表現（文言・形状・色彩・配置など）や機能を使用する。
- 詳細は「コーディング仕様書」に規定する。
6．フレーム
- フレームは使用しない。
7．別ウィンドウ表示
- ポップアップウィンドウ（別ウィンドウ表示）は使用しない。
8．自動的な処理
- 表示中のページが自動的に更新したり別のページに移動しないこと。
但し、待ち時間0秒のリダイレクトは使用可とする。 - 自動的に音（BGMなど）が再生されないこと。
9．画像の代替情報
- 画像、画像リンクには画像の内容を的確に示した代替テキストを付加する。
意味のない画像はalt=""とする。
10．入力フォーム
10-1.入力フォーム全般
- ページの理解・操作に必要な情報は、色や位置のみで示さない（例、赤い枠に記入、青いボタンを押す、画面右下の…などは不可）。 （補足）見やすい色分けも必要。
- 入力フォームはlabel要素を用いてフォーム要素とラベルを関連付けること。
- 全ての操作がキーボードのみでできること。
- 操作に必要な情報が読み上げできること（入力フォームの種類、入力する内容や条件など）。
- ダウンロードデータには、あらかじめファイルの形式やサイズが示されていること。
- 操作中、入力フォームに戻れること。その際、入力済のデータが保持されていること。
- 入力した内容は、送信前にユーザが確認・修正できること。
- 入力には時間制限がないこと。
- 同じ内容の繰り返し入力がないこと。例、契約者と送付先が同じ場合、「契約者と同じ」とする。
- エラーの通知は、内容がテキストで表示されていること。
- エラーを通知するテキストは、エラー内容を具体的でわかりやすく示すこと。
10-2.操作ボタン
- ボタンには役割を示す適切な名前がテキストでついていること。
- ボタンは一目でその役割がわかること。
- ボタンは入力操作の流れに沿った場所に配置すること。
11．リンク
- 面積と間隔
- リンクの文字や画像は、充分な面積を取り（クリックのしやすさ）、充分に間隔をあける（誤操作の防止）。
- リンクの表示
- リンクがあることが一目でわかること。
- リンク先の表現
- リンクは、リンク先の内容がわかるように表現する。「ここへ」などは不可。
12．テキスト
- 読み上げに有害な記号・省略表記・空白・改行・半角全角文字の混在がないこと。→画面音声化ソフトにて確認する。
- 専門用語・略語・固有名詞には、解説や読みがなをつけること。→例、「全視情協（ぜんしじょうきょう）」。
- 半角カタカナは使用しない。
- 機種依存文字（丸付き数字やローマ数字など）は使用しない。
13．特定の技術やプラグイン
- 特定の技術（イメージマップなど）やプラグイン（JavaScript・Javaアプレット・Flash・PDFなど）を用いる場合、それらは簡易な音声ブラウザソフトウェアでも利用できること。 または、音声ブラウザソフトウェアのための代替手段・代替情報が提供されていること。
14．音声、動画の情報
- 音声データを使用する場合は、出来る限りテキストで同等の情報が提供されていること。
- 動画を使用する場合は、出来る限り音声データまたはテキストなどで同等の情報が提供されていること。
15．読み上げ順
- ページ全体として正しい順序で読み上げられること。
16．一般的なナビゲーション
- サイトマップやページ共通のナビゲーションバーなどを設けて、サイト構成を把握しやすくしていること。
- ページの現在位置を示すパス（パンくずリスト）により現在のページの位置が把握できること。
- ナビゲーションやメニューの読み飛ばしができること。
- ページの縦幅450ピクセルを1画面として、ページ長が3画面以上になる場合は、ページの冒頭にページ内リンクで目次を設ける。
17．画面表示
- コントラスト
- 文字色と背景色のコントラストが充分に取られていること。
WCAG2.0)より充分なコントラスト 7:1 、最低限のコントラスト（大きな文字） 4.5:1 、のコントラスト比をもたせる。 - 配色
- 配色は色弱者に配慮して行い、また色のみで情報を識別する必要が無いこと。
- 短時間の画面変化
- 画面が短時間に連続的に変化する表現は使わない。画面の一部でも、明滅やスクロールの速いもの、色のコントラストが極端に変わるものを使用しない。
WCAG2.0)閃光（1秒間に3回以内）、または閾値以下（閃光は一般閃光閾値および赤色閃光閾値を下回っている）。 - ページ幅
- 横方向のスクロールが発生しないこと。
- ページ長
- ページの縦幅 450ピクセルを1画面として、ページ長が3画面以上の場合は、ページ内ナビゲーション（ページ内リンク、「ページの先頭へ戻る」リンク）を設ける。
- 画像化した文字
- 必要不可欠な場合(ロゴ、ブランド名の一部である文字など）を除き、画像化した文字は使用しない。
WCAG2.0)画像化された文字： 使用している技術で意図した視覚的な表現が可能である場合は、画像化された文字ではなくテキストを用いて情報を伝える。 - 画像の背景
- 必要不可欠な場合を除き、画像の背景（文字や絵の周囲）には、透過色を設定しないこと。 もし、透過色を使用する場合は、文字の周りに縁を十分につけるなどして、背景色が変わっても画像が認識できるようにすること。
- 文字の変更
- 文字サイズ・フォント・行間は、利用者が変更できるようにする。
インターネットオプション＞全般＞ユーザ補助にて設定。
WCAG2.0)テキストのサイズ変更： コンテンツあるいは機能を損なうことなく、テキストを支援技術なしで200％までサイズ変更できる。 ただし、キャプションおよび画像化された文字は除く。 - 文字装飾
- 意味が大きく変わる文字装飾（取り消し線など）を使用する場合、その意味をテキストでも併記する。
- 段組
- 段組を使用する場合は隣接する段組との境界が分かりやすくなっていること。
- 離れた場所への表示
- 情報の一部がコンテンツ表示領域内の離れた場所に表示されていないこと。
- 情報の表示領域
- 情報は、ブラウザ内のコンテンツ表示領域に表示されていること。ステータスバーに情報を表示しない。
18．ブラウザの基本的機能
- ブラウザの基本的な機能やGUIコントロール（ツールバー、スクロールバーなど）は変更しないこと。
以上