サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

しおり（ブックマーク）・目次・見出しのアクセシビリティ完全ガイド：長文・資料・PDF/HTMLで「探せる・飛べる・迷わない」構造を作る（WCAG 2.1 AA）

greeden
woman wearing blue jacket sitting on chair near table reading books

Photo by George Dolgikh on Pexels.com

しおり（ブックマーク）・目次・見出しのアクセシビリティ完全ガイド：長文・資料・PDF/HTMLで「探せる・飛べる・迷わない」構造を作る（WCAG 2.1 AA）

概要サマリー（先に要点）

  • 長文や資料は、内容が良くても「探せない」と読めませんの。アクセシビリティの鍵は “構造で迷子を作らない” ことです。
  • HTMLでは 見出し階層（h1→h2→h3）＋ページ内目次（ToC）＋スキップリンク＋ランドマーク、PDFでは タグ付き構造＋しおり（ブックマーク）＋読み順 が基本セット。
  • 目次リンクは飛ぶだけでなく、到達後にフォーカスが当たるようにすると、キーボード利用者が位置を失いません。
  • 章立ての命名は「内容が分かる名詞句」で統一し、同じ単語を乱用しない（“概要”“詳細”“その他”の増殖は危険）。
  • 本記事には、HTML/Markdownの書き方、ToC実装例、PDFのしおり作成指針、編集運用のチェックリストを収録しました。

対象読者（具体）：編集者・ライター、ドキュメント担当、自治体/公共機関の資料担当、教育コンテンツ制作者、フロントエンドエンジニア、UI/UXデザイナー、QA/レビュー担当
アクセシビリティレベル：WCAG 2.1 AA 準拠を目標（関連：1.3.1、2.4.1、2.4.2、2.4.6、2.4.10、2.4.7 ほか）

1. はじめに：長文が読まれない理由は「難しい」より「探せない」

文章が長いだけで、読む人は疲れます。ましてスマホ、通勤中、仕事の合間、体調がすぐれない時……私たちは「全部読む」より先に「欲しい場所に飛ぶ」ことを求めますよね。
スクリーンリーダー利用者は特に、見出し一覧やランドマーク一覧でページを探索します。見出しがなければ、延々と読み上げを聞き続けるしかありません。キーボード利用者は、目次で目的の章へ行けなければ、スクロールとTab移動を繰り返すことになります。
つまり、長文のアクセシビリティは “文章の良さ” だけでは成立しません。構造（見出し・目次・しおり）が、読者の自由をつくるのですわ。この記事では、HTMLとPDFの両方で「探せる・飛べる・迷わない」構造づくりを実務的に解説しますね。

2. HTMLの基本セット：見出し階層＋目次＋スキップ＋ランドマーク

2.1 見出し階層は“地図の縮尺”

  • h1：ページの主題（1つ）
  • h2：章
  • h3：節
  • h4：小見出し（必要なら）

見出しは大きさではなく “意味” で選びます。デザインはCSSで調整できるので、HTMLの見出しは論理で決めましょう。

例（自然な階層）

<h1>しおりと目次のアクセシビリティ</h1>

<h2>HTMLの設計</h2>
<h3>見出し階層</h3>
<h3>ページ内目次</h3>

<h2>PDFの設計</h2>
<h3>タグ付きPDF</h3>
<h3>しおり（ブックマーク）</h3>

2.2 ページ内目次（ToC）：最初に“行き先”を渡す

目次は、長文の“読者の不安”を減らします。冒頭に短い要点と目次があると、読むペースが安定しますの。

<nav aria-label="ページ内目次">
  <ol>
    <li><a href="#sec-html">HTMLの設計</a></li>
    <li><a href="#sec-pdf">PDFの設計</a></li>
    <li><a href="#sec-check">チェックリスト</a></li>
  </ol>
</nav>

<h2 id="sec-html" tabindex="-1">HTMLの設計</h2>

ポイント：

  • nav aria-label で目次だと明示
  • 移動先見出しに id
  • tabindex="-1" を付けると、リンクで飛んだ後にフォーカスを当てやすくなり、キーボード利用者が位置を失いません。

2.3 スキップリンク：目次まで一気に移動させる

長いヘッダーがあるサイトでは「本文へスキップ」に加えて、「目次へスキップ」もあると親切ですわ。

<a class="skip" href="#toc">目次へスキップ</a>
<nav id="toc" aria-label="ページ内目次">…</nav>

2.4 ランドマーク：見出しの“外側の地図”

header/nav/main/footer が整うと、スクリーンリーダーのランドマーク移動が成立し、長文でも迷子が減ります。

3. 目次リンクのアクセシビリティ：飛ぶだけでなく「着地」を整える

3.1 固定ヘッダーで見出しが隠れる問題

ページ内リンクで飛ぶと、固定ヘッダーに見出しが隠れることがあります。これは“到達したのに見えない”状態で、認知的にかなり不安ですの。

:target { scroll-margin-top: 6rem; }

3.2 フォーカスの着地を作る（推奨）

JSで見出しにフォーカスを当てると、読み上げも位置把握も安定します。

document.addEventListener('click', (e)=>{
  const a = e.target.closest('a[href^="#"]');
  if(!a) return;
  const id = a.getAttribute('href').slice(1);
  const target = document.getElementById(id);
  if(target){
    target.setAttribute('tabindex','-1');
    target.focus({preventScroll:true});
  }
});

※既に tabindex="-1" を付けているなら、追加は不要です。

4. 章立ての命名：タイトルは“検索と読み上げ”に効く

見出しの言葉選びは、スクリーンリーダーの見出し一覧や検索にも影響します。おすすめのルールは次の通りです。

4.1 見出しは「内容が分かる名詞句」で

  • 良い：「エラーの直し方」「フォームの入力補助」「タグ付きPDFの作り方」
  • 悪い：「概要」「詳細」「その他」「ポイント」

抽象語が増えるほど、目次が役に立たなくなりますの。

4.2 同じ言葉を乱用しない

「設定」「設定」「設定…」と続くと、見出し一覧で識別ができません。

  • 「通知設定」
  • 「プライバシー設定」
  • 「表示設定」
    のように、目的語を付けます。

5. Markdown運用：見出しと目次の“編集ルール”を決める

CMSやGitで記事を書く場合、Markdownは便利ですが、運用ルールがないと見出しが崩れやすいです。

5.1 Markdownの見出し運用ルール（おすすめ）

  • # は1つだけ（h1）
  • ## が章（h2）
  • ### が節（h3）
  • 目次は ## の直後に置く（長文ほど重要）

5.2 目次の自動生成に頼りすぎない

自動ToCは便利ですが、

  • 見出しが長すぎる
  • 同じ見出しが多い
    と可読性が落ちます。
    重要セクションだけ手動で目次に載せる運用も効果的ですわ。

6. PDFのしおり（ブックマーク）：タグ付き構造とセットで完成する

PDFのしおりは、HTMLの目次と同じ役割を持ちます。ただし、PDFでは「しおりだけ」では不十分で、**タグ付きPDF（構造化）**がセットです。

6.1 しおりがあると何が良い？

  • 章へ一瞬で移動できる
  • 読み上げ利用者が構造を把握しやすい
  • 長文の閲覧が“探す→読む”の流れで可能になる

6.2 良いしおりの条件

  • 見出し構造と一致
  • 階層が深すぎない（2〜3階層が目安）
  • ラベルが短く具体的（「第1章」だけではなく内容語を含める）
  • ページ番号ではなく、内容で命名

6.3 タグなしPDFにしおりだけ付けても限界がある

しおりは移動手段ですが、本文がタグなしだと読み上げ順や段落構造が崩れます。
PDFのアクセシビリティは、タグ（構造）→読み順→しおりの順に整えるのが王道ですわ。

7. 表・図表の“飛び先”を作る：長文の中で迷子を作らない工夫

長文記事では、図表やサンプルコードの場所が散らばることが多いです。
おすすめは、目次とは別に「このページでよく参照するもの」をまとめること。

例：

  • サンプルコード一覧
  • 図表一覧
  • チェックリストへのショートカット

こうした“索引”は、認知特性のある方にも非常に効きますの。

8. よくある落とし穴と修正策

落とし穴 何が起きる？ 修正策
見出しが太字のdiv 見出し一覧が使えない h2/h3で構造化
h1が複数 主題が不明 h1は1つに
目次が自動生成で冗長 探しにくい 重要章だけ手動目次
固定ヘッダーで見出しが隠れる 到達が分からない scroll-margin-top
目次リンクで飛ぶがフォーカスが移らない 位置喪失 tabindex=-1＋focus
PDFにしおりなし 探せない 見出し→しおり作成
PDFがタグなし 読めない タグ付け＋読み順

9. 5分スモークテスト：目次・しおり・見出しの最小確認

HTML（記事/ページ）

  1. h1が1つで、h2→h3の順が自然
  2. 目次があり、キーボードでリンクを辿れる
  3. 目次リンクで移動後、見出しが隠れず読める（scroll-margin）
  4. 移動先で位置が分かる（フォーカスや視覚的強調）
  5. 見出し文言が具体的で、一覧で意味が分かる
  6. スキップリンクで本文/目次に入れる（該当する場合）

PDF（資料）

  1. テキスト選択できる（スキャンだけではない）
  2. タグ付き（構造）で見出しがある
  3. しおりで章へ移動できる
  4. 読み順が自然（2段組の破綻なし）
  5. 表・図表に代替情報がある（必要に応じて）

10. 対象読者にとっての価値（具体）

  • スクリーンリーダー利用者：見出し一覧・しおりで目的地へ一瞬で移動でき、読む負担が激減します。
  • キーボード利用者：目次リンク＋フォーカス着地で位置を失わず、迷いが減ります。
  • 認知特性のある方：章立てと索引があると、全体像を掴みやすく安心して読めます。
  • 高齢者・拡大利用者：拡大しても“どこを読んでいるか”が分かり、必要箇所に戻りやすいです。
  • 編集・運用チーム：見出し運用ルールがあると、記事が増えても品質が揺れにくく、SEOや内部検索にも強くなります。

11. アクセシビリティレベルの評価（本記事の到達点）

  • WCAG 2.1 AA の主要関連項目
    • 1.3.1 情報及び関係性：見出し・リスト・ランドマークによる構造化
    • 2.4.1 ブロックの回避：スキップリンク、目次による短縮導線
    • 2.4.2 ページタイトル：文書の識別
    • 2.4.6 見出し及びラベル：見出しの具体化と一貫性
    • 2.4.10 セクション見出し（AAA）：AAでも実務で重要な考え方
    • 2.4.7 フォーカス可視：目次ジャンプ後の位置把握
  • PDF側は、タグ付き構造としおりで、Webコンテンツとしてのアクセシビリティ品質を大きく底上げできます。

12. まとめ：構造は、読む人の自由をつくる

  1. 長文は“探せる”構造がなければ読めない。見出しと目次はアクセシビリティの中心。
  2. HTMLは h1→h2→h3 を守り、ToCとスキップリンクで最短導線を作る。
  3. 目次リンクは飛ぶだけでなく、到達後の“着地”（scroll-margin/フォーカス）まで整える。
  4. 見出しの命名は具体的に。抽象語の増殖は目次を殺してしまう。
  5. PDFはタグ付き構造＋読み順＋しおりが基本セット。
  6. 5分スモークテストを編集フローに入れ、更新で迷子が増えないようにする。

しおりや目次は、静かな存在ですが、読む人にとっては大きな助けですわ。
あなたのコンテンツが、必要な人に必要な場所として届くように、構造という“見えないやさしさ”を一緒に整えていきましょうね。

モバイルバージョンを終了