Radio Button

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Guia rápido para designers

Sempre avalie o contexto da aplicação, mesmo com a orientação tendo um padrão. Design de interação documenta a intenção. O funcionamento deve ser verificado na implementação.

Quando usar

Use quando a pessoa deve escolher uma única opção dentro de um grupo.

O que desenhar

Mostre o nome do grupo, rótulos e estados selecionado, não selecionado, foco e desabilitado.

Como se comporta

Selecionar uma opção desmarca a anterior. Tab entra no grupo; as setas percorrem e selecionam opções. Clicar novamente não desmarca a selecionada.

O que documentar no Figma

Defina as opções do mesmo grupo e indique qualquer escolha inicial.

Como revisar

Confira se o objetivo e os estados são claros em telas pequenas e grandes, com ampliação. Verifique os comportamentos documentados na implementação, incluindo teclado e leitor de telas quando aplicáveis.

Orientações completas

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes interativos do tipo Radio Button.

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 se trata de escolha única dentro de um grupo?
O rótulo do grupo comunica claramente a pergunta ou decisão a ser feita?
É possível identificar visualmente qual opção está selecionada?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse no radio ou em seu rótulo?
Ao clicar no rótulo, a opção correspondente é selecionada?
Ao selecionar uma opção, as demais opções do mesmo grupo são desmarcadas?

Projetando para uso com gestos

O alvo tocável inclui o rótulo associado?
Ao tocar em uma opção, ela se torna a única selecionada no grupo?
A área de toque é confortável em telas pequenas?

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

TAB leva o foco para a opção selecionada ou para a primeira opção quando nenhuma estiver selecionada?
As setas direcionais movem o foco e alteram a seleção dentro do grupo?
SPACE seleciona a opção em foco?

Projetando para uso com leitor de telas

O rótulo do grupo é anunciado?
Cada opção é anunciada como radio button?
O estado selecionado ou não selecionado é anunciado?
A posição da opção no grupo é perceptível quando suportada?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Radio Button.

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 controle ou no rótulo seleciona a opção.
Selecionar uma opção desmarca as demais opções com o mesmo nome de grupo.
Uma opção já selecionada não é desmarcada pelo segundo clique.

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

TAB entra no grupo uma vez.
Setas direcionais navegam e selecionam opções do grupo.
SPACE seleciona a opção em foco quando necessário.

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

O grupo deve ter nome acessível, preferencialmente com fieldset e legend.
Cada opção deve ter rótulo programaticamente associado.
O estado selecionado deve ser exposto semanticamente.

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)).

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

Navegação por teclado

QUANDO uso a tecla Tab para mover o foco para um grupo de radio buttons
O foco que VEJO é fortemente indicado visualmente na opção selecionada ou na primeira opção
ENTÃO, quando uso a tecla Space
VEJO que a opção em foco é selecionada
ENTÃO, quando uso as setas direcionais
VEJO que a seleção muda dentro do grupo

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 grupo.
- OUÇO que cada item é uma opção de radio.
- OUÇO seu estado atual, como selecionado ou não selecionado.
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 grupo.
- OUÇO que cada item é uma opção de radio.
- OUÇO seu estado atual, como selecionado ou não selecionado.
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 Radio Button.

Use radio button quando apenas uma opção do grupo puder ser escolhida.
Não coloque controles interativos dentro de rótulos de radio sem uma estratégia clara de foco e leitura.
O mesmo atributo name é essencial para criar o grupo em HTML nativo.

Referências

Referências adicionais sobre componentes do tipo Radio Button.

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.