Header met language selector list visueel voorbeeld

Benodigde stappen:

1. Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden.

Voorbeelden:

Voor het visuele voorbeeld zie de header van deze pagina.

HTML-voorbeeld:

<header>
  <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
  <div>
    <a href="{base}/" class="logo">
      <img src="$img/logo-white.svg" alt="Placeholder logo" />Manon
    </a>
    <nav
      data-open-label="Menu"
      data-close-label="Sluit menu"
      data-media="(min-width: 42rem)"
      aria-label="Hoofdnavigatie"
      class="collapsible"
    >
      <div class="collapsing-element">
        <ul>
          <li><a href="/">Home</a>
          <li><a href="/components">Componenten</a></li>
          <li><a href="/documentation">Documentatie</a></li>
        </ul>
      </div>
    </nav>
    <div class="language-selector">
      <p>Kies een taal:</p>
      <p class="visually-hidden" id="language-selector-description">Select your language</p>
      <div
        class="language-selector-options"
        aria-describedby="language-selector-description"
        aria-expanded="false"
      >
        <button aria-haspopup="listbox" lang="pap-CW">Papiamentu</button>
        <ul role="listbox">
          <li role="option" aria-selected="false">
            <a hreflang="nl" href="example-language-select-list" data-value="Nederlands" lang="nl"
              >Nederlands</a
            >
          </li>
          <li role="option" aria-selected="false">
            <a hreflang="en" href="example-language-select-list" data-value="English" lang="en"
              >English</a
            >
          </li>
          <li role="option" aria-selected="false">
            <a hreflang="fy" href="example-language-select-list" data-value="Frysk" lang="fy"
              >Frysk</a
            >
          </li>
          <li role="option" aria-selected="true" aria-current="true">
            <a
              hreflang="pap-CW"
              href="example-language-select-list"
              data-value="Papiamentu"
              lang="pap-CW">Papiamentu</a
            >
          </li>
          <li role="option" aria-selected="false">
            <a
              hreflang="pap-AW"
              href="example-language-select-list"
              data-value="Papiamento"
              lang="pap-AW">Papiamento</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>