VoiceOver Language Switching issue

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MAC OS Voice Over Issue</title>
  </head>

  <body>
    <h1>MAC OS - Multilanguage Forms - Auto Lang Switching issue</h1>


    <h2 id="example1">Example 1: <em>lang</em> on input</h2>
    <p>Each radio is marked in corresponding language:</p>
    <ul>
      <li>
        <input type="radio" name="lang1" id="lang-en1" value="en">
        <label for="lang-en1">English</label>
      </li>
      <li>
        <input type="radio" name="lang1" id="lang-de1" value="de" lang="de">
        <label for="lang-de1">Deutsch</label>
      </li>
      <li>
        <input type="radio" name="lang1" id="lang-es1" value="es" lang="es">
        <label for="lang-es1">Español</label>
      </li>
      <li>
        <input type="radio" name="lang1" id="lang-fr1" value="fr" lang="fr">
        <label for="lang-fr1">Français</label>
      </li>
    </ul>

    <h2 id="example5">Example 2: <em>lang</em> on label</h2>
    <p>Each radio is marked in corresponding language:</p>
    <ul>
      <li>
        <input type="radio" name="lang2" id="lang-en2" value="en">
        <label for="lang-en2">English</label>
      </li>
      <li>
        <input type="radio" name="lang2" id="lang-de2" value="de">
        <label for="lang-de2" lang="de">Deutsch</label>
      </li>
      <li>
        <input type="radio" name="lang2" id="lang-es2" value="es">
        <label for="lang-es2" lang="es">Español</label>
      </li>
      <li>
        <input type="radio" name="lang2" id="lang-fr2" value="fr">
        <label for="lang-fr2" lang="fr">Français</label>
      </li>
    </ul>

    <h2 id="example6">Example 3: <em>lang</em> on input <strong>and</strong> label</h2>
    <p>Each radio is marked in corresponding language:</p>
    <ul>
      <li>
        <input type="radio" name="lang3" id="lang-en3" value="en">
        <label for="lang-en3">English</label>
      </li>
      <li>
        <input lang="de" type="radio" name="lang3"...