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

達成基準チェックリスト

件名:公式ウェブサイトのデザイン(架空の公的機関)

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

1. 試験の概要

規格JIS X 8341-3:2016 目標とする適合レベル:AA
対象のページ全 26 ページ(トップページ A 案・B 案、お知らせ・組織案内・調達情報・資料・English の各ページ、サイトマップ・検索・方針・部品一覧)
試験の日2026年11月3日
試験の環境macOS 26.5/Google Chrome 157(自動の確認)、W3C Nu Html Checker、iOS シミュレーター(Safari)
結果適合 26 項目、適用なし 12 項目、不適合 0 項目(38 項目中)

試験は自己試験です(第三者の試験ではありません)。全ページを対象にしました(抽出ではありません)。音声読み上げソフトでの確認は行っていません。

2. 機械で確かめた事実

対象26 ページ(最大 2 クリック)
文字と背景のコントラスト最小 6.5:1、基準未満 0 件
キーボード全ページで Tab のたどり合計 675 か所、フォーカスが見えない箇所 0、行き止まり なし
構造見出しのレベルの飛ばし 0 件、caption のない表 0 件、scope のない見出しセル 0 件、名前のないリンク 0 件
表示の幅768px・640px(200% 相当)・375px で、ページ全体の横方向のはみ出し 0 件
HTML の検証Nu Html Checker(html5.validator.nu):エラーのあるページ 0 ページ
メニュー(幅 375px)閉じた状態で非表示 ○、Enter で開く(aria-expanded="true")、Esc で閉じてボタンに戻る ○

3. 達成基準ごとの結果

「適用」は、対象のページにその達成基準が関係するコンテンツがあるか。「適用なし」は、関係するコンテンツがないため満たしているものとして扱う項目です。

番号達成基準レベル適用結果確認の方法と根拠
1.1.1非テキストコンテンツAあり適合ロゴ・アイコン・B 案の星空は装飾として aria-hidden。意味のある画像はない。img 要素はない。
1.2.1音声のみ及び映像のみ(収録済み)Aなし適用なし音声・映像がない。
1.2.2キャプション(収録済み)Aなし適用なし同上。
1.2.3音声解説、又はメディアに対する代替(収録済み)Aなし適用なし同上。
1.2.4キャプション(ライブ)AAなし適用なし同上。
1.2.5音声解説(収録済み)AAなし適用なし同上。
1.3.1情報及び関係性Aあり適合全ページで、見出しのレベルの飛ばしがないこと、表に caption(または見出しを持たない並べ方の表であること)と scope があることを確認。お知らせの一覧は ul、組織図は入れ子の ul。
1.3.2意味のある順序Aあり適合HTML の順序が、ヘッダー→メニュー→パンくず→本文→フッターで、見た目の順序と一致することを目視で確認。
1.3.3感覚的な特徴Aあり適合「右の」「赤い」のような、形・位置・色だけの指示がないことを確認。
1.4.1色の使用Aあり適合お知らせの種類は色に加えて文字(報道発表・イベントなど)、現在地はメニューの下線と aria-current、リンクは下線で示す。
1.4.2音声の制御Aなし適用なし音声がない。
1.4.3コントラスト(最低限)AAあり適合全ページの文字と背景の組合せを計算し、最小 6.5:1。
1.4.4テキストのサイズ変更AAあり適合幅 640px(文字 200% 相当)でページ全体の横方向のはみ出しがないこと。列の多い表は枠の中で横に動かす。
1.4.5文字画像AAあり適合文字の画像を使っていない(ロゴの名称も文字)。
2.1.1キーボードAあり適合Tab キーで全ページのリンク・ボタン・入力欄に届くこと、スマートフォンの幅でメニューが Enter で開くこと、お知らせの絞り込みがボタンで操作できることを確認。
2.1.2キーボードトラップなしAあり適合全ページを Tab で最後までたどり、行き止まりがないことを確認。メニューは Esc でも閉じられる。
2.2.1タイミング調整可能Aなし適用なし制限時間がない。
2.2.2一時停止、停止、非表示Aなし適用なし動くもの・自動で切り替わるもの(カルーセルなど)がない。
2.3.13回の閃光、又は閾値以下Aなし適用なし点滅するものがない。
2.4.1ブロックスキップAあり適合全ページの先頭に「本文へ移動」のリンクがある。
2.4.2ページタイトルAあり適合全ページの title が「ページ名|機関名」の形で、ページごとに異なる。
2.4.3フォーカス順序Aあり適合Tab の順序がヘッダー→メニュー→本文→フッターになることを確認。
2.4.4リンクの目的(コンテキスト内)Aあり適合名前のないリンクがないこと、リンクの文字で行き先が分かることを確認。
2.4.5複数の手段AAあり適合メニュー・パンくず・サイトマップ・サイト内検索の 4 つの手段で、すべてのページを探せる。
2.4.6見出し及びラベルAAあり適合見出しとフォームのラベル(サイト内検索)が内容を表していることを確認。
2.4.7フォーカスの可視化AAあり適合全ページで、フォーカスを受けた 675 か所すべてに 3px の枠が出ることを確認。
3.1.1ページの言語Aあり適合全ページの html 要素に lang(日本語 ja、English のページは en)。
3.1.2一部分の言語AAあり適合英語の機関名・English のリンク・English のページの中の日本語の部分に lang を付けた。
3.2.1フォーカス時Aあり適合フォーカスだけでページが移動しないことを確認。
3.2.2入力時Aあり適合お知らせの絞り込みはボタンを押したときだけ、検索は「検索」を押したときだけ動く。
3.2.3一貫したナビゲーションAAあり適合全ページでヘッダー・メニュー・フッターを同じ並び・同じ順序で表示する(共通の部品から作っている)。
3.2.4一貫した識別性AAあり適合同じ働きの部品(検索・「〇〇の一覧」へのリンク・お知らせの種類)を、全ページで同じ名前・見た目にしている。
3.3.1エラーの特定Aなし適用なし入力の誤りを判定する欄がない(検索は空でも送れる)。
3.3.2ラベル又は説明Aあり適合サイト内検索の入力欄に label(画面上は「検索」ボタンと placeholder)を付けた。
3.3.3エラー修正の提案AAなし適用なし入力の誤りを判定する欄がない。
3.3.4エラー回避(法的、金融、データ)AAなし適用なし法的・金融のデータを送る画面がない。
4.1.1構文解析Aあり適合全 26 ページを Nu Html Checker で検証し、エラーのあるページ 0。
4.1.2名前(name)・役割(role)及び値(value)Aあり適合メニューの開閉ボタンが aria-expanded で状態を伝える。現在地は aria-current、絞り込みのボタンは aria-pressed。