Gráfico

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-chart">
<p id="page-grafico-chart-summary" data-ally-chart-summary>Hallazgos por categoría: HTML 8, formularios 5, color 3 y teclado 2.</p>
<canvas aria-describedby="page-grafico-chart-summary">
</canvas>
<div class="ally-overflow-auto">
<table class="ally-table">
<caption>Datos alternativos del gráfico</caption>
<thead>
<tr>
<th scope="col">Categoría</th>
<th scope="col">Hallazgos</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>8</td>
</tr>
<tr>
<td>Formularios</td>
<td>5</td>
</tr>
<tr>
<td>Color</td>
<td>3</td>
</tr>
<tr>
<td>Teclado</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>

Contrato accesible

Propósito

Presenta visualización con resumen y tabla alternativa.

Clases CSS

.ally-chart y modificadores de estado documentados.

HTML

Elemento semántico correspondiente, heading o nombre accesible y controles nativos.

ARIA

Resumen textual y tabla de datos alternativa.

Teclado

Tab sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.

Foco

Mantiene foco estable durante actualizaciones y navegación.

Estados

empty, loading, selected, current, complete y error.

Ally Debug

Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

Los estados visibles deben acompañarse de texto, atributos nativos o propiedades ARIA; nunca dependen solo del color.

Accesibilidad

No hacer

<div class="ally-chart">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>