Tabla

Ejemplo

Vista real construida con los archivos compilados de Ally.

<div class="ally-overflow-auto">
<table class="ally-table" data-ally-responsive>
<caption>Resultados de accesibilidad</caption>
<thead>
<tr>
<th scope="col">Regla</th>
<th scope="col">Estado</th>
<th scope="col">Elementos</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nombre accesible</td>
<td>
<span class="ally-badge ally-badge-success">Correcto</span>
</td>
<td>24</td>
</tr>
<tr>
<td>Contraste</td>
<td>
<span class="ally-badge ally-badge-warning">Revisar</span>
</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>

Contrato accesible

Propósito

Presenta datos con caption, headers y scope.

Clases CSS

.ally-table y modificadores de estado documentados.

HTML

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

ARIA

caption, th, scope y relaciones preservadas en responsive.

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-table">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>