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?
lang
.hreflang
.language
.¿Cómo puedes cambiar el sistema de escritura en tu sitio web?
direction
.dir
.<link>
.Recursos
- Artículos e instructivos sobre la internacionalización del W3C
- La Guía compulsiva de Francisco sobre las direcciones postales proporciona vínculos útiles y una guía amplia sobre los formatos de dirección en más de 200 países.
- DataHub.io es una herramienta para descargar nombres y códigos de países.