Uso de <select> para enlazar contenido localizado

Audiencia de destino: Los codificadores de XHTML/HTML (que utilizan editores o lenguajes de escritura), los desarrolladores de sistemas de escritura (PHP, JSP, etc.), los gerentes de proyectos web y cualquiera que desee una mejor comprensión de cómo utilizar el elemento de selección para navegación a versiones localizadas o regionales de un sitio.

Pregunta

¿Cuáles son los mejores métodos para utilizar menús desplegables basados en el elemento select para dirigir visitantes a contenido localizado?

Información preliminar

A medida que las empresas y organizaciones lanzan una cantidad cada vez mayor de sitios web localizados, la navegación simple a nivel mundial se hace cada vez más importante.

Uno de los dispositivos más populares es el menú desplegable de la página principal que utiliza el elemento select que incluye enlaces a versiones localizadas del contenido. Dichas listas de selección no se restringen al uso en la página principal, sino que también pueden verse como una forma de ahorrar espacio para permitir a los usuarios cambiar entre traducciones o sitios regionalmente localizados página por página.

El contenido localizado señalado puede ser el sitio de otro país, una versión traducida de un sitio o página, etc. En este artículo, evitamos hablar sobre la mejor manera de organizar la información (es decir, sitios traducidos vs. sitios específicos de una región) para concentrarnos en las ventajas y desventajas y los mejores métodos asociados con el uso de listas de selección para elegir el contenido. Hay muchos otros aspectos de la navegación a escala mundial que se describirán en otros artículos.

Respuesta

Obsérvese que dichas recomendaciones no se aplican a listas de selección que son parte de un formulario. Por ejemplo, si completa un formulario y selecciona su país de residencia o su idioma de una lista, la lista de selección debería estar en su totalidad en el idioma de la página actual.

¿Debería utilizar <select> para la lista?

Los menús desplegables pueden parecer muy atractivos cuando el espacio es importante. No obstante, no siempre son la mejor solución para la navegación a escala mundial y necesita decidir si es la mejor solución para su sitio web. Los siguientes puntos pueden ayudarle.

La principal ventaja de usar menús desplegables es ajustar la selección a un espacio más pequeño.

Las principales desventajas de utilizar select para enlaces a páginas o sitios localizados son:

Si su sitio admite sólo un grupo de versiones localizadas, quizá sea mejor evitar los menús desplegables y sólo deba incluir enlaces directamente en la página. Eso le da más flexibilidad para utilizar gráficos que representen texto extranjero, evita la dificultad de encontrar una etiqueta no lingüística apropiada para la lista y permite al usuario reconocer la presencia de una página y el enlace a ella con mucha mayor rapidez.

Hay otras técnicas también. Por ejemplo, pueden utilizarse mapas de perfil para seleccionar sitios locales ubicados en regiones o países.

Si su menú desplegable apunta a más de otros 20 sitios o páginas, debería considerar si es utilizable para los usuarios que deben desplazarse hasta el final de la lista. Si no es así, puede considerar un enlace a una página de portal global especializada en la página principal. Si establece enlaces entre versiones localizadas de páginas específicas, una página de selección puede no ser una solución práctica.

Recomendaciones comprobadas

Si decide utilizar un menú desplegable, estas son algunas recomendaciones comprobadas a tener en cuenta.

Ubicación. Ubique el menú desplegable en la parte superior de la página o cerca de ella. Dicha ubicación es muy visible, lo cual aumenta la probabilidad de que el visitante la vea. Los estudios de exploración de páginas con sistemas de escritura de izquierda a derecha muestran que la ubicación en el extremo derecho superior aumenta la visibilidad. Además, una cantidad cada vez mayor de sitios web han ubicado sus portales globales en este lugar, lo cual condiciona a los usuarios a esperar verlos allí.

Desde ya, evite colocar la lista en el pie de la página de manera que no aparezca en la primera pantalla de información (y tenga en cuenta que una pantalla puede ser una cantidad diferente para diferentes usuarios).

Etiquetación. Cree un diseño gráfico para que sirva como etiqueta del menú desplegable. No puede esperar que los usuarios sin fluidez en inglés entiendan "Select language". Los íconos reconocidos a nivel mundial transmiten el mensaje a las personas sin importar qué idioma hablen. En un mundo ideal, habría un símbolo muy reconocido para esto. Todavía esos tiempos no han llegado, aunque los íconos mundiales parecen estar popularizándose más.

Los ejemplos de gráficos posibles incluirían globos terráqueos, perfiles faciales icónicos con líneas para indicar habla, caracteres alfabéticos para sistemas de escritura múltiples (en especial, para enlaces a traducciones), etc.

El texto alternativo para dicho gráfico no tiene mucha importancia. Quizá piense que necesita estar en todos los idiomas o en ningún idioma en particular por cuestiones de accesibilidad, pero la gente que confía en lectores de pantalla podría atravesar el texto desplegable para encontrar el enlace apropiado.

Uso del atributo de tamaño En algunos casos puede ser eficaz utilizar el atributo size para visualizar el primer conjunto de opciones de la lista, en particular, si es una lista larga. Eso sugiere al usuario que es una colección de idiomas/regiones y puede eliminar la necesidad de una etiqueta específica no lingüística para la lista. Aquí incluimos un ejemplo:

Una lista desplegable que muestra las primeras cinco selecciones.

Traduzca las opciones. Traduzca las opciones del menú a los idiomas de destino. En lugar de incluir el enlace de un menú desplegable a una traducción que diga, por ejemplo, "francés", el enlace debería decir "français"; y en lugar de un sitio nacional alternativo como "Alemania", el enlace debería decir "Deutschland".

Preste atención a las reglas de uso de mayúsculas en otros idiomas. Observe cómo la traducción correcta de "francés" es "français" con una "f" minúscula.

Codificación Para visualizar una mezcla de idiomas no latinos, como árabe, ruso y japonés, necesitará un método para representar todos los caracteres necesarios.

Lo preferible es utilizar UTF-8 (Unicode) como codificación para su página, dado que dicha codificación admite todos los caracteres que necesitará. Si no puede utilizar UTF-8, debería utilizar escapes para representar caracteres no admitidos por la codificación de su página.

Fuentes También debe pensar si el lector tendrá fuentes para visualizar este rango de sistemas de escritura. Recuerde que un usuario en Francia, por ejemplo, puede ver cuadrados vacíos en lugar del texto en japonés mientras que un usuario en Japón verá bien el texto. Eso se debe a que las fuentes disponibles en el sistema del usuario francés pueden no contener glifos japoneses. Podría sostenerse que no es demasiado importante, dado que los usuarios franceses no necesitan leer japonés. Por otro lado, quizá considera que los cuadrados vacíos son antiestéticos.

Si es su caso, quizá se sienta tentado de utilizar texto en gráficos para las opciones no latinas. Desgraciadamente, no es posible incluir gráficos en la lista de selección, pero algunos sitios agregan estos gráficos fuera del menú desplegable.

Por ejemplo:

Una lista desplegable con selecciones no latinas mostradas al costado.

No obstante, advierta que tratar texto no latino de esta manera quizá no resuelva todos los problemas. Ciertos caracteres latinos con acento, como 'čeština', pueden producir el mismo efecto para algunos usuarios que las fuentes latinas que sólo cubren los idiomas europeos occidentales.

Descripciones En algunos casos, quizá le convenga considerar seguir un nombre de idioma o país en escritura/idioma nativos con el nombre del idioma de la página actual.

Por ejemplo:

čeština (checo)
français (francés)
Deutsch (alemán)
日本語 (japonés)

El uso de paréntesis es útil dado que muestra con mayor claridad que es una aclaración.

Este método no siempre es necesario o deseable. Por otro lado, los usuarios pueden sentirse más cómodos con glifos de fuentes faltantes si ven

El texto "日本語 (japonés)", donde los caracteres en japonés se representan con cuadrados vacíos.

Observe, también, que los nombres del idioma de la página actual deberían traducirse en cada página en la que aparezcan, si los deja en inglés, pueden transmitir el mensaje equivocado.

Ordenamiento También está el problema de cómo ordena una lista multilingüe de nombres de idiomas o países. No es un problema específico de las listas de selección y no hay una respuesta simple.

Es difícil ordenar alfabéticamente, dado que varía según el idioma y también existe la posibilidad de que haya varios sistemas de escritura involucrados. Sería posible seguir el orden predeterminado establecido por el Algoritmo de Colación de Unicode, pero si es útil, intuitivo o reconocible para el usuario es otra cuestión.

Otras posibilidades incluyen ordenar la lista según el tamaño de su mercado, el tamaño de la región o la cantidad de personas que habla un idioma o por algún tipo de principio geográfico. Una vez más, si bien pueden brindar una lógica para el ordenamiento, ninguno de estos métodos son necesariamente útiles para el usuario, en especial, en el caso de las listas largas.

A propósito

No debería considerar que la negociación automática de contenido sea un reemplazo para proporcionar enlaces en una página. Siempre tiene sentido proporcionar enlaces dentro de la página para las ocasiones en las que las cosas no funcionen como se espera.

Este artículo se concentra específicamente en el uso del elemento select. Quizá algunos diseñadores prefieran usar JavaScript para simular listas desplegables. Eso puede contribuir en que el texto no lo limita: puede utilizar el texto en gráficos para evitar problemas de fuentes. Hay, por supuesto, otros problemas asociados con el uso de JavaScript.