The language selection approach at https://wikimediafoundation.org/ does not work without active JavaScript and is not well available to blind users.

Since HTML.4 in 1998 there is a well understood approach to offer options. This will be identified by screenreaders and does not require JavaScript.

The solution end of June / beginning of July 2019 makes the offers invisible and is relying on JavaScript to enable a choice.

• I happen to block some JS for this page triggered by security issue.
• The choice of language is a major issue for people. For those with visual limitations a clear advice is required that there is a top level page navigation provided. There is a button aria-label hint, but should be ranked as an important role (so-called landmark-role).

Current approach:

<div class="language-dropdown">
  <button aria-label="Select language">
    <span class="btn-label-a11y">Current language: </span>
    <img src="/wp-content/themes/shiro/assets/src/svg/language.svg" alt="" class="language-icon">
    <span>en</span>
    <img src="/wp-content/themes/shiro/assets/src/svg/down.svg" alt="" class="down-indicator">
  </button>
  <div class="language-list">
    <ul>
    <li><a class="selected" href="https://wikimediafoundation.org/">English</a></li>
    <li>...</li>
    <li><a href="https://wikimediafoundation.org/es/?noredirect=es_ES">Español</a></li>
    </ul>
  </div>
</div>

Easy first measure:

<div class="language-dropdown" role="navigation">

The key issues of a responsive solution might look like this:

<div class="language-dropdown" role="navigation">
  <form action="/">
    <label>Select language
      <select name="uselang">
        <option value="en" selected>English</option>
        <option>...</option>
        <option value="es-ES">Español</option>
        etc.
      </select>
    </label>
  </form>
  <button style="display:none" aria-label="Select language" role="none presentation">
    <span class="btn-label-a11y">Current language:</span>
    <img src="/wp-content/themes/shiro/assets/src/svg/language.svg" alt="" class="language-icon">
    <span>en</span>
    <img src="/wp-content/themes/shiro/assets/src/svg/down.svg" alt="" class="down-indicator" role="none presentation">
  </button>
  <div class="language-list" style="display:none" role="none presentation">
    <ul>
    <li>...</li>
    </ul>
  </div>
</div>

That will adapt to the situation of the visitor.

• By JavaScript the elements as currently used can be made visible, button will remove display:none from start and .language-list when button clicked (as currently performed). The attribute is given inline here for clarification and may be set by style sheet as current.
• By JavaScript the form element may be assigned some smart CSS attributes in a way that it vanishes from visible space but is still part of the semantic structure. The latter is crucial for screenreaders which need to digest the options, but have no knowledge of optical appearance. The safest way would be to assign a position outside of a clipping frame.

The responsive result for the three constellations:

• For screenreaders both current elements are kept inexistent due to role=none. form is in effect by semantic structure. It does not matter what JavaScript might have modified.
• For non-JS both current elements are kept invisible since the button is never displayed. form is in place since it has not been moved outside clipping.
• For visual JavaScript visitors the form is not present since out of clipping, and button is enabled.

Naturally, all elements in options and animation need to be equipped by appropriate language and RTL attribution when differing from page default.

This behaviour would be what I do expect from the starting page of an organisation which loudly claims to provide a lot of content for everybody around the world with respect to diversity and accessability. On the same page it can be read “more accessible worldwide” but WMF fails already on the starting page to match the own promise.

In favour of KISS (keep it simple and stupid) I would limit myself to 1998 technology and avoid FOUC. The current solution ranks nice fancy design higher than functionality.