Header

A banner landmark (the role='banner' is integrated into the <mic-header> component)identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.

When to use

Be careful, this component has a 'banner' role, unique to the site, and must not be confused with any other content that can be tagged in HTML5 with the <header> element. This header[role="banner"] component is therefore reserved for the main header and must be unique in the page (see example 'single'). However, there can be several header tags (see example 'multiple').

See the technical definition provided by WAI-ARIA: Banner (role):

A region that contains mostly site-oriented content, rather than page-specific content. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and a site-specific search tool. A banner usually appears at the top of the page and typically spans the full width. User agents SHOULD treat elements with the role of banner as navigational landmarks. Within any document or application, the author SHOULD mark no more than one element with the banner role.

Note

Because document and application elements can be nested in the DOM, they may have multiple banner elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

This <mic-header> component contains a navigation with the bypass links to the main navigation, main content and footer. At the same time, check that your page contains the following components:

• mic-main-content which has the <main role="main"> tag,

• footer which has the <footer role="contentinfo"> tag,

• a main navigation with the <nav role="navigation" aria-label="Main navigation"> tag.