Steps to reproduce
Steps:
- Open this link to live page: https://mui.com/#main-content
- Inspect the "Products" category label located directly above the primary section headline ("Every component you need is ready for production").
- Inspect the primary section headline directly below it.
- Observe that both elements are coded as native
<h2> tags placed sequentially within the same container.
Current behavior
While "Products" is styled visually as a small category label (using MuiTypography-body2), assistive technologies like NVDA announce two consecutive, identical heading level 2 elements. This creates a mismatch between the visual presentation and the programmatic heading structure.
The category/eyebrow text "Products" and the primary section title "Every component you need is ready for production" are both coded as native <h2> elements in the DOM:
<h2 class="MuiTypography-root MuiTypography-body2 css-iqkanv">Products</h2>
<h2 class="MuiTypography-root MuiTypography-h2 css-wy5rtm">
Every component you need is <span class="css-1w0syai">ready for production</span>
</h2>
Expected behavior
The programmatic DOM structure should accurately reflect the visual hierarchy:
- Option A (Eyebrow Label): If "Products" functions purely as a category/eyebrow label rather than a structural heading, render it using a non-heading element (e.g.,
<span class="MuiTypography-body2">Products</span>), leaving "Every component you need is ready for production" as the sole <h2> for that section.
- Option B (Nested Hierarchy): If "Products" is intended to serve as the main section heading (
<h2>), the sub-headline "Every component you need..." should be marked as an <h3> to represent its nested visual relationship.
Context
WCAG Success Criteria Violated:
- 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed visually through presentation are not programmatically determinable.
User Impact:
Screen reader users navigating by headings encounter duplicate, same-level headings for a single visual section, which distorts document outline navigation.
Testing Methodology:
DHS Trusted Tester ICT Baseline / Manual DOM & Screen Reader Audit (NVDA).
Your environment
Environment details
N/A - Auditing live site (https://mui.com/#main-content)
Browser: Chrome Version 151.0.7922.109 (Official Build) (64-bit)
OS: Windows 11
Input / Tools: DevTools Inspector, NVDA Screen Reader, ANDI
**Search keywords**: eyebrow heading, section heading hierarchy, WCAG 1.3.1, Products h2, consecutive h2, website accessibility, NVDA heading structure
Steps to reproduce
Steps:
<h2>tags placed sequentially within the same container.Current behavior
While "Products" is styled visually as a small category label (using
MuiTypography-body2), assistive technologies like NVDA announce two consecutive, identicalheading level 2elements. This creates a mismatch between the visual presentation and the programmatic heading structure.The category/eyebrow text "Products" and the primary section title "Every component you need is ready for production" are both coded as native
<h2>elements in the DOM:Expected behavior
The programmatic DOM structure should accurately reflect the visual hierarchy:
<span class="MuiTypography-body2">Products</span>), leaving "Every component you need is ready for production" as the sole<h2>for that section.<h2>), the sub-headline "Every component you need..." should be marked as an<h3>to represent its nested visual relationship.Context
WCAG Success Criteria Violated:
User Impact:
Screen reader users navigating by headings encounter duplicate, same-level headings for a single visual section, which distorts document outline navigation.
Testing Methodology:
DHS Trusted Tester ICT Baseline / Manual DOM & Screen Reader Audit (NVDA).
Your environment
Environment details