Select (Combo)

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes interativos do tipo Select (Combo).

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de interagir é possível perceber que existe uma lista de opções para escolha?
O rótulo comunica claramente o tipo de valor esperado?
O valor selecionado ou placeholder é visualmente compreensível?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse no campo?
Ao clicar no campo, a lista de opções é aberta ou o seletor nativo é exibido?
Ao selecionar uma opção, o valor visível é atualizado?

Projetando para uso com gestos

O campo possui área de toque confortável?
Ao tocar no campo, o seletor ou lista de opções é exibido?
Ao escolher uma opção, o valor selecionado fica claro?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Há foco visível no campo?
É possível abrir e alterar a seleção usando teclado conforme o padrão do navegador/sistema?
É possível sair do campo e continuar o fluxo sem prender o foco?

Projetando para uso com leitor de telas

O rótulo do select é anunciado corretamente?
O valor selecionado é anunciado?
O estado obrigatório, inválido ou desabilitado é anunciado quando aplicável?
As opções são navegáveis e selecionáveis com tecnologia assistiva?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Select (Combo).

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Clicar no campo abre o seletor ou lista de opções.
Clicar em uma opção atualiza o valor selecionado.
Clicar fora do seletor deve fechar a lista quando aplicável.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

TAB move o foco para o campo.
Setas direcionais navegam ou alteram opções conforme comportamento nativo do navegador.
ENTER, SPACE ou combinações do sistema podem abrir ou confirmar seleção conforme plataforma.

Interação com teclado (ou gestos) + leitor de telas

O campo deve ter rótulo programaticamente associado.
Ajuda e erro devem estar associados ao campo quando existirem.
Select customizado deve seguir padrão próprio de combobox ou listbox, não apenas imitar visualmente o nativo.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)). , Ref 2 (abre em uma nova aba).

Cenário: Considerando que estou em uma página que contém select

Navegação por teclado

QUANDO uso a tecla Tab para mover o foco para um select
O foco que VEJO é fortemente indicado visualmente
ENTÃO, quando uso teclado para abrir ou navegar pelas opções
VEJO que as opções podem ser percorridas
ENTÃO, quando seleciono uma opção
VEJO que o valor do campo é atualizado

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e movo o foco para o componente
- OUÇO o rótulo e a finalidade do campo.
- OUÇO o valor selecionado.
- OUÇO que existem opções selecionáveis.
ENTÃO, quando aciono ou altero o componente
OUÇO ou percebo que o estado, valor, conteúdo ou ação correspondente foi atualizado.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para focar no componente, acontece o seguinte:
- OUÇO o rótulo e a finalidade do campo.
- OUÇO o valor selecionado.
- Consigo abrir o seletor e escolher uma opção com os gestos do sistema.
ENTÃO, quando eu toco duas vezes ou uso o gesto adequado para ativar o componente
OUÇO ou percebo que o estado, valor, conteúdo ou ação correspondente foi atualizado.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Select (Combo).

Esta página considera o uso de select nativo ou componente equivalente de seleção de formulário.
Combobox customizado, listbox e autocomplete possuem comportamentos próprios e precisam de documentação específica.
Não use placeholder como substituto de rótulo persistente.

Referências

Referências adicionais sobre componentes do tipo Select (Combo).

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.