Marking mixed-language content

Problem

A page is correctly identified as English, but it contains a foreign-language quotation, name, or term (e.g., a French book title). Screen readers mispronounce this text, and browsers may apply incorrect typography or spell-checking, as they are still operating under the assumption that all content is English.

Solution

Wrap the foreign-language text in an inline HTML element, such as a <span>, and add the lang attribute with the appropriate language code. This signals to browsers and assistive technologies exactly which language to use for that specific snippet, without affecting the page's main language.

Steps

1. Identify mixed-language content

First, create or identify a component that displays text containing a foreign-language phrase. In this example, an English page includes a French phrase.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        "C'est la vie."
      </p>
    </article>
  );
}

Without any changes, a screen reader will try to pronounce "C'est la vie" using English phonetics, which sounds incorrect.

2. Wrap the foreign text in an element

Modify the component to wrap the specific phrase in a <span> element. This isolates the text so you can apply an attribute to it.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span>"C'est la vie."</span>
      </p>
    </article>
  );
}

3. Add the lang attribute

Add the lang attribute to the <span> with the correct language code for that phrase. In this case, the code for French is fr.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span lang="fr">"C'est la vie."</span>
      </p>
    </article>
  );
}

4. Use the component on your page

You can now use this component on your page.

// app/[lang]/page.tsx
import ArticleText from '@/app/components/ArticleText';

export default function Home() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

When a screen reader encounters the lang="fr" attribute, it will switch to its French-language voice to pronounce the phrase correctly. Browsers may also use this hint to apply French-specific typography (like correct quotation marks) or exclude the phrase from English spell-checking.