Selector de idiomas: diseño usable, accesible y seguro para el SEO

Un buen selector de idiomas está en el mismo lugar en todas las páginas, normalmente arriba a la derecha, muestra los idiomas con su propio nombre (Deutsch, Español, Türkçe) y, al elegir uno, lleva al equivalente de la página actual y no a la portada. Las banderas solo deben acompañar al nombre del idioma, y el menú tiene que funcionar con teclado y lector de pantalla. En este artículo vemos dónde colocarlo, el debate banderas frente a nombres, los riesgos de las redirecciones automáticas, las reglas de accesibilidad y cómo configurarlo bien en WordPress, con el selector de esta misma web como ejemplo.

¿Dónde debe ir el selector de idiomas?

La mayoría de usuarios busca el selector arriba a la derecha, junto a la navegación principal. Salvo que tengas un buen motivo para romper esa costumbre, colócalo ahí y mantenlo en la misma posición en todas las páginas. Una segunda lista de idiomas en el pie ayuda a quien llega al final. En móvil, el selector debe aparecer como un pequeño botón en la barra superior o como una sección clara dentro del menú desplegado; un enlace diminuto al final del menú pasa desapercibido.

¿Banderas o nombres de idioma?

Las banderas representan países; los idiomas, a personas. ¿El inglés es Reino Unido o Estados Unidos, el español España o México, el árabe qué país? Un selector solo con banderas invita a malentendidos y puede molestar. Por eso escribe siempre el nombre del idioma y en el propio idioma: un hablante de alemán reconoce “Deutsch” antes que “alemán”. No hace falta quitar las banderas; junto al nombre ayudan a localizar el idioma de un vistazo. Lo importante es elegir una bandera por idioma y usarla igual en todas partes.

A veces país e idioma van por separado. En el software que se vende en todo el mundo en una sola moneda importa más el idioma que el país; nuestro software de marcador Multi Score Screen para instalaciones deportivas, por ejemplo, fija sus planes en dólares, así que en una web de producto así basta con elegir idioma. Si precios, envíos o textos legales cambian por país, ofrece idioma y país en menús separados.

Por qué las banderas emoji dan problemas

Las banderas emoji como 🇪🇸 aparecen en algunos sistemas como dos letras en lugar de una bandera; los navegadores habituales en Windows no dibujan banderas emoji. Por eso esta web dibuja sus banderas como pequeños SVG en línea: sin peticiones a archivos o servicios externos, con el mismo aspecto en cualquier sistema, ocultas para los lectores de pantalla y siempre con el nombre del idioma al lado.

¿A dónde debe llevar la selección?

Mandar a la portada a quien cambia de idioma es el error más común. Quien está en la página de servicios y cambia a inglés quiere ver los servicios en inglés. Cada enlace de idioma debe apuntar al equivalente de la página actual. Si una página no está traducida, indícalo y lleva al visitante a la página más cercana, como el listado del blog en ese idioma, y no generes hreflang para páginas sin traducir. Los detalles técnicos están en nuestra guía de hreflang.

Redirecciones automáticas: con cuidado

Redirigir automáticamente según el idioma del navegador o la IP es tentador, pero tiene dos riesgos. El primero es la experiencia: un hispanohablante que vive en Alemania no quiere que lo envíen a la fuerza a la versión alemana. El segundo son los buscadores: Google desaconseja redirigir automáticamente según el idioma percibido y recomienda enlazar todas las versiones, porque los rastreadores deben poder ver cada una. El patrón seguro es usar el idioma del navegador como sugerencia en la primera visita, recordar la elección en una cookie y mantener siempre visible el selector. La redirección por idioma del navegador de AYM Multilingual también recuerda la elección del visitante.

Accesibilidad: un menú para todos

• Nombre accesible: el botón debe anunciarse con claridad, por ejemplo “Idioma: Español”.
• Información de estado: si es un desplegable, el botón indica si el menú está abierto o cerrado.
• Teclado: se abre con Intro o Espacio, se recorre con las flechas y se cierra con Esc.
• Atributos de idioma: cada enlace declara su idioma para que el lector de pantalla pronuncie bien el nombre.
• Foco visible: quien navega con teclado debe ver claramente qué opción tiene el foco.
• Banderas decorativas: ocúltalas al lector de pantalla; la información la lleva el nombre.

Una estructura sencilla que sigue estos principios:

<div class="lang">
  <button type="button" aria-expanded="false" aria-controls="lang-menu"
          aria-label="Language: Deutsch">
    <svg aria-hidden="true" viewBox="0 0 5 3">…</svg> DE
  </button>
  <ul id="lang-menu" hidden>
    <li><a href="/tr/hizmetler" hreflang="tr" lang="tr">Türkçe</a></li>
    <li><a href="/services" hreflang="en" lang="en">English</a></li>
    <li><a href="/de/dienstleistungen" hreflang="de" lang="de" aria-current="true">Deutsch</a></li>
  </ul>
</div>

¿A partir de cuántos idiomas un desplegable?

Con dos o tres idiomas, mostrarlos como enlaces en línea es lo más rápido: un clic para cambiar. A partir de cuatro, un desplegable queda más ordenado. Marca el idioma activo, mantén un orden fijo (alfabético o por prioridad de mercado) y haz que las opciones se puedan tocar con comodidad en el móvil.

Configurar el selector en WordPress

La mayoría de plugins multilingües permiten añadir el selector como elemento de menú, widget, bloque o shortcode. Nuestro AYM Multilingual asigna menús, cabecera y pie por idioma y redirige por idioma del navegador recordando la elección del visitante. Si vas a añadir un idioma por primera vez, planifica antes la estructura de URL y el flujo de traducción; lo explicamos paso a paso en la guía para añadir un idioma a WordPress. Un selector solo es tan bueno como el contenido que hay detrás, así que lee también el artículo sobre localización y traducción.

Lista de comprobación

1. ¿Está el selector en el mismo sitio en todas las páginas y es fácil de encontrar en móvil?
2. ¿Los idiomas aparecen con su propio nombre y las banderas solo como apoyo?
3. ¿Cada enlace lleva al equivalente de la página actual?
4. ¿La redirección automática actúa solo como sugerencia y recuerda la elección?
5. ¿Se puede usar el menú con teclado y lector de pantalla?

Si quieres que configuremos de forma profesional tu web multilingüe y su selector, consulta nuestro servicio de WordPress multilingüe.

Compartir:XLinkedInWhatsApp