株式会社行間　制作例 b
作成日：2026年11月3日

実装チェックリスト

件名：「令和7年国勢調査 人口等基本集計 結果の要約」のウェブページ化

本書は株式会社行間が自主的に制作した制作例に添える文書です。受託業務の納品物ではありません。

1. この文書について

達成基準ごとに、対象のページで満たすために実装した方法を記録したものです。試験の結果は「達成基準チェックリスト」に記載しています。関係するコンテンツがない達成基準（適用なし）は省いています。

2. 実装した方法

番号達成基準レベル実装した方法
1.1.1非テキストコンテンツA図は SVG で描き、role="img" と aria-labelledby で図の題名と説明文を名前にした。説明文には図から読み取れる要点（最大・最小・推移）を書き、すべての図に数値の表（details の中）を添えた。
1.3.1情報及び関係性A原本の囲みの見出しを h2、箇条書きを ul にした。表は caption・thead・th（scope="col"／"row"／"colgroup"）で組み、二段の見出しは colgroup でまとめた。注記の番号は sup で示した。
1.3.2意味のある順序AHTML のソースの順序を原本の読む順序と一致させ、CSS で位置を入れ替えていない。
1.3.3感覚的な特徴A図表は番号と題名で参照し、「右の図」「青い線」のような書き方をしていない。
1.4.1色の使用A折れ線は実線・破線と印（■◆●▲）、棒は濃淡に縁取り・模様を加え、凡例と説明文でも区別した。図5（2）の最下位の階級は模様で示した。
1.4.3コントラスト（最低限）AA文字色は #1a1b23（本文）・#4a4c58（補足）、リンクは #2f45c8 とし、白地とのコントラスト比を 7:1 以上にした。図の棒の上の白い文字は、濃い棒（4.5:1 以上）にだけ置いた。
1.4.4テキストのサイズ変更AA文字の大きさは rem で指定し、固定の高さを持つ箱に文字を入れていない。幅の広い表と図は、枠の中だけで横に動かせるようにした（overflow-x: auto）。
1.4.5文字画像AA図はすべて SVG の text 要素で文字を書き、画像に焼き付けていない。
2.1.1キーボードAリンクと、数値の表を開閉する details／summary（ブラウザ標準の部品）だけで構成した。横に動かせる表の枠には tabindex="0" と名前を付けた。
2.4.1ブロックスキップAページの最初に「本文へ移動」のリンク（フォーカスを受けたときに表示）を置き、main 要素に移動するようにした。
2.4.2ページタイトルAtitle に資料の題名と、ウェブページ版・制作例であることを書いた。
2.4.3フォーカス順序Atabindex は 0 だけを使い、HTML の順序どおりにフォーカスが移るようにした。
2.4.4リンクの目的（コンテキスト内）Aリンクの文字列を行き先の名前にし、PDF へのリンクには形式とファイルの大きさを添えた。
2.4.6見出し及びラベルAA原本の囲みの見出しをそのまま章の見出しにした。目次には見出しを短くしたものを置いた。
2.4.7フォーカスの可視化AA:focus-visible に 3px の枠（#c8410b、白地との比 4.98:1）を付け、ブラウザ標準の枠を消していない。
3.1.1ページの言語Ahtml 要素に lang="ja" を指定した。
3.1.2一部分の言語AA図7 の資料名などの英語の部分を span lang="en" で囲んだ。
4.1.1構文解析AHTML の文法に沿って書き、Nu Html Checker でエラーがないことを確かめた。図の模様の id は図ごとに変えた。
4.1.2名前（name）・役割（role）及び値（value）A独自の部品を作らず、標準の要素（a・details・summary・table）を使った。図と表の枠には aria-labelledby で名前を付けた。