件名:公式ウェブサイトのデザイン(架空の公的機関)
本書は株式会社行間が自主的に制作した制作例に添える文書です。受託業務の納品物ではありません。
| 規格 | 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 項目中) |
試験は自己試験です(第三者の試験ではありません)。全ページを対象にしました(抽出ではありません)。音声読み上げソフトでの確認は行っていません。
| 対象 | 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 で閉じてボタンに戻る ○ |
「適用」は、対象のページにその達成基準が関係するコンテンツがあるか。「適用なし」は、関係するコンテンツがないため満たしているものとして扱う項目です。
| 番号 | 達成基準 | レベル | 適用 | 結果 | 確認の方法と根拠 |
|---|---|---|---|---|---|
| 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.1 | 3回の閃光、又は閾値以下 | 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。 |