Header

Success Criteria:

Description Discoverable by screen reader as header or banner landmark
Role Identifies itself as a header or banner landmark
Relationships Typically contains site title and primary navigation
State n/a
Focus Can be targeted with a skip link, but isn't focusable
Action n/a

Native Element

Using the <header> element includes all the accessibility features by default.

Description

  • n/a

Role

  • The native <header> element will identify itself as a header
  • The screen reader should be able to discover the header as a landmark/group

Relationships

  • The header often contains banner and primary navigation

State

  • n/a

Focus

  • Use tabindex="-1" to make the header targetable with a skip link.
  • The header shouldn't be focusable with the tab key

Actions

  • n/a

Custom Element

Description

  • n/a

Role Requires extra work

  • If a non-semantic element must be used (like a <div>) use role="banner" to make the element discoverable.

Relationships

  • n/a

State

  • n/a

Focus

  • Use tabindex="-1" to make the header targetable with a skip link.
  • The header shouldn't be focusable with the tab key

Actions

  • n/a