Cómo marcar contenido en varios idiomas en React Router v7

Problema

Cuando una página contiene texto en múltiples idiomas, los navegadores y las tecnologías de asistencia asumen que todo el contenido utiliza el idioma declarado de la página. Un lector de pantalla configurado para inglés intentará pronunciar frases en francés, títulos de libros en español o nombres alemanes usando la fonética inglesa, produciendo un resultado ininteligible para los usuarios que dependen del audio. Los navegadores aplican reglas de corrección ortográfica y tipografía basadas en el idioma de la página, marcando incorrectamente palabras extranjeras como errores y manejando incorrectamente la puntuación específica del idioma. Los motores de búsqueda y las herramientas de traducción no pueden procesar con precisión contenido en varios idiomas sin marcadores explícitos de idioma.

Esto afecta no solo a los usuarios de lectores de pantalla, sino a cualquiera que utilice funciones del navegador que dependan de la detección de idioma, incluida la traducción automática, la conversión de texto a voz y el modo de lectura.

Solución

Envuelve el texto en idioma extranjero en elementos HTML con un atributo lang establecido con el código de idioma correcto. El atributo lang indica a los navegadores y tecnologías de asistencia que cambien las reglas de idioma para ese contenido específico, asegurando la pronunciación correcta por los lectores de pantalla y la corrección ortográfica y tipografía apropiadas por los navegadores.

Utiliza elementos HTML semánticos como <span> o <i> para envolver texto extranjero en línea sin interrumpir el diseño. El atributo lang acepta códigos de idioma ISO 639-1 (como fr para francés o es para español) y códigos de región opcionales para el manejo específico de dialectos.

Pasos

1. Crear un componente para marcar texto en idioma extranjero

Construye un componente reutilizable que envuelva el texto en un elemento span con el atributo lang apropiado.

type ForeignTextProps = {
  lang: string;
  children: React.ReactNode;
};

export function ForeignText({ lang, children }: ForeignTextProps) {
  return <span lang={lang}>{children}</span>;
}

Este componente acepta un código de idioma y envuelve sus hijos en un span con el atributo lang, permitiendo a los lectores de pantalla cambiar las reglas de pronunciación para el texto incluido.

2. Usa el componente para marcar texto extranjero en línea

Envuelve palabras o frases extranjeras dentro de tu contenido usando el componente ForeignText.

export default function ArticlePage() {
  return (
    <article>
      <h1>International Cuisine</h1>
      <p>
        El plato estrella del restaurante es{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, una preparación
        francesa clásica que combina perfectamente con su vino de la casa.
      </p>
      <p>
        Su menú de postres incluye{" "}
        <ForeignText lang="es">tres leches</ForeignText> y{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

Los lectores de pantalla ahora pronunciarán "coq au vin" usando fonética francesa, "tres leches" usando fonética española y "tiramisu" usando fonética italiana, mientras que el texto en inglés circundante usa pronunciación inglesa.

3. Marca pasajes más largos en idioma extranjero

Para contenido extranjero de múltiples oraciones, aplica el atributo lang directamente a elementos de nivel de bloque.

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 1</h2>
      <blockquote lang="fr">
        <p>
          Tous les êtres humains naissent libres et égaux en dignité et en
          droits. Ils sont doués de raison et de conscience et doivent agir les
          uns envers les autres dans un esprit de fraternité.
        </p>
      </blockquote>
    </article>
  );
}

Aplicar lang al elemento blockquote marca toda la cita como francés, asegurando la pronunciación y tipografía correctas para todo el pasaje.

4. Combina con texto de interfaz traducido

Cuando muestres contenido extranjero junto con texto de interfaz traducido, usa react-intl para elementos de UI y atributos lang para contenido generado por usuarios o citado.

import { FormattedMessage } from "react-intl";
import { ForeignText } from "~/components/ForeignText";

export default function BookReview() {
  return (
    <article>
      <h1>
        <FormattedMessage id="review.title" defaultMessage="Book Review" />
      </h1>
      <p>
        <FormattedMessage
          id="review.intro"
          defaultMessage="The novel {title} explores themes of identity and belonging."
          values={{
            title: <ForeignText lang="de">Der Steppenwolf</ForeignText>,
          }}
        />
      </p>
    </article>
  );
}

El texto de la interfaz se adapta al idioma del usuario a través de react-intl, mientras que el título del libro conserva su alemán original con el marcado de idioma adecuado para la accesibilidad.