Accesibilidad

Patrones

Formularios

• Cada campo tiene una etiqueta visible unida al campo; el placeholder no reemplaza la etiqueta.
• Las instrucciones van antes del campo y se asocian con aria-describedby.

Errores

• Di qué pasó y cómo se arregla, con calma: «Tu servidor de Minecraft no responde en el puerto 25565. Ábrelo y Spawn reconecta solo.»
• El error va junto al campo, con texto y con el borde --pp-color-border-danger, nunca solo con color.
• Al enviar un formulario con errores, el foco va al primer campo con error.

Tablas

• Usa <table> con encabezados <th scope> y un título; no armes tablas con divs.
• Si la tabla es más ancha que la pantalla, envuélvela en una región con desplazamiento que reciba foco.

Estados vacíos

• Explica qué falta y cuál es el siguiente paso, en tono liviano: «Sin túneles todavía. Crea uno y llama a tu party.»

Carga

• Un botón que espera usa pending: conserva el foco, ignora nuevos clics y anuncia «cargando».
• Una región que se actualiza lleva aria-busy mientras carga y anuncia el resultado con aria-live="polite".