ErrorMessage
El mensaje que indica qué corregir en un campo, justo debajo.
En esta página
Playground
Fondo
<div class="feitio-field"><label class="feitio-label" for="pg-em">Hora</label><input class="feitio-input" aria-invalid="true" aria-describedby="pg-em-error" data-width="10" id="pg-em" value="25:00"><span class="feitio-error-message" id="pg-em-error"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Usa una hora entre 00:00 y 23:59</span></div>Cuándo usarlo
- Cuando un campo regresa con un problema: uno por campo, siempre con ErrorSummary arriba.
Cuándo no usarlo
- Para un problema de toda la página (la conexión se ha perdido): una error Notice.
- Mientras la persona sigue escribiendo: no marque un error antes de que envíe.
Ejemplos
Time
A continuación del campo
Vino, en negrita, con el icono, space-1 debajo del control.
Mostrar código
<div class="feitio-field">
…
<span class="feitio-error-message" id="hora-erro">
<svg class="feitio-icon" aria-hidden="true">…</svg>Use um horário entre 00:00 e 23:59
</span>
</div>Hacer y no hacer
Do
Dice exactamente qué hacer para hacerlo bien.
Don’t
"Inválido" no dice qué está mal y el signo de exclamación grita.
Escritura
- Diga cómo hacerlo bien, no solo que está mal.
- La misma frase en el campo y en el resumen arriba.
- Sin "por favor", sin disculpa, sin signo de exclamación.
Accesibilidad
- Vinculado al campo a través de
aria-describedby, y el campo obtienearia-invalid="true". - Color, icon y palabra: el error lee sin distinguir la uva.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-error-message" | obligatorio | Uva, en negrita, con el icono. |
id | texto | Así el campo puede apuntar a él con aria-describedby. |