Title

[Heading] Incorrect heading order on /people page

Description

On the /people page, the heading order is semantically incorrect. The page contains an <h3> element that appears without a preceding <h2> element, breaking the logical document outline.

This creates a barrier for assistive technologies. For example, when a screen reader user navigates by headings to get an outline of the page, the jump from an <h1> directly to an <h3> is disorienting. It breaks the logical flow and makes it difficult to understand the content's hierarchy.

Steps to Reproduce

Developer Tools Method

If you use Google Chrome:

1. Go to the /people page.
2. Open the browser's Developer Tools. Run a Lighthouse report.
3. Observe the "Accessibility" section of report, there is a "Heading elements are not in a sequentially-descending order" error. The tool will highlight the problematic element h3.mb-xl.max-w-[770px].

Wave Browser Extenstion Method

If you have Wave Browser Extension installed in browser:

1. Go to the /people page.
2. Run a WAVE report via the extension.
3. Notice in the "Structure" section of the report, it flags a <h3> element with "Skipped heading level" warning.

Screen Reader Method

1. Go to the /people page.
2. Using a screen reader (I use VoiceOver on iOS) and navigate by headings.
3. Observe that the screen reader jumps from the <h1> directly to an <h3>, without <h2> in between.

Actual Behavior

The <h3> heading follows an <h1> without an <h2> in between.

Expected Behavior

Depends on the semantic purpose of the <h3> content:

1. If it's a heading: It should be an <h2> to maintain the proper <h1> > <h2> order.
2. If it's styled text (not a heading): It should use a <p> or <div> tag instead.

Environments

No response

Suggested Fix

I think we should go for option 2 mentioned in above "Expected Behavior" section: the <h3> should be refactored into a <p> or <div> and styled with CSS.

My reasoning for this is:

• Content: The element contains a long content (more than 50 words, starting with "p5.js was created by Lauren Lee McCarthy in 2013..."). This seems to be a paragraph, not a heading.
• Structure: The <h3> is immediately followed by an <h2>. This means there is no content that "falls under" this heading, which defeats its structural purpose.

Reference

WCAG

• 1.3.1 - Info and Relationships
• 2.4.6 - Headings and Labels

Techniques for WCAG

• H42: Using h1-h6 to identify headings
• F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
• G130: Providing descriptive headings

Others

• Heading levels should only increase by one - Deque University
• h1–h6: The HTML Section Heading elements - MDN

What is your operating system?

None

Web browser and version

No response