MVP 1.3.0 · catálogo completo

Interfaces accesibles, listas para construir.

Ally es un framework web de HTML, CSS y JavaScript inspirado en la adopción simple de Bootstrap, con componentes accesibles y un motor de verificación integrado.

Comenzar con Ally Ver los 80 componentes

80componentes documentados

12columnas responsive

0dependencias obligatorias

1motor .ally-debug

Diseño del sistema

Una base técnica con experiencia visual completa

Cada componente conserva HTML semántico, foco visible, soporte de teclado y estados claros. La interfaz documental usa las mismas clases públicas de Ally que usarás en producción.

HTML primero

Landmarks, headings, labels y controles nativos antes de agregar ARIA.

CSS reutilizable

Tokens, layout, componentes, utilidades, temas y contraste configurable.

JS progresivo

Foco, teclado, estados y eventos sin destruir la semántica base.

Debug integrado

Scanner, score, checklist, resaltado y exportación para el desarrollo.

Componentes reales

Mira Ally funcionando

Abrir catálogo completo

Componentes listos para usar.

<div class="ally-tabs">
<div class="ally-tablist" role="tablist" aria-label="Información">
<button class="ally-tab" id="home-tabs-tab-1" type="button" role="tab" aria-selected="true" aria-controls="home-tabs-panel-1">Resumen</button>
<button class="ally-tab" id="home-tabs-tab-2" type="button" role="tab" aria-selected="false" aria-controls="home-tabs-panel-2">Accesibilidad</button>
</div>
<div class="ally-tabpanel" id="home-tabs-panel-1" role="tabpanel" aria-labelledby="home-tabs-tab-1">
<p>Componentes listos para usar.</p>
</div>
<div class="ally-tabpanel" id="home-tabs-panel-2" role="tabpanel" aria-labelledby="home-tabs-tab-2" hidden>
<p>Navegación por teclado y foco visible.</p>
</div>
</div>

Inicio rápido

Una hoja de estilos y un script

Copia la plantilla, abre el archivo en un navegador moderno y comienza a usar clases Ally.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://ally.accessibility.cl/dist/ally.min.css">
  <script defer src="https://ally.accessibility.cl/dist/ally.min.js">
</script>
</head>
<body>
  <a class="skip-link" href="#contenido">Saltar al contenido</a>
  <main id="contenido" class="box-d">
    <section class="ally-hero">
      <h1>Mi sitio con Ally</h1>
      <a class="ally-btn ally-btn-primary" href="#comenzar">Comenzar</a>
    </section>
  </main>
</body>
</html>

URL pública. Para instalar desde otro dominio usa una URL HTTPS versionada; consulta Instalación para GitHub/jsDelivr y hashes SRI.

Explorar