Skip to main content Skip to site Map

Design Header landmark

How to design a header landmark

WCAG Disabilities

A header landmark must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

4 Robust

Name and role is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A header landmark must work for people with disabilities:

Low vision

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

Blindness

Name and role is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Usage

The <header> html landmark of your web page typically contains the site logo/website name. The <nav> can be nested inside.
People using a screen reader can skip to the <header> landmark using screen reader shortcuts.
The <header> has no keyboard functionality

Annotations for Web

Annotate as <header> or role="banner"

Related header landmark entries