ErrorSummary
O resumo de todos os erros de um formulário, no topo, cada um levando ao campo que precisa de correção.
Nesta página
Playground
Corrija 1 campo para salvar
Erros
Fundo
<div class="feitio-error-summary" role="alert" tabindex="-1"><h3><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Corrija 1 campo para salvar</h3><ul><li><a href="#playground">Escreva um nome para o lembrete</a></li></ul></div>Quando usar
- Sempre que um formulário voltar com erro, mesmo que seja um só.
Quando não usar
- Para um problema que não é de campo (não deu para salvar): Notice com erro.
Exemplos
Corrija 2 campos para salvar
Nome
Horário
Na página
No topo do conteúdo, antes do formulário: é a primeira coisa que se vê e que se ouve.
Mostrar código
<div class="feitio-error-summary" role="alert" tabindex="-1">
<h2>…Corrija 2 campos para salvar</h2>
<ul>
<li><a href="#nome">Escreva um nome para o agendamento</a></li>
<li><a href="#hora">Use um horário entre 00:00 e 23:59</a></li>
</ul>
</div>Anatomia
Corrija 2 campos
- Caixa: o fundo do erro e o traço em vinho, em volta.
- Título: quantos campos e o que fazer.
- Lista: um link por erro, com a mesma frase do campo.
Bons e maus padrões
Não faça
Ops! Há erros no formulário.
Sem a lista, a pessoa caça os erros, e o "Ops" pede desculpa sem ajudar.
Como escrever
- Título: "Corrija N campos para salvar", com o verbo do botão.
- Itens: a mesma frase de cada ErrorMessage, na ordem dos campos.
Onde fica
- No topo do conteúdo, depois da trilha (Breadcrumbs) e antes do título da página.
- O título da aba ganha "Erro: " na frente, para quem volta para a aba saber que algo falta.
Acessibilidade
role="alert": o leitor de tela anuncia o resumo assim que a página carrega, e o foco vai direto para ele.- Cada link leva ao campo (ao primeiro, num grupo), que recebe o foco.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-error-summary" | obrigatório | O fundo do erro e o traço em vinho. |
role="alert" | sempre | Anunciado ao aparecer. |
tabindex="-1" | sempre | Para o foco ir até ele. |
a href | "#id-do-campo" | Cada erro leva ao seu campo. |