Allyby Accessibility.cl v1.3.0
Ctrl /
Componentes
Catálogo visual completo

Todos los componentes de Ally

Los 80 componentes del MVP se muestran renderizados con las clases públicas del framework. Usa el filtro o abre la ficha individual para ver código, estados y contrato accesible.

80 componentes visibles.
Grupo

Estructura y layout

9 componentes

Contenedor

Agrupa contenido y controla el ancho sin alterar el orden del DOM.

.box-d / .box-f

Contenido dentro de .box-d

Contenido fluido con .box-f

Grilla

Organiza contenido en una grilla responsive de 12 columnas.

.ally-grid
4 columnas
4 columnas
4 columnas

Fila

Apila elementos horizontalmente con wrap y gap.

.stack-r
HTMLCSSJavaScript

Columna

Distribuye contenido en el sistema responsive de 12 columnas.

.col-ally*
Columna principal

Sección

Agrupa un tema identificable con encabezado lógico.

.ally-section

Sección accesible

Agrupa un tema identificable mediante un encabezado.

Header

Representa el encabezado del documento o sección.

.ally-header
Ally

Footer

Representa el pie del documento o sección.

.ally-footer
AllyFramework accesible

Dashboard

Agrupa widgets en regiones con encabezados.

.ally-dashboard
Correcto

96%

Score accesible

Revisión

4

Advertencias

Checks

42

Validaciones

Grupo

Contenido

12 componentes

Hero

Presenta el mensaje principal y su CTA.

.ally-hero
Ally 1.0

Construye interfaces accesibles desde el inicio

HTML, CSS y JavaScript progresivo con auditoría integrada.

ComenzarVer componentes

Banner

Presenta información destacada o estado.

.ally-banner

Tarjeta

Agrupa contenido relacionado con heading y acciones.

.ally-card
Composición abstracta de Ally
Componente

Tarjeta accesible

Contenido agrupado con encabezado y acción clara.

Ver detalle

Panel

Agrupa contenido en una región visual titulada.

.ally-panel

Resumen de auditoría

3 errores, 5 advertencias y 42 comprobaciones correctas.

CTA

Representa una acción o destino principal con elemento nativo.

.ally-cta
Leer documentación

Icono

Presenta un icono decorativo o informativo con decisión explícita.

.ally-icon
Ícono decorativo oculto a tecnologías asistivas

Badge

Presenta estado breve sin depender solo del color.

.ally-badge
PredeterminadoAprobadoPendienteError

Avatar

Representa una persona, decorativo si ya existe nombre adyacente.

.ally-avatar
Alex Rivera
Diseño de producto

Divider

Separa contenido visual o semánticamente.

.ally-divider

Contenido superior

Contenido inferior

Chip

Representa una etiqueta, filtro o acción removible.

.ally-chip
Accesibilidad WCAG 2.2

Estado vacío

Explica que no hay datos y propone una acción siguiente.

.ally-empty
Sin resultados

No encontramos proyectos

Crea tu primer proyecto o ajusta los filtros activos.

Página 404

Explica el error y ofrece navegación o búsqueda.

.ally-error-404
Error 404

Página no encontrada

La dirección puede haber cambiado o ya no estar disponible.

Volver al inicio
Grupo

Interacción

12 componentes

Modal

Presenta un diálogo con foco atrapado, Escape y retorno de foco.

.ally-modal

Acordeón

Expande y contrae paneles mediante botones.

.ally-accordion

Un framework frontend accesible con auditoría integrada.

Pestañas

Alterna paneles con roles tablist/tab/tabpanel.

.ally-tabs

Componentes listos para usar.

Botón

Ejecuta una acción con nombre y type explícitos.

.ally-btn

Tooltip

Muestra ayuda breve con hover y foco; no contiene información crítica.

.ally-tooltip

Popover

Muestra contenido contextual con cierre y foco.

.ally-popover

Dropdown de acciones

Muestra acciones relacionadas con navegación por teclado.

.ally-actions

Confirmación

Solicita confirmación explícita para una acción.

.ally-confirm

Botón flotante

Expone una acción persistente con nombre accesible.

.ally-fab

Sticky bar

Mantiene información visible sin cubrir contenido o foco.

.ally-sticky
Grupo

Formularios

19 componentes

Formulario

Agrupa controles, validación y mensajes asociados.

.ally-form

Label

Nombra explícitamente un control.

.ally-label

Usa un nombre breve y descriptivo.

Input

Recibe texto con label, autocomplete y error asociado.

.ally-input

Textarea

Recibe texto multilínea con contador opcional.

.ally-textarea
0 de 180 caracteres

Número

Recibe valores numéricos con límites.

.ally-number

Contraseña

Recibe contraseña y permite mostrar/ocultar con estado.

.ally-password

Checkbox

Permite selección binaria mediante input nativo.

.ally-checkbox
Preferencias

Radio

Permite selección única dentro de fieldset/legend.

.ally-radio
Plan de revisión

Select

Permite seleccionar una opción con label.

.ally-select

Switch

Representa estado binario con checkbox nativo.

.ally-switch

Datepicker

Selecciona una fecha usando control nativo como base.

.ally-datepicker

Timepicker

Selecciona una hora usando control nativo como base.

.ally-timepicker

Rango

Selecciona un valor y anuncia su valor textual.

.ally-range
90%

File upload

Selecciona archivos con instrucciones y estado.

.ally-file

PDF o HTML, máximo 5 MB.

Ningún archivo seleccionado.

Búsqueda

Busca mediante input type search y submit claro.

.ally-search

Autocompletado

Sugiere opciones con patrón combobox/listbox.

.ally-autocomplete

Filtro

Aplica filtros y anuncia cambios.

.ally-filter

Ordenador

Cambia el orden y anuncia el criterio aplicado.

.ally-sort

Mensaje de validación

Describe errores con aria-describedby y role alert.

.ally-validation

Ingresa un correo con formato válido.

Grupo

Feedback

6 componentes

Alerta

Comunica estado con role alert/status según urgencia.

.ally-alert
Auditoría completada.
El reporte está listo.

Toast

Comunica una actualización breve mediante live region.

.ally-toast

Progress bar

Expone progreso con elemento progress o role progressbar.

.ally-progress
68%

Spinner

Indica carga con texto accesible.

.ally-spinner

Skeleton

Indica carga con aria-busy y alternativa textual.

.ally-skeleton
Cargando contenido

Contador

Actualiza una cantidad mediante output/live region.

.ally-counter
2
Grupo

Datos

8 componentes

Tabla

Presenta datos con caption, headers y scope.

.ally-table
Resultados de accesibilidad
ReglaEstadoElementos
Nombre accesibleCorrecto24
ContrasteRevisar3

Lista

Presenta una colección con ul/ol semántica.

.ally-list
  • HTML semántico
    Usa elementos nativos primero.
  • Teclado
    Mantén un orden de foco lógico.

Lista de selección

Permite seleccionar opciones con teclado.

.ally-selection-list
  • Headings
  • Imágenes
  • Formularios

Stepper

Presenta pasos con estado actual y completado.

.ally-stepper
  1. Configurar
  2. Revisar
  3. Finalizar

Configurar proyecto

Define el alcance de la auditoría.

Timeline

Presenta eventos en orden cronológico semántico.

.ally-timeline

  1. Proyecto creado

    Se definió el alcance inicial.

  2. Auditoría ejecutada

    Se detectaron 4 hallazgos.

Calendario

Presenta una grilla de fechas navegable con teclado.

.ally-calendar

Agosto 2026

Gráfico

Presenta visualización con resumen y tabla alternativa.

.ally-chart

Hallazgos por categoría: HTML 8, formularios 5, color 3 y teclado 2.

Datos alternativos del gráfico
CategoríaHallazgos
HTML8
Formularios5
Color3
Teclado2
Grupo

Multimedia

4 componentes

Carrusel

Alterna diapositivas con controles, pausa y teclado.

.ally-carousel
1 de 3

HTML primero

La semántica es la base del componente.

Galería

Presenta miniaturas con selección y vista ampliada.

.ally-gallery
Composición abstracta morada y azulComposición abstracta azul y verdeComposición abstracta violeta
Grupo

Especiales

3 componentes

Mapa interactivo

Presenta ubicaciones con controles de teclado y lista alternativa.

.ally-map
  • 1. Santiago — Avenida Principal 123
  • 2. Valparaíso — Calle Puerto 45

Cookie banner

Solicita consentimiento con aceptar, rechazar y preferencias.

.ally-cookie

Tu privacidad importa

Usamos cookies necesarias y, con tu permiso, analíticas.

Chat

Presenta conversación con historial role log y control abrir/cerrar.

.ally-chat