title: Set the language of an HTML input
body: <p>I am currently developing an app that handles translations. In the prototype, the app can handle translations from English to German.</p>
  
  <p>Currently, I have <code>&lt;textarea&gt;</code> elements surrounded by <code>&lt;label&gt;</code> elements:</p>
  
  <pre><code>&lt;label className="m-translation-card__native-field-label" 
         aria-label="Original (English)"&gt;
      English
  
      &lt;textarea className="m-translation-card__native-field-input"
                placeholder="English translation"
                onChange="..." 
                value="..."
      /&gt;
  &lt;/label&gt;
  
  &lt;label className="m-translation-card__translated-field-label"
         aria-label="Translation (Deutsch)"&gt;
      Deutsch
  
      &lt;textarea className="m-translation-card__translated-field-input"
                placeholder="German translation"
                onChange="..."
                value="..."                            
      /&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>When one navigates to the "English translation" textarea via keyboard, the screen reader will read aloud the textarea <code>value</code> attribute content in English. This makes sense - the <code>lang</code> attribute of the <code>&lt;html&gt;</code> tag is set to "en" - and is the intended functionality.</p>
  
  <p>But, when one navigates to the "German translation" textarea, the screen reader again pronounces the textarea <code>value</code> attribute content in English - a pronunciation that is often far different to the correct German pronunciation. Ideally, the pronunciation would be in German.</p>
  
  <p>I would like to add an attribute so that the screen reader is aware that the content of the second textarea is German. I have tried to use the <code>lang="de"</code> attribute, but it did not effect the pronunciation.</p>
  
  <p>Is there a way to achieve this?</p>