Marcado de contenido en varios idiomas

Problema

Una página está correctamente identificada como inglés, pero contiene una cita, nombre o término en idioma extranjero (por ejemplo, el título de un libro en francés). Los lectores de pantalla pronuncian mal este texto, y los navegadores pueden aplicar tipografía o corrección ortográfica incorrecta, ya que siguen operando bajo el supuesto de que todo el contenido está en inglés.

Solución

Envuelve el texto en idioma extranjero en un elemento HTML en línea, como un <span>, y añade el atributo lang con el código de idioma apropiado. Esto indica a los navegadores y tecnologías de asistencia exactamente qué idioma usar para ese fragmento específico, sin afectar el idioma principal de la página.

Pasos

1. Identifica el contenido en varios idiomas

Primero, crea o identifica un componente que muestre texto que contenga una frase en idioma extranjero. En este ejemplo, una página en inglés incluye una frase en francés.

// 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>
  );
}

Sin ningún cambio, un lector de pantalla intentará pronunciar "C'est la vie" usando la fonética del inglés, lo que suena incorrecto.

2. Envuelve el texto extranjero en un elemento

Modifica el componente para envolver la frase específica en un elemento <span>. Esto aísla el texto para que puedas aplicarle un atributo.

// 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. Añade el atributo lang

Añade el atributo lang al <span> con el código de idioma correcto para esa frase. En este caso, el código para francés es 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. Usa el componente en tu página

Ahora puedes usar este componente en tu página.

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

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

Cuando un lector de pantalla encuentra el atributo lang="fr", cambiará a su voz en idioma francés para pronunciar la frase correctamente. Los navegadores también pueden usar esta indicación para aplicar tipografía específica del francés (como comillas correctas) o excluir la frase de la corrección ortográfica en inglés.