Multimedia

Reproductor multimedia

Reproduce audio/video con controles y captions.

.ally-mediaMVP 1.0Accesible por defecto

Ejemplo

Vista real construida con los archivos compilados de Ally.

0 de 0 segundos

<div class="ally-media">
<video controls preload="metadata" aria-label="Demostración de Ally" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%234f46d8'/%3E%3Ctext x='50%25' y='52%25' text-anchor='middle' fill='white' font-family='system-ui' font-size='34'%3EDemo multimedia Ally%3C/text%3E%3C/svg%3E">
<track kind="captions" srclang="es" label="Español">
</video>
<p data-ally-media-status aria-live="polite">0 de 0 segundos</p>
</div>

Contrato accesible

Propósito: Reproduce audio/video con controles y captions.
Clases CSS: .ally-media y modificadores de estado documentados.
HTML: Elemento semántico correspondiente, heading o nombre accesible y controles nativos.
ARIA: Controles, captions/subtítulos cuando aplica.
Teclado: Usa controles nativos accesibles del reproductor.
Foco: Foco visible y predecible; overlays devuelven el foco al control que los abrió.
Estados: closed, open, active, selected, expanded, disabled y loading según aplique.
Ally Debug: Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

defaultfocusactivedisablederror

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

Prueba obligatoria: semántica, teclado, foco visible, zoom al 200%, contraste, reduced motion y lector de pantalla.

No hacer

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

Un contenedor genérico con una clase visual no reemplaza la semántica, el nombre accesible ni la gestión de estados.