Un solo gráfico, escrito a mano. recharts se descartó: 5,4 MB por el único gráfico de la aplicación.
Barras apiladas sin librería. recharts pesa 5,4 MB instalados y entraba sólo como dependencia de Subframe para dibujar un gráfico en toda la aplicación: el histograma de auditoría. Subframe ya no está instalado, así que hoy esa dependencia no volvería ni por la puerta de atrás.
Ocho buckets, tres series apiladas de abajo arriba. El pico rotulado hace de eje Y: sin una referencia numérica la altura de una barra no se puede leer.
| time | Correctos | Denegados | Errores | Total |
|---|---|---|---|---|
| 00:00 | 12 | 1 | 0 | 13 |
| 03:00 | 8 | 0 | 0 | 8 |
| 06:00 | 41 | 3 | 1 | 45 |
| 09:00 | 128 | 11 | 4 | 143 |
| 12:00 | 96 | 6 | 0 | 102 |
| 15:00 | 143 | 9 | 7 | 159 |
| 18:00 | 61 | 2 | 1 | 64 |
| 21:00 | 22 | 0 | 0 | 22 |
El pico es esa misma barra, así que llega al tope y el hueco de escala mide cero. Y el pie del eje rotula una vez: primera y última son la misma, y «03:00 03:00» sugeriría un rango que no existe.
| time | Correctos | Denegados | Errores | Total |
|---|---|---|---|---|
| 03:00 | 34 | 5 | 2 | 41 |
Con cero filas no se dibuja un rectángulo vacío que parezca un fallo de carga: se dice con palabras. Tampoco se anuncia role="img" prometiendo un gráfico donde no hay ni un dato.
🔴 Aquí es donde un gráfico a mano miente. 5.000 correctos y un error dan al error el 0,02% de la altura: cero píxeles, y el gráfico afirmaría que esa hora no tuvo errores. Un segmento con valor > 0 nunca baja de 2px — una distorsión deliberada de la proporción, a cambio de no esconder el único píxel por el que existe una pantalla de auditoría. Los números sin distorsionar están en la tabla.
| time | Correctos | Denegados | Errores | Total |
|---|---|---|---|---|
| 09:00 | 5,000 | 0 | 1 | 5,001 |
| 10:00 | 4,820 | 2 | 0 | 4,822 |
| 11:00 | 12 | 0 | 0 | 12 |
| 12:00 | 4,990 | 1 | 3 | 4,994 |
No es un extra: WCAG 2.2 SC 1.1.1 pide una alternativa textual, y su Understanding nombra el caso —«a chart or diagram»— y remata «Where possible and practical, the actual data is provided in a table». La tabla se emite siempre; este botón sólo decide si además se ve. Ocultarla con sr-only la deja en el árbol de accesibilidad; display:none la borraría de los dos sitios.
| time | Correctos | Denegados | Errores | Total |
|---|---|---|---|---|
| 00:00 | 12 | 1 | 0 | 13 |
| 03:00 | 8 | 0 | 0 | 8 |
| 06:00 | 41 | 3 | 1 | 45 |
| 09:00 | 128 | 11 | 4 | 143 |
| 12:00 | 96 | 6 | 0 | 102 |
| 15:00 | 143 | 9 | 7 | 159 |
| 18:00 | 61 | 2 | 1 | 64 |
| 21:00 | 22 | 0 | 0 | 22 |