デジタル庁デザインシステム「箇条書きリスト」— AIが生成するHTMLで見落とされるアクセシビリティ

概要

デジタル庁が公開する DADS（Digital Agency Design System） のアクセシビリティガイドラインに、箇条書きリストの正しい実装指針が追加された。特に注目すべきなのは、「AIが生成するHTML」が犯しやすい具体的な誤りを正確に示している点だ。

コーディングエージェントや GitHub Copilot を使ったコード生成が一般化した今、アクセシビリティの失敗パターンを明示した公的ガイドラインとして参照価値が高い。

3つの重要ガイドライン

1. テキストで箇条書きを再現しない

<!-- NG：テキスト + 記号で擬似的に箇条書きを表現 -->
<p>・項目A<br>・項目B<br>・項目C</p>

<!-- OK：リスト要素を使う -->
<ul>
  <li>項目A</li>
  <li>項目B</li>
  <li>項目C</li>
</ul>

スクリーンリーダーは <ul>/<ol> を認識すると「リスト、3項目」のように読み上げ、項目間のジャンプナビゲーションも提供する。テキスト擬似リストではこれが一切機能しない。

2. 順番に意味がない箇条書きには <ul> を使う

<!-- NG：順序リストを装飾目的で使用 -->
<ol>
  <li>必要書類A</li>
  <li>必要書類B</li>
</ol>

<!-- OK：順序なしリスト + 項番をテキストで直接記載 -->
<ul>
  <li>１．必要書類A</li>
  <li>２．必要書類B</li>
</ul>

<ol> の項番は 装飾として扱われる ため、コピー＆ペースト時に番号が欠落する、項目を挿入・削除すると自動番号が変わって公文書として問題になる、といった課題が生じる。

DADSは「順番に意味がある場合のみ <ol> を使う」と明示している。

3. 入れ子は視覚的インデントでなくHTML構造で表現する

<!-- NG：視覚的に字下げしただけ -->
<ul>
  <li>大項目A</li>
  <p style="margin-left: 2em">・小項目A-1</p>
</ul>

<!-- OK：li の中に子リストを配置 -->
<ul>
  <li>大項目A
    <ul>
      <li>小項目A-1</li>
    </ul>
  </li>
</ul>

スクリーンリーダーはHTML構造から階層を判断する。視覚的インデントだけでは「リスト内のリスト」と認識できず、ナビゲーションが正しく機能しない。

AI生成コードとの関連

LLMや GitHub Copilot が生成するHTMLには、上記の失敗パターンが混入しやすい。特に以下のケースで注意が必要だ。

• Markdownをそのまま変換したHTMLで ・ や * 文字が残る
• 見た目を優先した CSS スタイリングで <ol> が乱用される
• ネスト構造を margin-left だけで実現している

コーディングエージェントを使う際は、生成後にアクセシビリティチェックを行うか、プロンプトに「WAI-ARIAとセマンティクスを厳守すること」を明示するのが有効だ。

使いどころ

• AIエージェントで生成したフロントエンドコードのレビュー基準として
• チームのHTMLコーディング規約に政府公式ガイドラインとして引用
• アクセシビリティ監査の際の判断基準として

参考リンク

• DADS 箇条書きリスト アクセシビリティ
• デジタル庁デザインシステム トップ