skip to content

Language selector

in production

Tags:

Example with simple form

In this simple form, no CSS or JavaScript code is required. The production team can add a client-side JavaScript to redirect users on click or do it on the server side. Both method required very simple and little script.

HTML code

<div class="live-snippet">
  <form id="frm-lang-selector"
        action=""
        method="post">
    <label id="lbl-lang-selector"
           for="sel-lang-selector">
      Site language
    </label>
    <select id="sel-lang-selector">
      <option lang="en"
              value="en"
              selected>
        English
      </option>
      <option lang="es"
              value="es">
        Espanol
      </option>
      <option lang="fr"
              value="fr">
        Français
      </option>
    </select>
    <input id="btn-lang-selector"
           type="submit"
           value="Go!" />
  </form>
</div>

Example without form

The example below is working and is accessible without javascript using the spacebar. To the added value of using the enter key to open and close the listbox, please add the small JS code following the CSS code.

HTML code

<input type="checkbox"
       id="chk-lang-selector"
       aria-haspopup="listbox"
       class="chk-dropdown-toggle visually-hidden"
/>
<label id="lbl-lang-selector-2"
    for="chk-lang-selector"
    class="lbl-lang-selector">
  Site language:
  <span class="current-lang">Currently on the English website</span>
  <i class="fas fa-caret-square-down"></i>
</label>
<ul id="lst-lang-selector"
    tabindex="-1"
    role="listbox"
    aria-labelledby="lbl-lang-selector-2"
    class="lst-lang-selector">
  <li id="opt-lang-selector-en"
      role="option"
      aria-selected="true"
      class="focused">
      <a href="?lang=en" lang="en">English</a>
  </li>
  <li id="opt-lang-selector-es"
      role="option">
      <a href="?lang=es" lang="es">Espanol</a>
  </li>
  <li id="opt-lang-selector-fr"
      role="option">
      <a href="?lang=fr" lang="fr">Français</a>
  </li>
</ul>

CSS code

.chk-dropdown-toggle:focus~.lbl-lang-selector {
  outline: 4px solid #999;
}

.chk-dropdown-toggle:focus~.lbl-lang-selector i {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lst-lang-selector {
  display: block;
}

.chk-dropdown-toggle:unchecked~.lst-lang-selector {
  display: none;
}

.lst-lang-selector {
  display: none;
}

.lbl-lang-selector:hover {
  cursor: pointer;
  outline: 4px solid #999;
}

.lbl-lang-selector:hover i,
.lst-lang-selector a {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lbl-lang-selector .fa-caret-square-down:before {
  content: "\f151";
}

Javascript code

var aria = aria || {};

/**
 * @desc
 *  Key code constants
 */
aria.KeyCode = {
  BACKSPACE: 8,
  TAB: 9,
  RETURN: 13,
  SHIFT: 16,
  ESC: 27,
  SPACE: 32,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  END: 35,
  HOME: 36,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  DELETE: 46,
};

function checkboxKeydown (evt) {
  var key = evt.which || evt.keyCode;

  switch (key) {
    case aria.KeyCode.RETURN:
      if (this.getAttribute('checked') === 'checked') {
        this.removeAttribute('checked');
      } else {
        this.setAttribute('checked', 'checked');
      }
      break;
  }
};

window.onload = function () {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (i = 0; i < checkboxes.length; i++) {
      var cb = checkboxes[i];
      cb.addEventListener('keydown', checkboxKeydown);
  }
};
W3C SVG