FR: Improve accessibilty (a11y)

[stkjj]

Version Information

• WordPress: 5.4.2
• MultilingualPress: 3.4.0

Steps to Reproduce

1. Create Language switcher menu under Appearance > Menu
2. Assign menu to given space in theme
3. include the menu within the theme with

<nav id="site-navigation" class="main-navigation main-navigation-w-secondary">
  <?php
  // Language switcher.
   if ( has_nav_menu( 'menu-3' ) ) {
    wp_nav_menu(
       array(
          'theme_location' => 'menu-3',
          'menu_id' => 'languages',
          )
      );
   }
?>

What I Expected

Menu for let's say

• DE
• FR
• EN

is perfectly formed, but has a11y issues. Screenreaders would pronounce such as:
"navigation - list with 3 items - dee selected - frrr - enn"
which doesn't make too much sense. It would better to have either addtional (invisible) screenreader texts which would mean something like

<a href="/de/"><span class="screenreader-text">Webseite in deutsch</span>DE</a>
<a href="/fr/"><span class="screenreader-text">Site web en français</span>FR</a>
<a href="/en/"><span class="screenreader-text">Website in english</span>EN</a>

whereas .screenreader-text {visibility: hidden; display: none;}

Second best solution would be to have ARIA-labels like:

<a href="/de/" aria-label="Webseite in deutsch">DE</a>
<a href="/fr/" aria-label="Site web en français">FR</a>
<a href="/en/" aria-label="Website in english">EN</a>

The text within the <span> or aria-label could be assigend either within the menu-item in Appearance > Menu or under Network > Sites > SiteID=n > MultilingualPress

The labels as such don't need to be translateable as they're attached to the Language Switcher which is on all language versions the same.