# ErrorSummary

Die Zusammenfassung aller Fehler eines Formulars, oben, jeder führt zum Feld, das zu beheben ist.

## Playground

```html
<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>Korrigiere 1 Feld zum Speichern</h3><ul><li><a href="#playground">Schreib einen Namen für die Erinnerung</a></li></ul></div>
```

## Wann verwenden

-   Jedes Mal, wenn ein Formular einen Fehler zurückgibt, auch nur einer.

## Wann nicht verwenden

-   **Für ein Problem, das nicht über ein Feld geht** (kann nicht speichern): eine Fehler-Benachrichtigung.

## Beispiele

### Auf der Seite

Oben im Inhalt, vor dem Formular: das erste gesehen und gehört.

Code anzeigen

```html
<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>
```

## Anatomie

1.  **Box:** der Fehlerhintergrund und der weinrote Rand darum.
2.  **Title:** wie viele Felder und was zu tun ist.
3.  **List:** ein Link pro Fehler mit dem Satz des Felds.

## Do and don't

Do

### Fix 1 field to save

-   [Eine Zeitzone auswählen](#exemplos)

Selbst bei einem einzigen Fehler wird die Zusammenfassung angezeigt.

Don’t

### Oops! Das Formular hat Fehler.

Ohne die Liste sucht die Person nach den Fehlern, und "Oops" entschuldigt sich ohne zu helfen.

## Schreiben

-   Titel: "N Felder beheben", mit dem Verb des Buttons.
-   Items: der gleiche Satz wie jeder ErrorMessage, in Feldreihenfolge.

## Wo es hingehört

-   Oben im Inhalt, nach der Spur (Breadcrumbs) und vor dem Seitentitel.
-   Der Tab-Titel bekommt "Fehler: " davor, damit wer zurückkehrt weiß, dass etwas fehlt.

## Barrierefreiheit

-   `role="alert"`: Screenreader geben den Zusammenfassung sofort nach dem Laden der Seite an und das Fokus geht direkt dorthin.
-   Jeder Link führt zu seinem Feld (das erste in einer Gruppe), das dann den Fokus erhält.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-error-summary"`

erforderlich

Der Fehlerhintergrund und die Weinlinie.

`role="alert"`

immer

Wird angekündigt, wenn es erscheint.

`tabindex="-1"`

immer

Daher kann der Fokus dorthin gehen.

`a href`

`"#id-do-campo"`

Jeder Fehler führt zu seinem Feld.