ES · EN

11 de noviembre de 2026

Selector de idioma: ubicación, etiquetas y memoria

Visitor choosing a website language on her phone

Un buen selector de idioma es fácil de encontrar, está etiquetado con el nombre de cada idioma en su propia lengua y mantiene al visitante en la misma página después del cambio. En la versión de escritorio, ponlo en una esquina superior del encabezado. En el celular, déjalo visible sin tener que hacer scroll o dentro del menú. Escribe “Español” e “English”, no banderas. Nunca redirijas a los visitantes adivinando por su ubicación. Esta guía cubre cada decisión, con la investigación que la respalda y los detalles que suelen fallar en sitios bilingües en inglés y español en EE. UU.

En resumen

Contenido

Qué hace un selector de idioma y qué no

Un selector de idioma le permite al visitante cambiar el idioma del contenido. Un selector de país es otra cosa distinta. El Nielsen Norman Group separa los dos: un selector de idioma ofrece versiones por idioma, mientras que uno de país ofrece versiones específicas por país que pueden incluir destino de envío, idioma y moneda.

Para un consultorio dental, un bufete de abogados o una clínica con una sola ubicación, casi nunca necesitas un selector de país. Lo que necesitas es un control sencillo de dos opciones. Mantener estas dos ideas separadas evita un error muy común: pedirle a un paciente en Houston que elija un país cuando lo único que quiere es leer tu página en español.

El mismo principio aplica a la configuración. Una investigación reciente de UX sobre selectores de idioma sostiene que idioma, región y moneda deberían ir por separado, porque la gente tiene combinaciones poco comunes, como querer una interfaz en el idioma local con envío internacional. Para un consultorio o despacho, eso se traduce en: el idioma es una elección, y nada más viene de la mano con ella.

Qué hace un selector de idioma y qué no

Dónde poner el selector de idioma

Escritorio

Los visitantes buscan el selector en las esquinas del encabezado. La recomendación de NN/G es colocarlo en las esquinas superiores en escritorio, casi siempre arriba a la derecha y luego arriba a la izquierda. El U.S. Web Design System, el estándar de diseño del gobierno federal, va más allá para sitios en dos idiomas: dice que hay que poner el botón del selector en la parte superior de la pantalla, por encima de la navegación del sitio, para que el usuario pueda alternar entre los dos idiomas.

Ese último detalle importa mucho para un consultorio bilingüe. Si tu navegación dice “Services, About, Contact” y un visitante hispanohablante no la entiende, un control escondido en la navegación ya llega tarde. Un control que vive por encima de ella es lo primero que se ve.

Celular

En un teléfono, el espacio es limitado y el encabezado suele colapsar en un menú. La recomendación es mantener el selector visible sin hacer scroll, o dentro del menú de navegación. Para sitios en dos idiomas, nosotros preferimos dejar un botón de alternancia visible en el propio encabezado móvil, porque abrir un menú implica interpretar el ícono del menú y luego leer su contenido, y justo las personas que más necesitan el selector son las que menos pueden hacer eso con comodidad.

Si tu diseño te obliga a meter el selector en el menú, ponlo cerca de la parte de arriba de la lista, no hasta abajo después de nueve enlaces.

El pie de página como respaldo

Un enlace en el pie de página es una buena segunda ubicación, sobre todo para visitantes que regresan y quieren volver a cambiar su elección. Es un complemento, nunca el único lugar. Los visitantes que no pueden leer la página no van a bajar hasta el final buscando una opción de idioma.

Cómo etiquetar las opciones

Usa el nombre de cada idioma en su propia lengua

Escribe “Español”, no “Spanish”, e “English”, no “Inglés”. La razón es práctica: puede que el visitante no sepa leer la página actual. NN/G aconseja etiquetar los idiomas en su propio idioma para que la gente reconozca el suyo aunque la interfaz les resulte ilegible.

Esta es una trampa para los sitios que se construyen primero en inglés. Un botón que dice “Spanish” en una página en inglés solo le sirve a quien ya sabe leer inglés. La persona a la que quieres llegar no ve nada que le resulte familiar.

Olvídate de las banderas

Una bandera representa un país, y los idiomas no corresponden uno a uno con los países. El U.S. Web Design System dice que las banderas no deberían representar idiomas porque no se asocian de forma única a un idioma, y que pueden confundir o excluir a la gente. El español por sí solo es el idioma principal de una larga lista de países. Una bandera mexicana le va a chocar a un paciente colombiano, y una bandera de España probablemente le choque a casi todo tu público.

NN/G agrega que una bandera, en cualquier caso, no debería ser el único indicador: acompáñala con el nombre del idioma u otro indicador. Para un sitio de consultorio en dos idiomas, la respuesta más simple es puro texto.

Íconos de globo: ayudan, pero no bastan

Un ícono de globo o de traducción puede ayudar al reconocimiento, y muchos usuarios lo buscan. Trátalo como un acompañante del texto, como un íconito junto a “Español”. Un ícono solo obliga al visitante a adivinar.

¿Botón de alternancia o menú desplegable?

Con solo dos idiomas, un único botón visible que muestra el otro idioma (en la página en inglés, “Español”; en la página en español, “English”) le gana a un desplegable. Toma un clic y no hay ningún menú que abrir. Los desplegables se justifican cuando tienes tres o más idiomas. El patrón del USWDS para exactamente dos idiomas es un solo botón, y esa es la opción correcta por defecto para la mayoría de los consultorios y despachos.

Mantén al visitante en la misma página

La falla más frustrante de un selector es la que te avienta a la página de inicio. Un visitante que está leyendo tu página en español sobre implantes dentales le da clic a “English” y aterriza en una página de bienvenida genérica. Se perdió el hilo, y muchos se van.

El comportamiento ideal, descrito en esta especificación de selectores de idioma, es enlazar a la página equivalente exacta en el idioma de destino, por ejemplo de /pricing/ a /es/pricing/, y no de regreso a la página de inicio. Eso significa que cada página en inglés necesita una contraparte real en español, y que el selector debe conocer esa correspondencia.

El selector dirige a las páginas traducidas correspondientes

Cuando una página no tiene traducción, dilo de forma breve en el idioma del visitante y mándalo a la página relacionada más cercana, no a un callejón sin salida.

Esa misma correspondencia entre páginas es lo que necesitan los motores de búsqueda. Usa anotaciones hreflang junto al selector para que las versiones en otros idiomas queden señaladas a los motores de búsqueda y se pueda servir la página correcta a la persona correcta. Cubrimos la auditoría paso a paso en nuestra auditoría de hreflang en 20 minutos, y el lado de la navegación en nuestra guía de navegación de sitios bilingües con atributos lang.

Recuerda la elección

Una vez que alguien elige español, déjalo en español. El artículo de Smashing Magazine sobre selectores de idioma describe cómo Patagonia guarda la preferencia en una cookie y ofrece un enlace en el pie de página para volver a cambiar la selección. Vale la pena copiar ese patrón: la elección se conserva y el camino de regreso siempre está a la vista.

Detección automática: sugiere, nunca impongas

Es tentador leer la ubicación o el navegador del visitante y mandarlo al idioma “correcto”. El U.S. Web Design System aconseja evitar las redirecciones automáticas basadas en la ubicación o la configuración del navegador, porque pueden confundir y desorientar.

Piensa en una familia bilingüe que comparte una sola laptop, en un paciente que usa una computadora del trabajo configurada en inglés, o en un visitante hispanohablante con un teléfono configurado en inglés porque esa era la opción por defecto. Una redirección adivina mal con cada uno de ellos, y el visitante no tiene idea de por qué cambió la página.

Esto también tiene un lado de búsqueda. Las redirecciones automáticas pueden causar problemas de indexación porque los rastreadores llegan desde distintas direcciones IP y configuraciones de idioma, lo que vuelve impredecible el efecto en el SEO. Si quieres profundizar en cómo se encuentran las páginas multilingües, este resumen sobre contenido SEO multilingüe es un buen siguiente paso.

Un camino intermedio que funciona, en línea con la recomendación de NN/G: usa por defecto el idioma que coincide con la configuración del navegador, deja que la gente lo cambie después y, si no puedes saberlo, pregunta en vez de adivinar. Para un consultorio, eso puede ser tan sencillo como un pequeño banner descartable en español en la primera visita que ofrezca continuar en español, con la página aún legible por debajo.

Detalles de accesibilidad que casi todos los selectores pasan por alto

Un selector es un control como cualquier otro, y entre quienes más dependen de él están las personas que usan tecnología de asistencia. Cuatro detalles:

  1. Contraste. Asegúrate de que haya suficiente contraste de color entre el botón, su texto y el fondo. El patrón del USWDS lo señala directamente.
  2. Comportamiento real de botón. Si el control está codificado como enlace, agrega role="button" y haz que funcione tanto con Enter como con la barra espaciadora, como indica el USWDS.
  3. Un atributo lang en cada opción. Etiqueta el enlace de “Español” con lang="es" para que un lector de pantalla lo pronuncie en español y no con voz en inglés. Esto se describe en la especificación de selectores de idioma.
  4. El idioma actual marcado. Usa aria-current="true" en el idioma activo, o dale un estilo de no interactivo, para que quienes usan lector de pantalla sepan dónde están, según la misma especificación.

Si tu consultorio es un proveedor de salud o un bufete de abogados, la accesibilidad también es un tema legal en EE. UU. Nuestra guía de pasos de cumplimiento de la ADA en sitios multilingües cubre ese lado.

Una lista rápida para un sitio de consultorio en dos idiomas

DecisiónHaz estoEvita esto
Posición (escritorio)Arriba a la derecha del encabezado, por encima de la navegación principalSolo en el pie de página
Posición (celular)Visible en el encabezado o arriba del menúÚltimo elemento de un menú largo
EtiquetaEspañol / EnglishSpanish / Inglés, o solo banderas
Tipo de controlUn botón que muestra el otro idiomaDesplegable para dos opciones
DestinoPágina equivalente en el otro idiomaPágina de inicio
MemoriaGuarda la elección; deja una forma de cambiarlaReiniciar en cada visita
DetecciónSugiere con un bannerRedirección forzada por IP
Marcadolang, aria-current, contraste, hreflangBotón solo de imagen

Perspectiva

Construimos recepciones bilingües para dentistas, abogados y clínicas, así que vemos los mismos errores de selector una y otra vez. El más común no es una falla de diseño. Es dar por hecho que el español es una función que se le agrega encima a un sitio en inglés.

Un paciente que lee español primero decide en unos segundos si tu consultorio es para él. Si lo primero que ve es una página en inglés y un pequeño enlace gris que dice “Spanish”, ya tiene su respuesta. Por eso tratamos el selector como la puerta de entrada de la experiencia en español, no como un extra.

El segundo supuesto es que el selector lo resuelve todo. No es así. Un selector que aterriza en una página pobre o traducida por máquina es peor que no tener selector, porque promete algo que la página no cumple. Nuestro enfoque es contenido en español revisado por personas y escrito para que se lea natural, no traducido palabra por palabra, con cada página emparejada a su equivalente en inglés para que el selector mantenga al visitante donde estaba.

El tercero es que la elección debe quedarse del lado del visitante. Preferimos sugerir antes que redirigir, y recordar antes que volver a preguntar. La meta es que un cliente hispanohablante pueda agendar, llamar o escribirte sin sentirse nunca como un invitado en la versión equivocada de tu sitio.

Francisco

Dónde encaja el selector en toda la experiencia bilingüe

El selector es apenas el punto de entrada. Lo que viene después es lo que define si el visitante se convierte en cliente: la página a la que llega, el número de teléfono al que llama, la forma en que agenda. Un visitante que cambia a español y luego se topa con un buzón de voz solo en inglés chocó con el mismo muro del idioma, nada más que un paso después.

Para los bufetes de abogados, esa continuidad es la diferencia entre una consulta y un caso perdido, algo que explicamos en nuestros artículos sobre un sitio web de bufete bilingüe y un sitio web en español que convierte. Para clínicas y consultorios dentales, consulta nuestra guía de sitios web médicos bilingües. Para el panorama de negocio más amplio, lee qué significa un sitio web de negocio bilingüe para el crecimiento.

Lleva el selector, las páginas y la recepción en un solo paquete

Diazluna combina un sitio web bilingüe en español e inglés, una recepcionista con IA disponible 24/7 e integración con WhatsApp, para que el selector de idioma lleve a algo útil en cada paso. La configuración del sitio es gratis, y los planes son:

Hay una cuota única de activación de $399.

Diazluna

Mira los planes y empieza en el sitio de Diazluna.

Preguntas frecuentes

¿Un selector de idioma debería usar banderas?

No. Las banderas representan países, y un idioma no pertenece a un solo país. El U.S. Web Design System recomienda no usarlas para idiomas por esa razón. Usa el nombre del idioma en su propia lengua, como Español, y si quieres, un íconito de globo.

¿Dónde debería ir el selector de idioma en un sitio móvil?

Déjalo visible sin hacer scroll o dentro del menú de navegación, como recomienda NN/G. Para un consultorio con solo dos idiomas, preferimos un botón de alternancia visible en el encabezado móvil. Si tiene que ir en el menú, que sea uno de los primeros elementos.

¿Mi sitio debería cambiar de idioma automáticamente?

Es más seguro que no. Redirigir por ubicación o configuración del navegador puede desorientar a los visitantes y causar problemas de indexación. Ofrece una sugerencia clara, como un banner breve, y deja que el visitante tenga el control, recordando su elección para la próxima vez.

¿Qué debería pasar cuando alguien le da clic al selector de idioma?

Debería aterrizar en la misma página en el otro idioma, no en la página de inicio. Eso requiere una página equivalente para cada una, enlazadas con anotaciones hreflang para que los motores de búsqueda entiendan la correspondencia.

Fuentes

Recomendados