Skip to content

Latest commit

 

History

History
47 lines (38 loc) · 1.23 KB

navbar.md

File metadata and controls

47 lines (38 loc) · 1.23 KB
Raw

Navbar

Using a <header>

We can use the <header> element as long as it is NOT a descendant of <aside>, <article>, <main>, <nav>, or <section>.

<body>
  <header>
    <a href="#main" class="skiptocontent">Skip To main content</a>
    <img src="images/logo.png" alt="Website Logo" />
    <h1>Name of the site</h1>
    <nav aria-label="Main menu">…</nav>
  </header>
  …
<body>

Using role="banner"

If it's not possible to use a <header> element because it's a descendant of <aside>, <article>, <main>, <nav>, or <section>, we can use ARIA roles.

The banner role is for defining a global site header, which usually includes a logo, company name, search feature, and possibly the global navigation or a slogan.

<body>
  <main>
    <div role="banner">
      <a href="#main" class="skiptocontent">Skip To main content</a>
      <img src="images/logo.png" alt="Website Logo" />
      <h1>Name of the site</h1>
      <nav aria-label="Main menu">…</nav>
    </div>
    …
  </main>
<body>