Internacionalización y localización

Si estás leyendo esto, estás usando la World Wide Web. Es posible que tus formularios se usen para personas que hablan diferentes idiomas, personas de diferentes países y personas con diferentes orígenes 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 en diferentes idiomas.

El primer paso para 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 del navegador.

<html lang="en-us">

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

Digamos 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 el archivo <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">

Ayuda a que los usuarios que hablan otro idioma usen tu formulario

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

Para asegurarte de que las herramientas de traducción traduzcan todo el texto del 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, pero para mejorar la compatibilidad, intenta incluir la mayor cantidad de texto posible en HTML.

Asegúrese de que su formulario funcione con diferentes sistemas de escritura

Los diferentes idiomas 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 lado 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 está en el lado derecho. Esto se debe a que definimos el borde usando 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 nombre

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

Podrías 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 deberían completar el campo de apellidos?

Para que sea fácil y rápido ingresar nombres, y para asegurarte de que todos puedan ingresar su nombre, sea cual sea utiliza un solo campo de formulario para los nombres siempre que sea posible.

Más información sobre los nombres personales.

Si tienes un nombre con caracteres no latinos, Es posible que se haya producido un problema relacionado con la denuncia de tu nombre como invalid en algunas formas. Cuando formularios de compilación, asegúrese de incluir todos los caracteres posibles y no suponga que un nombre solo consiste en de caracteres latinos.

Permite diversos 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 y la calle, la ciudad, el estado, el código postal y el país. En tu país, el formato de la dirección puede ser totalmente diferente. ¿Cómo puedes asegurarte de que todos puedan ingresar su dirección en el formulario?

Una forma es usar entradas genéricas.

Más información sobre otras formas de trabajar con campos de direcciones internacionales.

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 utilizado
Vuelve a intentarlo.
Con el atributo language
Vuelve a intentarlo.

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

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

Recursos