[Heading Level] Headings are not properly nested

[coseeian]

Title

[Heading Level] Headings are not properly nested

Description

To facilitate navigation and convey the overall document structure, authors must use headings in a properly nested order (for example, an <h1> should be followed by <h2>, an <h2> may be followed by another <h2> or <h3>, an <h3> by another <h3> or <h4>, and so on). Improper nesting can confuse assistive technology users and impair content discoverability.

Steps to Reproduce

1. go to a tutorial page (e.g., /tutorials/get-started/).
2. Locate each heading
3. Inspect the sequence of heading levels and observe instances where the heading level jumps by more than one (e.g., <h1> directly to <h6>), indicating improper nesting.

for example:

page 1

1. Go to /tutorials/setting-up-your-environment/
2. Locate to the following elements
   Position 1: h6 element “By Layla Quiñones, Jaleesa Trapp“

page 2

1. Go to /tutorials/get-started/.
2. Locate to the following element:

• Position 1: h4 element "Default Code" in Step 1 section

page 3

1. Go to /tutorials/variables-and-change/.
2. Locate to the following element:

• Position 1: h5 element "Variables" in Step 1 section
• Position 2: h5 element "String Interpolation" in Step 1 section
• Position 3: h5 element "Custom Variables" in Step 3 section
• Position 4: h5 element "Variable Scope" in Step 3 section
• Position 5: h5 element "Using Variables for Animation" in Step 3 section
• Position 6: h5 element "Animation and draw()" in Step 4 section
• Position 70: h5 element "frameRate(), frameCount and console.log()" in Step 4 section
• Position 81: h5 element "Error Messages" in Step 7 section

page 4

1. Go to /tutorials/organizing-code-with-functions/.
2. Locate to the following element:

• Position 1: h6 element "By Greg Benedis-Grab, Layla Quiñones"
• Position 2: h5 element "Or Try This Spicy Challenge!" in Conclusion section
• Position 3: h1 element "Next Steps"
• Position 4: h1 element "References"

page 5

1. Go to /data-structure-garden/.
2. Locate to the following element:

• Position 1: h6 element "By Portia Morrell, Jaleesa Trapp, Kate Maschmeyer"

page 6

1. Go to /tutorials/animating-with-media-objects/.
2. Locate to the following element:

• Position 1: h6 element "By Joanne Amarisa, Jaleesa Trapp, Greg Benedis-Grab"
• Position 2: h4 element "Image files" in step 1 section
• Position 3: h3 element "Conclusion"
• Position 4: h3 element "Resources & References"

Page 7

Go to route (p5js.org)
2. Try to find h1 element in the page

Actual Behavior

Those headings are not nested according to the heading-level hierarchy. For details, see the ‘Steps to Reproduce’ section above.

Expected Behavior

All headings should follow a logical, nested structure.

Environments

No response

Suggested Fix

No response

Reference

WCAG: Success Criterion 1.3.1 Info and Relationships
WCAG-T: G141: Organizing a page using headings
other:Headings and paragraphs

What is your operating system?

None

Web browser and version

No response