1. このページの目的

本ページを使って、headingoffset 属性を利用したHTMLコードを試す。

2. メモ

• `headingoffset` と `headingreset` 属性による見出しレベルの調整のコードを拝借して、本ページで実際に表示してみる。

3. サンプルコード1

`headingoffset` と `headingreset` 属性による見出しレベルの調整に載っているコード。

<h1>This is a heading level 1</h1>
<article headingoffset="1">
 <h1>This is a heading level 2</h1>
 <section headingoffset="1">
  <h1>This is a heading level 3</h1>
  <dialog headingreset>
   <h1>This is a heading level 1</h1>
  </dialog>
 </section>
</article>
<h1 aria-level="2">This is a heading level 2</h1>

4. サンプルコード2

`headingoffset` と `headingreset` 属性による見出しレベルの調整に載っているコードを拝借させていただきました。

<div headingoffset="1">
  <h1>見出しレベル 2（要素名の 1 + headingoffset 属性値 1 = 2）</h1>
  <h2>見出しレベル 3（要素名の 2 + headingoffset 属性値 1 = 3）</h2>

  <div headinglevelstart="2">
    <h1>見出しレベル 4（要素名の 1 + headingoffset 属性値の小計 3 = 4）</h1>
    <h2>見出しレベル 5（要素名の 2 + headingoffset 属性値の小計 3 = 5）</h2>
  </div>

  <div headingreset>
    <h1>見出しレベル 1</h1>
  </div>
</div>

5. サンプルコード3

`headingoffset` と `headingreset` 属性による見出しレベルの調整に載っているコードを拝借させていただきました。一部変更しています。

<div headingoffset="10">
  <h1>見出しレベル 9（レベルは 9 より大きくはならない）</h1>
</div>

<div headingoffset="-1">
  <h1>見出しレベル 1（headingoffset に指定できるのは正の整数のみ、負の値やその他無効な値が指定された場合は 0 の扱いになる）</h1>
</div>

<div headingoffset="2">
  <h1 aria-level="3">見出しレベル 3（見出し要素の数字や headingoffset 属性値に関わらず aria-level が優先される）</h1>
</div>

<div headingoffset="2">
  <dialog id="modal-dialog">
    <h1>見出しレベル 1（showModal() されたダイアログは offset しない）</h1>
    <button id="btn2">open/close the modal</button>
  </dialog>
  <button id="btn3">open/close the modal</button>

  <script>
  const toggleModal3 = (() => {
    let flg = true;
    let dialog = document.querySelector('#modal-dialog');
    return function() {
      if (flg) {
        dialog.showModal();
      } else {
        dialog.close();
      }
      flg = !flg;
    }
  })();
  document.querySelector('#btn2').addEventListener('click', toggleModal3);
  document.querySelector('#btn3').addEventListener('click', toggleModal3);
  </script>
</div>

5. ブラウザがこの属性を実装しているか確認する方法

• その１ (Chrome)：DevTools - Elements panel - Accessibility - Computed Properties 内の Level を確認する。
• その２ (Firefox)：Developer Tools - Accessibility panel - Properties 内の attributes:level を確認する。(多分これ)
• その３：表示された文字サイズを確認する。

6. テスト結果

• Chrome 140.0.7339.128 (64 bit): 実装されていない。
• Chrome 142.0.7416.0 canary (64 bit) : 実装されていない。
• Firefox 142.0.1 (64 bit): 実装されていない。

7. 仕様

• 4.3.11.1 Heading levels & offsets | HTML Standard

8. 参考

• implement headingoffset & headingreset attributes by keithamus · Pull Request #11086 · whatwg/html · GitHub
• [css-selectors-5] add `:heading`, `:heading(An+B)` pseudo classes by keithamus · Pull Request #11836 · w3c/csswg-drafts · GitHub
• `headingoffset` と `headingreset` 属性による見出しレベルの調整