diff --git a/source b/source index adcc7c8fa49..f2e94c2e0a4 100644 --- a/source +++ b/source @@ -4317,6 +4317,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • aria-describedby
  • aria-disabled
  • aria-label
    • +
  • aria-level

    • Finally, the following terms are defined in ARIA: ARIA

    @@ -11964,6 +11965,10 @@ interface HTMLElement : Element { undefined hidePopover(); boolean togglePopover(optional (TogglePopoverOptions or boolean) options = {}); [CEReactions] attribute DOMString? popover; + + // The headingoffset API + [CEReactions] attribute unsigned long headingOffset; + [CEReactions] attribute boolean headingReset; }; dictionary ShowPopoverOptions { @@ -13229,6 +13234,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  • draggable
  • enterkeyhint
  • hidden
    • +
  • headingoffset
    • +
  • headingreset
  • inert
  • inputmode
  • is
    • @@ -19387,8 +19394,9 @@ interface HTMLHeadingElement : HTMLElement {

    Headings and outlines

    -

    h1–h6 elements have a heading level, which is given - by the number in the element's name.

    +

    h1–h6 elements have a heading level, which is + given by getting the element's computed + heading level.

    These elements represent headings. The lower a HTMLHeadingElement : HTMLElement { +

    Heading levels & offsets
    + +

    The headingoffset + content attribute allows authors to offset heading levels for descendants.

    + +

    The headingreset + content attribute allows authors to prevent a heading offset computation from traversing beyond + this point.

    + +

    The headingOffset IDL attribute must reflect the + headingoffset content attribute. It is + clamped to the range [0, 9].

    + +

    The headingReset IDL attribute must reflect the + headingreset content attribute.

    + +

    To get an element's computed heading level, given an element element, + perform the following steps:

    + +
      +

    1. Let level be 0.

      2. + +

    2. Let max be 0.

      3. + +

    3. If element's local name is h1, then set + level to 1 and max to 8.

      4. + +

    4. If element's local name is h2, then set + level to 2 and max to 7.

      5. + +

    5. If element's local name is h3, then set + level to 3 and max to 6.

      6. + +

    6. If element's local name is h4, then set + level to 4 and max to 5.

      7. + +

    7. If element's local name is h5, then set + level to 5 and max to 4.

      8. + +

    8. If element's local name is h6, then set + level to 6 and max to 3.

      9. + +

    9. Assert: level is not zero.

      10. + +

    10. Assert: max is not zero.

      11. + +

    11. Increment level by the result of getting an element's computed heading + offset given element and max.

      12. + +

    12. Assert: level is not greather than 9.

      13. + +

    13. Return level.

      14. +
    + +

    To get an element's computed heading offset, given an element element, + and a non-negative integer max, perform the following steps. They return a + non-negative integer.

    + +
      +

    1. Let offset be 0.

      2. + +

    2. Let ancestor be element.

      3. + +
    3. +

      While ancestor is not null:

      + +
        +

      1. Let nextOffset be 0.

        2. + +
      2. +

        If ancestor has a headingoffset + attribute, then parse its value using the rules for parsing non-negative + integers.

        + +

        If the result of parsing the value is not an error, then set nextOffset to + that value.

        +
        3. + +

      3. Increment offset by nextOffset

        4. + +

      4. If offset is greater than or equal to max, then return + max.

        5. + +

      5. If ancestor has a headingreset + attribute, then return offset.

        6. + +

      6. Set ancestor to the parent node of ancestor within the + flat tree.

        7. +
      +
      4. + +

    4. Return offset.

      5. +
    + +

    The use of the aria-level attribute will + take precedence over the headings computed level for the purposes of accessibility mapping.

    + +
    +

    This example shows a combination of headingoffset, + headingreset, and aria-level attributes with comments demonstrating the respective + heading levels. This example illustrates the various combinations and is not a best practice + example.

    + + 
    <body>
+  <main>
+   <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>
+  </main>
+</body>
    +
    Sample outlines