ErrorSummary
El resumen de todos los errores de un formulario, arriba, cada uno llevando al campo que necesita reparación.
En esta página
Playground
Corrige 1 campo para guardar
Errores
Fondo
<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>Corrige 1 campo para guardar</h3><ul><li><a href="#playground">Escribe un nombre para el recordatorio</a></li></ul></div>Cuándo usarlo
- Cada vez que un formulario regrese con un error, incluso uno solo.
Cuándo no usarlo
- Para un problema que no sea sobre un campo (no pudo guardar): un error Notice.
Ejemplos
Fix 2 fields to save
Name
Time
En la página
Arriba del contenido, antes del formulario: lo primero que se ve y oye.
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>Anatomía
Fix 2 fields
- Box: el fondo de error y la línea roja alrededor.
- Title: cuántos campos y qué hacer.
- List: un enlace por error, con la frase del campo.
Hacer y no hacer
Don’t
¡Ups! El formulario tiene errores.
Sin la lista, la persona busca los errores, y "Oops" disculpa sin ayudar.
Escritura
- Título: "Fix N fields to save", con el verbo del botón.
- Items: la misma frase que cada ErrorMessage, en orden de campo.
Donde va
- En la parte superior del contenido, después de la pista (Breadcrumbs) y antes del encabezado de la página.
- El título de la pestaña obtiene "Error: " delante, así que quien vuelva a la pestaña sabe que algo falta.
Accesibilidad
role="alert": los lectores de pantalla anuncian el resumen tan pronto como carga la página y el foco va directamente a él.- Cada enlace lleva a su campo (el primero, en un grupo), que toma el foco.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-error-summary" | obligatorio | El fondo de error y la línea de vino. |
role="alert" | siempre | Anunciado cuando aparece. |
tabindex="-1" | siempre | Así el foco puede ir a él. |
a href | "#id-do-campo" | Cada error lleva a su campo. |