Dare a ogni controllo un nome significativo
Usa un pulsante per la riproduzione e un nome accessibile che ne descriva l’azione corrente. Durante la riproduzione l’azione diventa pausa e l’etichetta deve aggiornarsi. Escludi i tracciati SVG decorativi dall’albero di accessibilità, evitando annunci duplicati e privi di significato.
Il vantaggio dell’SVG è una geometria indipendente dal font emoji della piattaforma. Questa coerenza non garantisce l’accessibilità: un vettore senza etichetta rimane un controllo senza nome. Verifica anche che lo stato segua gli eventi del media. Se la richiesta di avvio fallisce, il pulsante non deve indicare che il video è partito.
Mantenere la pausa raggiungibile da touch e tastiera
Un player essenziale può nascondere i comandi durante il video per lasciare più spazio al contenuto. Se la pausa ricompare soltanto all’hover, chi usa il touch perde quel percorso. Prevedi un comando visibile o esplicitamente richiamabile e mostra i controlli quando ricevono il focus. Non chiedere di indovinare la posizione di un pulsante invisibile.
Verifica area utilizzabile, distanza dai comandi vicini e visibilità del focus sui dispositivi previsti. WCAG 2.2 comprende un criterio di dimensione minima con eccezioni, ma progettare esattamente sul limite numerico non garantisce comodità. Un piccolo controllo sopra immagini in movimento può essere difficile da trovare anche se la geometria soddisfa una regola.
Esaminare le informazioni del contenuto multimediale
Ascolta senza guardare, poi considera ciò che il video comunica soltanto attraverso le immagini. Il parlato richiede un’alternativa testuale appropriata; informazioni visive importanti possono richiedere descrizione o un’alternativa equivalente, secondo contenuto e criteri applicabili. Una trascrizione deve rappresentare il media reale, non essere un paragrafo dedotto dal nome del file.
La guida W3C distingue sottotitoli, trascrizioni e audiodescrizione perché risolvono problemi diversi. I sottotitoli possono includere suoni significativi oltre al dialogo. Anche un branding video con messaggi scritti sullo schermo deve rendere quelle informazioni disponibili a chi non vede l’animazione. La qualità grafica dei comandi non colma questo vuoto.
Conservare una base di funzionamento affidabile
I controlli personalizzati dovrebbero migliorare una base già utilizzabile. Quando possibile, mantieni i controlli nativi finché l’interfaccia personalizzata non è pronta e offri un link diretto al media in caso di errore. Evita che un problema JavaScript o di rete lasci un play permanentemente inerte.
Carica il video secondo l’intenzione della persona. Un poster con dimensioni riservate mantiene stabile la pagina mentre il media attende l’interazione. Evita audio inatteso. Se il video parte da solo o si ripete, valuta separatamente movimento e possibilità di interruzione. Rispettare il movimento ridotto della pagina non controlla automaticamente un filmato in riproduzione.
Verificare un compito completo di visione
Raggiungi play da tastiera, avvia, metti in pausa, cambia punto di navigazione e ritorna. Ripeti su touch con uno screen reader quando rientra nei dispositivi supportati. Verifica poi che sottotitoli o trascrizione si trovino realmente dal player. Un testo nascosto in una pagina scollegata serve poco a chi sta cercando di comprendere quel video.
Documenta cosa hai provato e cosa rimane aperto. Se i sottotitoli non sono stati confrontati con l’audio, non descrivere il player come pienamente conforme. Una consegna utile distingue comportamento dei controlli, alternative del contenuto e prove sui dispositivi: ciascuno richiede evidenze prima di sostenere una conformità più ampia.
- Le etichette corrispondono all’azione corrente.
- La pausa è raggiungibile senza hover.
- Le alternative testuali riflettono il contenuto reale.
- Errore e assenza di JavaScript hanno un percorso utilizzabile.
Riferimenti
Un problema simile nel tuo prodotto?
Raccontami il percorso da migliorare, il team e i vincoli. Sono un punto di partenza concreto per parlare di interfacce e sviluppo frontend.
Parliamone via email