Internacionalización y localización

Si estás leyendo esto, estás usando la World Wide Web. Los formularios pueden ser utilizados por personas que hablan distintos idiomas, de diferentes países y con distintos antecedentes culturales. Aprende a preparar tu formulario para la internacionalización y la localización.

Asegúrate de que el formulario funcione en diferentes idiomas

Veamos cómo puedes asegurarte de que tu formulario funcione con distintos idiomas.

El primer paso a fin de preparar tu sitio para la localización es definir el atributo de idioma lang en el elemento <html>. Este atributo permite que los lectores de pantalla invoquen la pronunciación correcta y ayuda a los navegadores a ofrecer una traducción de la página si el idioma definido no es el predeterminado.

<html lang="en-us">

Obtén más información sobre el atributo lang.

Supongamos que tradujiste un formulario al alemán. ¿Cómo puedes asegurarte de que los motores de búsqueda y los navegadores conozcan la versión traducida? Puedes agregar elementos <link> en la <head> de tu sitio que describan las versiones alternativas.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Cómo ayudar a que los usuarios que hablan otro idioma puedan usar el formulario

No puedes traducir el formulario a todos los idiomas, pero garantiza que las herramientas de traducción puedan traducirlo.

Para garantizar que las herramientas de traducción traduzcan todo el texto de tu formulario, asegúrate de que todo el texto esté definido en HTML y sea visible. Algunas herramientas también funcionan con contenido definido en JavaScript. Sin embargo, para mejorar la compatibilidad, intenta incluir la mayor cantidad de texto posible en HTML.

Asegúrate de que el formulario funcione con diferentes sistemas de escritura

Los diferentes lenguajes usan distintos sistemas de escritura y grupos de caracteres. Algunas secuencias de comandos se escriben de izquierda a derecha y otras de derecha a izquierda.

Haz que el espaciado sea independiente de los sistemas de escritura

Para asegurarte de que tu formulario funcione con diferentes sistemas de escritura, puedes usar las propiedades lógicas de CSS.

La entrada tiene un grosor de borde de 1px en todos los lados, excepto en el izquierdo, donde el borde tiene un grosor de 4px. Ahora, edita el CodePen y cambia el sistema de escritura de derecha a izquierda. Para ello, agrega dir="rtl" al elemento <main>.

El borde grueso ahora aparece en el lado derecho. Eso se debe a que definimos el borde con una propiedad lógica.

input {
  border-inline-start-width: 4px;
}

Obtén más información sobre las propiedades lógicas.

Asegúrate de que tu formulario admita diferentes formatos de nombres

Supongamos que tienes un formulario en el que el usuario debe completar su nombre. ¿Cómo agregarías el campo a tu formulario?

Puedes agregar un campo para el nombre y otro para el apellido. Sin embargo, los nombres son diferentes en todo el mundo: por ejemplo, algunas personas no tienen apellido, entonces, ¿cómo deben completar el campo de apellido?

Para que sea más fácil y rápido ingresar nombres, y para asegurarte de que todos puedan ingresarlos, sin importar el formato, usa un solo campo de formulario para los nombres siempre que sea posible.

Obtén más información sobre los nombres personales.

Si tienes un nombre con caracteres no latinos, es posible que hayas tenido el problema de que, en algunos formatos, tu nombre aparece como invalid. Cuando compiles formularios, asegúrate de permitir todos los caracteres posibles y no des por sentado que un nombre solo consta de caracteres latinos.

Permite una variedad de formatos de dirección

La sede central de Google se encuentra en 1600 Amphitheatre Parkway, Mountain View, CA 94043, Estados Unidos.

Esta dirección incluye el número de calle, la calle, la ciudad, el estado, el código postal y el país. El formato de la dirección puede ser totalmente diferente en tu país. ¿Cómo puedes asegurarte de que todos puedan ingresar su dirección en el formulario?

Una forma es usar entradas genéricas.

Obtén más información sobre otras formas de trabajar con los campos de dirección internacional.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre internacionalización y localización

¿Cómo se invoca la pronunciación correcta para los lectores de pantalla?

Con el atributo lang.
🎉
Con el atributo hreflang.
Vuelve a intentarlo.
Agregar una descripción con el idioma que se utiliza
Vuelve a intentarlo.
Con el atributo language.
Vuelve a intentarlo.

¿Cómo puedes cambiar el sistema de escritura en tu sitio web?

Con el atributo direction.
Vuelve a intentarlo.
Con el atributo dir.
🎉
Usar propiedades lógicas de CSS
Vuelve a intentarlo.
Uso del elemento <link>.
Vuelve a intentarlo.

Recursos