Teste a abertura de itens com o teclado
Use Tab e Enter ou Espaço para abrir e fechar cada item. O título precisa indicar o status aberto; O conteúdo oculto não deve manter os controles na ordem de tabulação.
Acordeão Sistema de projeto
Recolha o conteúdo e ainda facilite a localização e a navegação.
Conteúdo do checklist
Progresso da revisão
01
Estrutura e significado
Compare as informações e a apresentação no contexto de uso.
02
Interação e usabilidade
Experimente a operação, altere o status e continue trabalhando.
O progresso é salvo automaticamente neste navegador.
ORIENTAÇÕES
Como revisar
EXEMPLOS
Exemplos de uso
Abra a resposta na lista de perguntas frequentes
O título da pergunta é um botão com estado aberto ou fechado; Quando aberto, a resposta fica logo abaixo e ainda vinculada a esse item.
Variantes e casos de uso
Indicadores de expansão e recolhimento
Escolher um indicador para o painel aberto ou fechado; a direção do ícone deve refletir o estado real.
Abrir e fechar pelo teclado: verificar se o indicador e aria-expanded mudam juntos.
Exemplo O sinal de mais vira um sinal de menos quando a resposta está aberta.
Informações gerais
A seção aberta mostra o conteúdo no próprio local.
Configurações avançadas
A seção aberta mostra o conteúdo no próprio local.
Informações gerais
A seção aberta mostra o conteúdo no próprio local.
Configurações avançadas
A seção aberta mostra o conteúdo no próprio local.
Estados da linha
Distinguir os estados padrão, passagem do ponteiro, foco e aberto por meio da aparência e dos atributos de acessibilidade.
Percorrer os títulos com Tab e usar Enter: o painel aberto não deve perder o foco.
Exemplo O contorno de foco permanece visível na linha aberta, independentemente da cor de fundo.
Padrão
A seção aberta mostra o conteúdo no próprio local.
Selecionado
A seção aberta mostra o conteúdo no próprio local.
Atividade
A seção aberta mostra o conteúdo no próprio local.
Indisponível
A seção aberta mostra o conteúdo no próprio local.
Separação dos itens
Usar divisórias, espaçamento ou blocos de fundo conforme a relação entre os conteúdos.
Abrir várias respostas longas: o espaçamento deve deixar claro a qual título cada resposta pertence.
Exemplo Um grupo de perguntas usa divisórias; outro tem um título próprio.
Informações gerais
A seção aberta mostra o conteúdo no próprio local.
Configurações avançadas
A seção aberta mostra o conteúdo no próprio local.
Informações gerais
A seção aberta mostra o conteúdo no próprio local.
Configurações avançadas
A seção aberta mostra o conteúdo no próprio local.