ErrorSummary

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

Auf dieser Seite

Playground

Korrigiere 1 Feld zum Speichern

Schreib einen Namen für die Erinnerung

Fehler

Hintergrund

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

Fix 2 fields to save

Einen Namen für den Zeitplan schreiben
Eine Zeit zwischen 00:00 und 23:59 verwenden

NameWrite a name for the schedule

Time

Use a time between 00:00 and 23:59

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

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

Do and don't

Fix 1 field to save

Eine Zeitzone auswählen

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.

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.