A tecla de acesso 'n' salta para outro local na navegação da página. Saltar para o início do conteúdo.

Este documento é uma tradução. Se ocorrerem discrepâncias ou erros, o original em inglês mais recente terá precedência. Os direitos autorais originais pertencem ao W3C, como indicado no final da página.

Tradutor: Maurício Samy Silva

s_gotoW3cHome Internacionalização
 

Usando <select> para lincar à um conteúdo específico

Público alvo: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), Web project managers, and anyone who wants to better understand how to use the select element for navigation to localized or regional versions of a site.

Pergunta

Quais são as melhores práticas para uso de menus do tipo pull-down baseados no elemento select com a finalidade de redirecionar para um conteúdo específico?

Informações

Com o crescimento da construção de web sites de características específicas para uma mesma companhia, cresce também em importância a necessidade de se consstruir mecanismos de navegação amigáveis.

Um dos mais populares destes mecanismos é o menu tipo pull-down que se utiliza do elemento select e fica localizado na home page fornecendo links para diferentes versões de um mesmo conteúdo. A lista de seleção do menu não precisa ficar restrita à home page, mas poderá estar localizada em cada uma das páginas, permitindo aos usuários passar de uma versão traduzida para uma versão regional do documento.

O conteúdo específico lincado poderá ser uma página alternativa do site em outro país, uma versão traduzida da própria página, etc. Neste artigo não entraremos em discussão de como organizar a informação (isto é traduções versus versões regionais do site) mas nos concentraremos nos prós e contras, bem como nas melhores práticas de uso de listas de seleção para a escolha de conteúdos. Existem vários outros aspectos que envolvem as técnicas de navegação global e que serão vistos em outros artigos.

Resposta

Notar que estas recomendações não se aplicam a listas de seleção usadas em formulários. Por exemplo: se você está preenchendo um formulário e deve selecionar um país ou um endereço de residência ou um idioma em uma lista, estes itens da lista devem estar escritos na língua em que foi escrita a página.

Afinal, devo usar uma lista do tipo <select> ?

Menus do tipo pull-downs são bastante interessantes quando se tem problemas de restrições de espaço na página. Contudo menu pull-down nem sempre é a melhor solução para um esquema de navegação global e a decisão sobre seu uso terá que ser tomada em função do web site em questão. As seguintes observações podem ajudar na decisão:

A grande vantagem do uso de pull-downs é a de ocupar um espaço reduzido.

As desvantagens do uso de select para links à conteudos ou sites específicos são:

Se o seu site possui apenas umas poucas versões específicas, muito provavelmente será melhor evitar o uso de menu pull-down e simplesmente incluir links diretamente na página. Este procedimento lhe trará maior flexibilidade, possibilitará incluir gráficos para sustituir textos co caracteres estrangeiros, evitará os rótulos de lista que não sejam dependentes de idioma, além de permitir ao usuário encontrar muito mais rapidamente os links na página.

Existem outras técnicas. Por exemplo: demarcações em mapas podem ser usadas para selecionar uma região ou mesmo um país para direcionamento a um site específico.

Se o seu menu pull-down linca para mais do que 20 sites ou páginas, você deverá considerar a usabilidade para aqueles usuários que terão que rolar até o final da lista para chegar ao link. Se isto se tornar um problema, você deverá considerar a construção de uma página específica no mesmo nível da home page para servir como uma ponte de links. Se você esta lincando entre versões localizadas de páginas específicas, esta solução talvez não seja muito prática.

Boas práticas

Se você decidir usar um menu pull-down, aqui estão algumas boas práticas para você ter em mente.

Localização. Coloque o menu pull-down no topo ou próximo ao topo da página. Ali ele estará em um lugar de grande visibilidade, aumentando as chances do usuário vê-lo. Estudos demonstram que em escritas da esquerda para a direita o posicionamento em cima e à direita aumenta a visibilidade. Além disso, um crescente número de web sites tem localizado suas pontes de links globais naquela posição, fazendo com que os usuários já esperem encontrá-las ali.

Certamente evite colocar a lista no final da página, pois assim ela provalvelmente não aparecerá para o usuário quando a página for carregada (tenha em mente que a quantidade de informação da página que aparecerá no carregamento para cada usuário varia com o agente usado).

Rotulando. Use um gráfico para servir de rótulo para seu menu pull-down. Você não deve supor que um usuário não fluente em inglês entenda "Select language". Ícones universais de comunicação são reconhecidos por qualquer pessoa independentemente da língua que elas falem. Num mundo ideal deveria existir uma quantidade razoável de tais símbolos. Este tempo ainda não chegou, entretando os ícones globais estão se popularizando cada vez mais.

Exemplo de possíveis gráficos incluem ícones globais, ícones faciais, caracteres alfabéticos em variados scripts (especialmente úteis para lincar para traduções), etc.

O texto do atributo alt para tais gráficos é irrelevante. Você poderia imaginar que o texto deveria ser em todas as línguas, ou não ser em uma líingua particular, por razões de acessibilidade, mas na realidade usuários que se utilizam de leitores de tela deverão estar aptos a passar o texto pull-down e encontrar o link certo.

Usando o atributo size Em alguns casos será interessante usar o atributo size para apresentar o primeiro conjunto de itens da lista - particularmente se a lista for muito longa. Isto sugere ao usuário que trata-se de uma coleção de línguas/regiões, e em consequência dispensa o uso de um rótulo para a lista. Eis a seguir um exemplo:

Traduza as opções. Traduza as opções dos itens do menu, para a língua do documento lincado. No lugar de incluir um link no menu pull-down escrito "francês" o link deverá ser escrito "français"; e para um país alternativo, no lugar de escrever "Alemanha" o link deverá ser escrito "Deutschland".

Atenção para as regras de uso de maiúsculas em nomes de países e línguas no ídioma estrangeiro. Notar como a tradução para o idioma "francês" é "français" e permanece com "f" minúsculo.

Codificando Para representar uma mistura de caracteres para línguas não latinas, tais como árabe, russo e japonês, você precisa de um meio para representar todos os caracteres.

Preferivelmente deverá ser usado UTF-8 (Unicode) para codificar sua página uma vez que este conjunto abrange todos os caracteres que você necessitará. Se você não puder usar UTF-8, então deverá usar escapes para representar os caracteres que não são suportados pela sua página.

Fontes Você deve também pensar sobre a não disponibilidade de fontes no equipamento do usuário. Esteja ciente de que um usuário na França por exemplo poderá ver uma série de caixinhas vazias no lugar de um texto em japonês enquanto um usuário no Japão verá o texto sem problemas. Isto é porque as fontes instaladas no equipamento do usuário francês não contém os glifos da escrita japonesa. Alguém poderá argumentar que isto não é tão importante uma vez que um usuário francês não precisa estar apto a ler japonês. Por outro lado você poderá argumentar que caixinhas vazias agridem o design da página.

Se você considera que caixinhas vazias agridem o design, poderá ficar tentado a usar gráficos para substituir os caracteres não latinos. Infelizmente isto não será possível pois não se pode inserir gráficos em opções de uma lista de menu pull-down, contudo alguns sites usam tais gráficos fora da lista de opções.

Por exemplo:

Contudo esteja ciente de que usando este artíficio gráfico para textos não latinos não solucionará todos os problemas. Certos caracteres latinos acentuados, tais como os que encontramos em 'čeština' poderão produzir os mesmos efeitos para usuários com fontes latinas instaladas que só comportem linguagem Western European.

Descrições Em alguns casos você pode considerar o fornecimento de uma alternativa, escrita na linguagem da página corrente, para o nome da língua nativa.

Por exemplo:

čeština (checo)
français (francês)
deutsch (alemão)
日本語 (japonês)

O uso do parentesis é uma boa escolha porque isto demonstra claramente que se trata de uma informação.

Este artifício nem sempre é necessário ou mesmo desejável. Por outro lado alguns usuários sentir-se-ão mais confortáveis com uma notação como mostrada a seguir.

The text "日本語 (Japanese)", where Japanese characters are represented by blank squares.

Notar também que os nomes grafados na linguagem da página atual devem ser traduzidos em cada página onde eles apareçam - se você deixá-los em português passaram uma mensagem errada.

Ordenação Há ainda a questão de como devam ser ordenadas as listagens de nomes de países ou de linguagens. Este não é um item específico de listas de seleção e também não existe uma resposta simples para esta questão.

É difícil aplicar-se uma ordem alfabética, já que esta varia de linguagem para linguagem e ainda há o envolvimento de múltiplos scripts de linguagem. É possível seguir a ordem padronizada pelo Unicode Collation Algorithm, contudo embora esta seja uma solução viável, não é tão intiutiva e conhecida para o usuário.

Outras possibilidades são as de ordenação baseado na importância de mercado, no tamanho da região, na quantidade de pessoas que falam a língua ou por algum príncipio geográfico qualquer. Novamente, embora estas sejam soluções viáveis, nem sempre são conhecidas pelo usuário, especialmente se as listagens forem longas.

This page and Wikipedia list language alternatives by (English) alphabetic order of the associated language tags. So, for example, German (de) comes before English (en), and Spanish (es) comes before French (fr). This assumes that the user can either find his language easily by scanning (which is the case for this page) or knows the tag for their language and can guess easily enough that that has been used for the ordering.

A propósito

Você não deverá considerar automaticamente a negociação de conteúdos para direcionar os links a uma página. Nas ocasiões em que as coisas não funcionam como esperado é sempre mais sensato fornecer links nas próprias páginas.

Este artigo está especialmente focado no uso de elemento select. Alguns designers podem preferir usar JavaScript para simular listas do tipo pull-down. Esta solução pode ser úti,l uma vez que você não ficará limitado a textos e poderá usar gráficos para evitar os problemas de fontes em outras línguagens. É certo porém que existem outros potenciais problemas associados ao uso do JavaScript.

Dê-nos a sua opinião (em inglês).

Subscreva uma alimentação RSS.

Novos recursos

Notícias na página principal

Twitter (Notícias na página principal)

‎@webi18n

Leitura complementar

Autor: Richard Ishida, W3C, John Yunker, Byte Level Research. Tradutor: Maurício Samy Silva.

XHTML 1.0 válida!
CSS válido!
Codificado em UTF-8!

Traduzido de conteúdo em inglês datado de 2014-09-29T12:28Z. Última versão traduzida modificada 2014-09-29T12:28Z GMT

Para obter o histórico de alterações do documento, faça uma busca por qa-navigation-select no blog da i18n.