Localization lab · Spanish

Spanish localization example

See how translated authored content, a complete message catalog, and scoped language metadata combine into one coherent quiz experience for Spanish-speaking learners.

Scenario

A multilingual accessibility course keeps its developer documentation in English while presenting a complete practice question to learners in Spanish.

User goal: complete the question without encountering mixed-language feedback.

Try it

  1. Activate Comprobar respuesta with nothing selected to test validation.
  2. Select <meta name="language"> and check it to enter the retry state.
  3. Change to <html lang="es"> and check again to complete the quiz.
  4. Reset, then reveal the answer after one wrong attempt and inspect every Spanish label.

Localized practice question

Quiz language: lang="es"

Only the quiz is Spanish. Its language attribute scopes pronunciation without changing the language of the surrounding English documentation.

¿Cómo se indica correctamente que el idioma principal de una página es el español?

Elige una respuesta.

¿Necesitas una pista?

El idioma del documento se declara en su elemento raíz.

Accessibility notes

  • The quiz form has lang="es", so assistive technology can switch pronunciation for its content.
  • Every visible prompt, action, hint, explanation, state label, and generated announcement is Spanish.
  • Validation remains available because checking is enabled before an answer is selected.
  • Native fieldset, legend, labels, radio buttons, details, and buttons preserve expected keyboard behavior.
  • Retry and result states use visible text and polite announcements without relying on color.
  • The no-JavaScript answer fallback is localized and inherits the same language.

Developer notes

Authored interface copy is translated in HTML. Plugin-generated copy is supplied through messages; callbacks receive attempt counts for grammar and context. 

const messages = {
  validationRequired: "Elige una respuesta antes de comprobar.",
  correct: ({ attempt }) =>
    attempt === 1
      ? "Correcto en el primer intento."
      : `Correcto en el intento ${attempt}.`,
  incorrectRetry: ({ remainingAttempts }) =>
    remainingAttempts === 1
      ? "No es correcto. Te queda un intento."
      : `No es correcto. Te quedan ${remainingAttempts} intentos.`
};

createQuizForm(form, {
  messages,
  showProgress: true,
  disableCheckUntilAnswered: false
});

The live catalog also overrides every remaining summary, progress, answer-state, and reveal key. Missing keys would safely fall back to English, which is useful defensively but undesirable in a finished localized experience.