Skip to main contentSkip to site searchSkip to component search
Honeycomb

Language switcher

A language switcher component, typically used as a header widget.

The language switcher shows a link that opes a popup with a selection of languages or domains a user can choose from. It is usually found close to the site main navigation areas. The component is not tied to header styles.

The component is divided in 2 parts: the toggle button and the panel.

Toggle button location

The language switcher toggle button can be placed anywhere in the code, but the usual places are the header widgets area and the header burger menu widgets area.

When placed on the burger menu, the toggle will expand to match the burger menu navigation links.

The toggle content may be the currently selected language, but for accessibility purposes it is good to add more text explaining what it does: "Open language selection popup".

You can do that with sr-only text or with aria-label on the button. Bear in mind that aria-label replaces any current label the button has, so make sure to also include the currently selected language in it.

<div class="flix-language-switcher">
  <button class="flix-language-switcher__toggle" type="button">
    <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/gb.min.svg" alt="United Kingdom"/>
    English
    <span class="flix-sr-only">Open language selection</span>
  </button>
</div>

Popup content details

Inside the popup element make sure to include:

  • The close button must be the first interactive element of the popup body (important for the plugin tab trap);
  • The close button must have an accessible aria-label;
  • Each section for the domains should be connected with their respective title using aria-labelledby;
  • Each language must have a proper lang attribute, given they are going to be written in their own language, this enables screen readers to choose the correct speech;
  • Identify the country of a given language with the flag by using the alt attribute, this way users can identify different domains that have the same language (e.g.: English US and English UK);
  • The links can be switched to buttons by just changing the HTML element;

Using the popup plugin

Using the popup plugin is easy and will handle most of the javascript hard work for you:

  • Include the plugin from our CDN at the end of your page: 
    <script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/popup.js"></script>
  • Initialize the plugin: 
    document.addEventListener("DOMContentLoaded", function() {
  popup.init();
});

Building the language switcher popup:

  1. Add an id to the flix-language-switcher-popup element and initialize it with the hidden attribute, so it's closed;
  2. Use the popup id and connect it to the toggle using data-popup="{THE_POPUP_ID}";
  3. In order for the plugin to work you need to tell it what are the first and last focusable elements of the popup body:
  • Give each of them an id;
  • Pass them to the toggle using data-firstFocusable="{THE_ELEMENT_ID}" and data-lastFocusable="{THE_ELEMENT_ID}";
  • It is recommended that the close button be the first focusable element of the popup body;
  1. Accessibility guidelines dictates that all dialogs must have a label:
  • You can either give the popup and aria-label;
  • Or you can associate the popup title with and id and aria-labelledby;
  1. The plugin will take care of the following:
  • Adding the right role and aria-modal values to the popup element;
  • Toggling the hidden attribute to show and hide the popup;
  • Adding ESC key press support for closing the popup with the keyboard;
  • Creating a tab trap that doesn't allow the user to tab away from the popup (cycles tabs from the first and the last focusable items);
  • Adding the close button click handler if a close button is present;
<div class="flix-language-switcher">
  <button type="button" class="flix-language-switcher__toggle" data-popup="language-selection-popup-1" data-firstfocusable="close-button" data-lastfocusable="last-focusable-item">
    <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/gb.min.svg" alt="United Kingdom"/>
    English
    <span class="flix-sr-only">Open language selection</span>
  </button>
</div>
<div id="language-selection-popup-1" class="flix-language-switcher-popup" aria-label="Language selection" hidden="">
  <div class="flix-language-switcher-popup__body">
    <button id="close-button" type="button" aria-label="Close language selection" class="flix-language-switcher-popup__close flix-btn flix-btn--square flix-btn--sm flix-btn--link"></button>
    <section aria-labelledby="suggested-domains" class="flix-language-switcher-popup__region">
      <h2 class="flix-h4 flix-h4--section-header" id="suggested-domains">Suggested domains</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <button type="button" class="flix-language-switcher-popup__link" aria-current="true">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/de.min.svg" alt="Germany"/>
            Deutsch
          </button>
        </li>
        <li class="flix-language-switcher-popup__item">
          <button type="button" class="flix-language-switcher-popup__link">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/eu.min.svg" alt="European Union"/>
            English
          </button>
        </li>
      </ul>
    </section>
    <section aria-labelledby="europe-domains" class="flix-language-switcher-popup__region">
      <h2 class="flix-h4 flix-h4--section-header" id="europe-domains">Europe</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="de">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/de.min.svg" alt="Germany"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="de-ch">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/ch.min.svg" alt="Switzerland"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="de-at">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/at.min.svg" alt="Austria"/>
            Deutsch
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="en-gb">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/gb.min.svg" alt="England"/>
            English
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="es">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/es.min.svg" alt="Spain"/>
            Español
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/fr.min.svg" alt="France"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr-ch">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/ch.min.svg" alt="Switzerland"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr-be">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/be.min.svg" alt="Belgium"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="it">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/it.min.svg" alt="Italy"/>
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="it-ch">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.3.0/img/flags/svg/ch.min.svg" alt="Switzerland"/>
            Italiano
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="pl">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/pl.min.svg" alt="Poland"/>
            Polski
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="pt-pt">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/pt.min.svg" alt="Portugal"/>
            Português
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="rs">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/rs.min.svg" alt="Serbia"/>
            Srpski
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fi">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/fi.min.svg" alt="Finland"/>
            Suomi
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="se">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/se.min.svg" alt="Sweden"/>
            Svenska
          </a>
        </li>
      </ul>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="ua">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/ua.min.svg" alt="Ukraine"/>
            Укpaїнcькa
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="mk">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/mk.min.svg" alt="Macedonia"/>
            Македонски
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="bg">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/bg.min.svg" alt="Bulgaria"/>
            Български
          </a>
        </li>
      </ul>
    </section>
    <section aria-labelledby="america-domains" class="flix-language-switcher-popup__region">
      <h2 class="flix-h4 flix-h4--section-header" id="america-domains">North &amp; South America</h2>
      <ul class="flix-language-switcher-popup__list">
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="en-us">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/us.min.svg" alt="United States"/>
            English
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="es-us">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/us.min.svg" alt="United States"/>
            Español
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="zh-us">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/us.min.svg" alt="United States"/>
            中文
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="en-ca">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/ca.min.svg" alt="Canada"/>
            English
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" href="#" lang="fr-ca">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/ca.min.svg" alt="Canada"/>
            Français
          </a>
        </li>
        <li class="flix-language-switcher-popup__item">
          <a class="flix-language-switcher-popup__link" id="last-focusable-item" href="#" lang="pt-br">
            <img class="flix-language-switcher__flag" src="https://honeycomb.flixbus.com/dist/7.2.12/img/flags/svg/br.min.svg" alt="Brasil"/>
            Português
          </a>
        </li>
      </ul>
    </section>
  </div>
  <div class="flix-overlay"></div>
</div>

Making it work without the plugin

  1. to identify the language switcher popup as a dialog landmark, add the following attributes popup element:
  • role="dialog"
  • aria-modal="true";
  1. To show and hide the popup, toggle the hidden attribute from the popup element;
  2. When opening the popup:
  • Remove the hidden attribute;
  • Set focus to the __close button, which must be the first focusable element;
  • Create a tab trap that cycles the tab order between the first and last focusable element;
  1. When closing the popup:
  • Users must be able to close the popup by pressing the __close button as well as pressing the ESC key on the keyboard;
  • Add the hidden attribute;
  • Set focus back to the __toggle button, where the interaction started;
Made with 🍯 by FlixMobility 2023