Cómo marcar contenido multilingüe en React Router v7

Problema

Cuando una página contiene texto en varios 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 una salida 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 mal la puntuación específica del idioma. Los motores de búsqueda y las herramientas de traducción no pueden procesar con precisión el contenido multilingüe sin marcadores de idioma explícitos.

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 configurado con el código de idioma correcto. El atributo lang instruye a los navegadores y tecnologías de asistencia para cambiar las reglas de idioma para ese contenido específico, asegurando la pronunciación correcta por parte de los lectores de pantalla y la corrección ortográfica y tipografía apropiadas por parte de 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. Crea 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>
        The restaurant's signature dish is{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, a classic French
        preparation that pairs perfectly with their house wine.
      </p>
      <p>
        Their dessert menu features{" "}
        <ForeignText lang="es">tres leches</ForeignText> and{" "}
        <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 circundante en inglés usa pronunciación inglesa.

3. Marca pasajes más largos en idioma extranjero

Para contenido extranjero de varias 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 francesa, asegurando la pronunciación y tipografía correctas para el pasaje completo.

4. Combina con texto de interfaz traducido

Al mostrar contenido extranjero junto con texto de interfaz traducido, usa react-intl para elementos de interfaz 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 a la configuración regional 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 apropiado para accesibilidad.