Heading

Role and semantics

Heading renders a real <h1>-<h6> element with level; the heading role and level come from the element. level is required because heading order is part of the page structure (WCAG 1.3.1, 2.4.6).

Keyboard

Key	Behaviour
Tab	Heading does not take focus; Tab skips it.

Screen reader heading navigation keys (for example H) work with the native <h1>-<h6> elements.

Focus

None. Heading is not in the focus order and shows no focus ring. If you must move focus to a heading (for example on a page change), give it programmatic focus with tabIndex={-1}.

Screen reader output

Example	Announced
<Heading level={1}>Heading sample</Heading>	“Heading sample, heading level 1”
<Heading level={2} size="sm">…</Heading>	Level 2; size is not announced

Heading order rules: one h1 per page; do not skip a level inside a section (no h4 after h2); adjust looks with size, not with the level. The component does not check the order; the product team builds the structure.

Contrast

The heading colour is the text-default token. packages/tokens/test/contrast.test.mjs checks it on surface-default, surface-layer-2 and surface-sunken for at least 4.5:1 in every brand and mode. Other backgrounds are not measured.

WCAG 2.2

Criterion	How Heading meets it	What the product team does
1.3.1 Info and relationships	Renders a real heading element; level is required.	Build the order without skipping; use one h1.
2.4.6 Headings and labels	The heading text is given as children and is never truncated.	Write the heading so it describes the content.
2.4.10 Section headings	Used directly to separate sections with headings.	Give each section a heading on long pages.
1.4.3 Contrast (minimum)	text-default at least 4.5:1; the token test verifies it.	Measure contrast on backgrounds outside the test.
1.4.4 Resize text	The line wraps; the text grows with zoom.	Do not clip the heading in a fixed-height box.