国勢調査オンラインのアクセシビリティ（2025 年版）

国勢調査は日本社会の実態を明らかにするために 5 年に一度実施される統計調査です。調査結果は、国や地方公共団体が行政運営をおこなうためや、民間企業、学術・研究機関における利用など、重要な基礎データとして幅広く活用されます。

たとえば、選挙における「一票の格差」が訴訟につながるケースがありますが、選挙区の区割りは国勢調査の結果を基準としています。また、地方交付税の算定の基準などにも利用されるため、間接的に私たちの生活にも影響を及ぼします。

回答方法はインターネット、郵送、調査員に渡すという 3 つの方法がありますが、この記事では、インターネット回答におけるウェブアクセシビリティについて取り上げます。

おもな対象画面は以下のとおりです。

• トップページ
• ログイン画面
• 回答入力画面

使用するデバイスはデスクトップパソコン（iMac）、ブラウザは Google Chrome、キーボード操作を基本としますが、部分的にスクリーンリーダー（VoiceOver）を使用します。

ウェブアクセシビリティのチェックツールは、「WAVE（Web Accessibility Evaluation Tools）」のブラウザ拡張を使用します。

なお、本記事で掲載するコードは、可読性や掲載スペースの関係上、元のソースコードから一部省略・変更しています。

それでは、トップページから見ていきます。

まずは、トップページで WAVE ブラウザ拡張を使用します。

エラーとしては、画像の代替テキストの不備や、空の <button> 要素、空の <th> 要素が指摘されています。

警告としては、文脈的には「お知らせ」は見出しだと想定されるが、<p> 要素でマークアップされている点や、「関連情報」の見出しレベルがスキップされている点が指摘されています。

画像の代替テキストについて具体的に見ていきます。

以下は、「お問い合わせ」と書かれたチャットツールの画像の HTML です。

<div id="DecTab" style="...">
  <img src="..." style="...">
</div>

このように、alt 属性が指定されていないため、スクリーンリーダーでは画像のファイル名が読み上げられてしまいます。以下は VoiceOver で読み上げたときのスクリーンショットです。

そもそも、この「お問い合わせ」のボタン（のようなもの）は、<div> 要素でマークアップされているので、フォーカスを受け取ることすらできません。

次に、エラーとしては指摘されていませんが、<h1> 見出しの HTML を確認します。

<h1 class="l_top_title_h1wrapper__h1">
  <span class="mr_10">
    <img src="..." alt="国の統計調査であること、秘密の保護に万全を期していることを証明するマーク" class="no_invert">
  </span>
  <span>
    <img src="..." alt="国勢調査オンライン" class="no_invert">
  </span>
</h1>

ロゴマークの画像に対して、マークそのものの意義を説明する代替テキストが指定されているため、見出しとしては不適切なテキストになっています。

以下は、VoiceOver で見出しを読み上げたときのスクリーンショットです。情報構造上の文脈と読み上げられる内容の間に、大きな乖離があることがわかります。

この文脈では、前者のロゴマークの画像は、空（alt=""）にするか、もしくは、ロゴに含まれている文字で alt="政府統計" とするのがよいのではないでしょうか。

このほかにも、ページ内にそのまま記載できそうな説明が、すべてモーダルウィンドウに格納されていたりと、ユーザビリティの観点からも問題があると感じました。

また、細かく見ていくと、多言語向けのアノテーション（hreflang）の指定が不適切といった点もあるのですが、ひとまず次に進みます。

ちなみに、トップページには、ここまで言及しなかった最大の問題が潜んでいるのですが、それは後ほど説明します。

続いて、ログイン画面を見ていきます。

ログイン画面で WAVE ブラウザ拡張を使用します。

エラーの内容はトップページと同じく、画像の代替テキストの不備や、空の <button> 要素、空の <th> 要素に加え、フォームラベルの不足が指摘されています。

警告としては、ページ内に <h1> 要素が存在しないことなどが指摘されています。

まず気付くのは、ログイン ID の入力フィールドにラベルが関連づけられていません。

<span class="l_login_formwrapper_ttl fw_600">ログインID（半角）</span>
<span class="m_ic_must">必須</span>
<div class="l_login_formwrapper_input_wrapper">
  <div class="w-100">
    <input class="l_login_input_loginid js_login_onclick_active_id" type="text" maxlength="4" name="loginidHead" id="loginid-head" value="">
  </div>
  <span class="l_login_border">―</span>
  <div class="w-100">
    <input class="l_login_input_loginid js_login_onclick_active_id" type="text" maxlength="4" name="loginidFoot" id="loginid-foot" value="">
  </div>
</div>

ただ、フォームラベルで関連づけられる要素は 1 つなので、この場合には、for 属性の値を前半の <input> に対して指定して、読み上げ用のラベルは aria-* 属性を使用するといった工夫が必要になります。

簡略化していますが、改善例としては以下のようなマークアップが考えられます。

<div>
  <label for="loginid-head" id="loginid-label">
    ログインID（半角）
  </label>
  <span>必須</span>
</div>
<div>
  <input
    type="text"
    id="loginid-head"
    name="loginidHead"
    value=""
    maxlength="4"
    required
    aria-label="前半の4文字"
    aria-labelledby="loginid-label loginid-head"
  >
  <input
    type="text"
    id="loginid-foot"
    name="loginidHead"
    value=""
    maxlength="4"
    required
    aria-label="後半の4文字"
    aria-labelledby="loginid-label loginid-foot"
  >
</div>

aria-labelledby 属性を使用することで、それぞれ「ログインID（半角）　前半の4文字」、「ログインID（半角）　後半の4文字」のように読み上げることを可能にしています。

画面内に「インターネット回答依頼書」のサンプル画像に、ログイン ID の位置が示されていますが、この画像の代替テキストは空なので、画像が見えない状態では、ログイン ID がどの部分に掲載されているかの手がかりが得られません¹。

<div class="l_user_guide_wrapper">
  <img class="no_invert" src="..." alt="">
  <span>インターネット回答依頼書</span>
</div>

また、下層ページにおいては、ロゴ画像の代替テキストが空です。なぜか <picture> 要素が使用されていたりと、少し不思議なマークアップです。

<div class="head_logo">
  <picture>
    <img class="no_invert va_m" alt="" src="...">
  </picture>
</div>

ログイン ID を入力しないまま「次へ進む」を選択すると、以下のエラーが表示されます。

<div id="login_errCommentArea" class="error-comment mt_10 mb_20 erract">
  <p>
    <span>入力内容に誤りがあります。</span>
    <img src="img/ic_error.svg" class="l_error_icon" alt="">
    <span>マークをご確認いただき、再度入力をお願いいたします。</span>
  </p>
</div>

エラーマークの画像の代替テキスト（alt）が空のため、スクリーンリーダーでは読み上げられません。さらに、該当箇所のエラーマークは CSS の ::before 擬似要素で実装されています。

<p id="..." class="error-message">ログインIDを入力してください。</p>

.error-message:before {
  content: "";
  display: block;
  margin-right: 3px;
  width: 1.125em;
  height: 1.125em;
  background: url("data:image/svg+xml...") 50% 50%/100% 100% no-repeat;
  position: absolute;
  top: 3px;
  left: 0;
}

このように、エラーマークとしての情報を持たず、装飾扱いの実装になってしまっています。

エラーに関連すると、aria-live 属性の指定がされておらず、「次へ進む」を選択して画面が切り替わっても、音声でエラーが通知されることはありません。また、aria-describedby 属性を使用して、エラー箇所とエラーメッセージを関連づけるといった実装もありません。

ページ下部に配置されている、「初めて回答を行う場合」などのアコーディオンが、適切にマークアップされていません。そのため、VoiceOver では「リンク」と伝えられますが、選択しても何も起こらず、開閉したことも通知されません。

<dl class="login_commentary folding m_box_gray">
  <dt>
    <a href="#" id="loginDesc1" class="pe_n">初めて回答を行う場合</a>
    <span class="icon_ac"></span>
  </dt>
  <dd>
    <!-- ... -->
  </dd>
</dl>

ログイン ID を正しく入力して、「次へ進む」を選択すると、アクセスキーの入力画面にスライドインのアニメーションとともに切り替わりますが、フォーカスは、前のページの「次へ進む」ボタンに残ったままです。

また、スクリーンリーダーを使用している場合、画面が切り替わったことが通知されません。

このように、ログインの関門をくぐり抜けるだけでも、数多くの難関が待ち受けています。

いよいよ、回答入力画面です。全 16 項目が用意されていますが、ステップの進み方や項目は入力した内容に応じて変化します。

ここでの WAVE ブラウザ拡張の使用は、「1. 世帯の種類」のみを対象とします。

前 2 つの画面よりも、エラーと警告の数が大幅に増えました。また、非アクティブな状態を表す要素があるためか、コントラスト不足のエラー（13 点）も指摘されています。

エラーの内容は、画像の代替テキストの不備や、空の <button> 要素、空の <th> 要素に加え、フォームラベルの不足や、空の <label> 要素などが指摘されています。

警告としては、<h1> 要素の欠如や、孤立している <label> 要素などのフォーム関連の不備、JavaScript のイベントハンドラの指定について指摘がされています。

「1. 世帯の種類」の質問のラジオボタンは独特な仕組みになっており、「一般世帯」と「その他」以外の項目を選択すると、モーダルダイアログが表示されます。

そのため、キーボード操作でラジオボタンの選択肢を下方向に移動すると、強制的にモーダル状態になるため、使い勝手に難があります。

ここで疑問に思うのは、なぜ、学生寮や寄宿舎、病院、療養所、社会施設からだと、このままインターネット回答を進めることができないのかですが、ここでは、「調査書類を配布した調査員又はお住まいの市区町村へご連絡ください」とだけあり、合理的な説明は見当たりません。

項目の補足説明を表示するための「？（ヘルプ）」アイコンの画像には、 alt 属性自体が指定されていません。しかし、親要素である <a> 要素に対して、なぜか alt 属性が指定されています。

<div class="radio_in">
  <label for="workType0_3">
    <span>
      パート・アルバイト・その他
      <a href="#" class="tips" data-tippy-content="契約社員・嘱託なども含めます。" alt="契約社員・嘱託なども含めます。">
        <img class="question_btn" src="img/style/icon_help.svg">
      </a>
    </span>
  </label>
</div>

リンクにフォーカスすると、VoiceOver では「ラベルのない画像」とだけ読み上げられます。当然ながら、<a> 要素に指定された alt 属性の内容は読み上げられません。

リンクを選択すると、ヘルプコンテンツのポップオーバーが表示されますが、リンクとの関連づけがされていないので、読み上げられることはありません。ちなみに、このヘルプコンテンツは <body> 要素内の末尾に挿入されるため、たどり着くのは困難です。

回答入力画面を進めていくと、以下のように、ラベルが入力フィールドと関連づけられていない箇所が見受けられました。

<dl class="mb_20">
  <dt>建物全体の階数</dt>
  <dd>
    <input maxlength="2" id="jutakuKaisu1" class="" name="jutakuKaisu1" value="">
    <label>階建</label>
  </dd>
</dl>

<label id="countryNameLabel0">国名</label>
<p id="itemList0_countryName_errMsgArea" class="error-message"></p>
<input type="text" name="itemList[0].countryName" id="itemList0_countryName" class="l_input_text" maxlength="32" value="">

回答入力画面内で遷移した時にフォーカスが正しく制御されていません。

たとえば、「入力内容の一覧」のボタンを開くとモーダルウィンドウが開きますが、閉じると元の場所ではなくドキュメントの先頭に戻されてしまいます。

また、「前に戻る」「次へ進む」や、ステップナビゲーションを選択したときに、フォーカス位置が移動せずにそのままになることがあります。

ビューポートのサイズが十分確保されていない状態では、「お問い合わせ」と書かれたチャットツールがスクロールに追従するため、他の要素と重なり、情報の取得や操作に支障をきたします。

特に、スマートフォンのような小さなスクリーンサイズでは、選択肢と重なることがあるため、ラベルの一部が隠れてしまったり、選択しづらいという問題が発生します。

こちらは良い点ですが、入力フィールドが <fieldset> 要素で囲われているため、正しくグループ化されています。ここでは、<label> 要素も正しく使われているようです。

<fieldset>
  <legend class="name">世帯の種類</legend>
  <!-- ... -->
  <input name="setaiShurui" id="setaiShurui11" type="radio" checked="checked" value="GENERAL">
  <div class="radio_in">
    <label for="setaiShurui11">
      一般世帯（一人世帯、会社等の独身寮の入居者を含む）
    </label>
  </div>
  <!-- ... -->
</fieldset>

このように、適切にマークアップされている箇所もあるのですが、全体をとおしての一貫性のなさが、コード品質の低下を招いているようにも感じます。

回答の最後のステップである「15. 勤め先・業主などの名称及び事業の内容」および「16. 本人の仕事の内容」では、「事業と仕事の具体例」を参考に、入力する必要があります。

このページでは、事業形態ごとにリンクが列挙されていますが、リンクはアコーディオン形式です。アコーディオンを開くと、紙の記入案内に記載されている、「事業と仕事の書き方の例」のイラストが貼られているだけ、ということがわかります。

そして、この画像に代替テキストは指定されていないため、スクリーンリーダーからは情報を取得できません。

<dl class="folding work_body">
  <dt class="open"><a href="#">会社の支社・支店・営業所など</a></dt>
  <dd style="display: block;">
    <img class="no_invert" alt="" src="img/guide/ja/jobInputEx4.gif">
  </dd>
  <!-- ... -->
</dl>

また、たとえ視覚に障害がないとしても、スマートフォンなどのスクリーンサイズの小さいデバイスで閲覧している場合には、情報の取得が困難です。

そのため、ピンチアウトしてズームしたり、横持ち（landscape）に切り替えたりといった工夫が必要ですが、具体例の確認と入力を交互に切り替えて操作するのは、わずらわしく感じるでしょう。

たしかに、これだけ複雑な情報をすべて alt 属性に指定するのも適切ではないですし、小さいスクリーンで表現するのも難しいのかもしれません。多言語化という課題もあります。

しかし、最後のステップで入力を断念させないためにも、ウェブに最適化されたコンテンツを用意するように努めるべきではないでしょうか。

ここまで、さまざまなアクセシビリティ上の具体的な問題を確認しましたが、何よりも問題なのが、国勢調査オンライン トップページの「関連情報」にある「目の不自由な方へ」の項目でしょう。

このリンクを選択すると、モーダルダイアログが表示され、以下の説明が表示されます。

ウェブが築き上げてきた大切な理念や最大の強みを、放棄するかのようなメッセージです。

なお、この「目の不自由な方へ」の項目は、「回答をはじめる」のボタンよりも後方に位置しているため、スクリーンリーダーで操作している場合、その存在に気づかずに回答を進めてしまう可能性があります²。

ちなみに、国勢調査の封筒には半円の切り欠き加工³が入っており、その少し上に「目の不自由な方のための音声コード」（二次元コード）があります。

こちらのコードを、Uni-Voice アプリを使用して読み取ると、以下の内容が読み上げられます。

ここでも同様に、インターネット回答の選択肢は示されず、自治体への連絡を案内されます⁴。

ただ、よく読むと「ご希望の場合は」とあるので、視覚障害者がインターネット回答を進めることが可能なのか、それとも自治体に問い合わせる必要があるのか、結局どのような選択肢が用意されているかが明らかではありません。

ウェブアクセシビリティ推進協会（JWAC）の記事によると、前回（2020 年実施）は、一般向けのサイトと視覚障害者向けのサイトで分けられていたようです。おそらく、前述の「音声対応電子調査票」がそれに該当するので、今回も同じように分けられていると考えられます。

閲覧環境ごとにサイトをつくるというアプローチは、iPhone 登場当時（日本では 2008 年）のウェブ業界を彷彿とさせますが、対応できないからサイトを分けるという考え方そのものがウェブの精神に反するといえるでしょう。

アクセシビリティはウェブの本質であるということを、改めて問い直したいと感じました。

この記事では、国勢調査オンラインのアクセシビリティについて説明しました。網羅的に調査したわけではありませんが、総じてアクセシビリティに重大な欠陥があると感じました⁵⁶。

それでも、「過去の調査に比べれば、少しずつアクセシビリティは向上している」という意見があるかもしれません。たしかに、インターネット回答が存在しなかった時代と比較すれば、利便性は格段に向上しているでしょう。

しかし、国勢調査のサイトが最低限のアクセシビリティを確保していれば、視覚に障害を持っていたとしても⁷、わざわざ自治体に問い合わせるという余計な手間をかけることなく、自分の好きな時間に、自由に回答できるはずです。

障害者差別解消法が民間企業にも適用され、人びとの間でもアクセシビリティへの理解が浸透していくなか、さまざまな利用シーンを想定して環境を整備することは、民間に見本を示すという意味においても、行政機関としての当然の責務ではないでしょうか。

なにしろ、国勢調査は「回答する義務が定められている国の最も重要な統計調査」なのですから。

本記事の作成にあたり、以下のウェブページを参考にしました。

• 国勢調査のアクセシビリティ | ウェブアクセシビリティ推進協会（JWAC） （外部リンクを開く）