Início/Sistema de projeto/Diálogo modal

Diálogo modal Sistema de projeto

Mantenha as decisões focadas e as linhas finais fáceis de encontrar.

6 verificações · 2 grupos de conteúdo

Conteúdo do checklist

Estrutura e significado Interação e usabilidade

Progresso da revisão

Estrutura e significado

Compare as informações e a apresentação no contexto de uso.

Indique claramente o propósitoUtilize títulos e descrições que indiquem a decisão ou informação a ser processada.Abra a caixa de diálogo com o teclado, passe por todos os controles e feche-a. Mantenha o foco na caixa de diálogo; ao fechar, retorna o nó aberto e preserva o contexto por trás.Exemplo A caixa de diálogo nomeia o rascunho e tem “Manter rascunho”, “Excluir rascunho”; Após cancelar, o foco retorna ao botão de exclusão original.Distinguindo a ação principalDê nomes específicos às confirmações e cancelamentos; explique as consequências se a ação for difícil de desfazer.O nó mestre deve dizer o que fará, principalmente com exclusão ou perda de dados; As ações de cancelamento precisam ser fáceis de encontrar, mas não têm o mesmo peso.Gerencie o foco no lugar certoDê foco à caixa de diálogo, mantenha Tab nela e retorne o foco para o botão abrir quando fechado.Escolha o foco inicial de acordo com a tarefa: área de conteúdo a ser lida ou primeiro campo a ser digitado. Quando fechado, retorna o controle correto que abriu o modal.

Interação e usabilidade

Experimente a operação, altere o status e continue trabalhando.

Há uma linha de fechamento claraFornecer fecho de botão facilmente identificável e Escape quando apropriado; Explique se você ainda não pode sair.Declarado antes de Escape ou pressionar em segundo plano pode remover dados não salvos; Não use uma posição pequena e fechada coberta por uma barra de rolagem ou teclado.Separado do conteúdo por trásTorna o plano de fundo claro e evita a manipulação do back-end enquanto a caixa de diálogo está aberta.O conteúdo por trás não deve ser clicado ou acessado pelo teclado; quando o modal é aberto, o estado de rolagem do plano de fundo deve ser mantido para renderização.Segure a operação quando a tela estiver estreitaPermita rolagens longas de conteúdo e certifique-se de que títulos e botões ainda estejam acessíveis.Teste conteúdo longo e teclado virtual; Títulos, erros e ações devem estar acessíveis em telas estreitas sem rolagem horizontal.

O progresso é salvo automaticamente neste navegador.

ORIENTAÇÕES

Como revisar

Verifique a posição do foco ao abrir e fechar

Abra a caixa de diálogo com o teclado, passe por todos os controles e feche-a. Mantenha o foco na caixa de diálogo; ao fechar, retorna o nó aberto e preserva o contexto por trás.

EXEMPLOS