Modal

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

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 abrir o componente é possível perceber qual ação abrirá a janela modal?
O nome do controle que abre a modal deixa claro o objetivo da ação?
A modal é realmente necessária para interromper o fluxo da pessoa?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao acionar o controle que abre a modal?
A modal aparece em camada acima do conteúdo principal e deixa claro que o restante da página está indisponível?
Existe controle visível para fechar ou cancelar a modal?

Projetando para uso com gestos

O controle de abertura e os controles internos possuem área tocável adequada?
Ao abrir a modal, o conteúdo principal não compete visualmente com a tarefa da modal?
É possível fechar a modal sem depender de gesto difícil ou oculto?

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

Ao abrir a modal, o foco vai para um ponto adequado dentro dela?
A navegação com TAB permanece dentro da modal enquanto ela estiver aberta?
É possível fechar a modal com ESC, quando isso não causar perda de dados sem confirmação?
Ao fechar a modal, o foco retorna para o componente que a abriu ou para um ponto coerente do fluxo?

Projetando para uso com leitor de telas

A modal é anunciada como diálogo?
O nome acessível do diálogo é anunciado claramente?
O conteúdo fora da modal fica indisponível para navegação enquanto a modal estiver aberta?
A mudança de foco e o fechamento são perceptíveis?

Métodos de Interação

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

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 de abertura exibe a modal.
Clicar no botão de fechar, cancelar ou ação principal executa a ação correspondente.
Clicar fora da modal só deve fechar o componente quando isso for uma decisão de produto segura e documentada.

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

ENTER ou SPACE aciona botões internos.
TAB e SHIFT+TAB circulam entre controles da modal.
ESC fecha a modal quando aplicável.

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

O diálogo deve ter nome acessível.
O foco deve ser movido para dentro da modal no momento da abertura.
O fundo deve ficar inerte ou indisponível para tecnologias assistivas.

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 modal

Navegação por teclado

QUANDO aciono o botão que abre a modal
VEJO que a modal é exibida acima do conteúdo principal
ENTÃO, quando uso a tecla Tab
VEJO que o foco permanece nos controles da modal
ENTÃO, quando fecho a modal
VEJO que o foco retorna para um ponto previsível do fluxo

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 que o componente é um diálogo.
- OUÇO o nome acessível da modal.
- OUÇO o conteúdo ou instrução principal da modal.
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 que o componente é um diálogo.
- OUÇO o nome acessível da modal.
- Consigo navegar pelos controles da modal sem acessar o conteúdo de fundo.
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 Modal.

Modais interrompem o fluxo e devem ser usadas apenas quando a interação exigir foco imediato.
Não esconda o botão de fechar quando a pessoa precisar poder cancelar a ação.
Confirme antes de fechar a modal caso a pessoa possa perder dados preenchidos.

Referências

Referências adicionais sobre componentes do tipo Modal.

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.