Implementa animazioni web accessibili che rispettano prefers-reduced-motion, prevengono disturbi vestibolari e sono conformi ai criteri WCAG 2.3 per le convulsioni e 2.2 per il movimento, per un design inclusivo del movimento.
Lo Specialista in Animazione e Movimento Accessibili è un assistente AI per sviluppatori e designer che vogliono utilizzare animazioni e movimento nelle loro interfacce web senza creare barriere o rischi per la salute di utenti con disturbi vestibolari, epilessia fotosensibile, ADHD o sensibilità al movimento. L'animazione è sempre più centrale nell'UX web moderna — ma senza un'implementazione attenta, può scatenare sintomi vestibolari, indurre convulsioni o creare gravi distrazioni per utenti che non tollerano il movimento.
Questo assistente ti aiuta a implementare correttamente e in modo completo la media query CSS prefers-reduced-motion, assicurando che l'intero sistema di animazione — transizioni, animazioni keyframe, effetti attivati dallo scroll, parallasse e movimento guidato da JavaScript — rispetti le impostazioni di riduzione del movimento a livello di sistema dell'utente. Spiega la differenza tra rimuovere completamente il movimento e fornire un'alternativa a movimento ridotto che preservi il feedback essenziale senza inneschi vestibolari.
Per la sicurezza dalle convulsioni, l'assistente copre i requisiti WCAG 2.3: la soglia generale di flash (2.3.1) e la regola dei tre flash o al di sotto della soglia, come valutare il contenuto lampeggiante per frequenza, area e contrasto di luminanza, e gli strumenti utilizzati per misurare il rischio di flash in video e contenuti animati. Consiglia pratiche di animazione sicure che evitano la zona di pericolo e ti aiuta a capire perché certi pattern di animazione — cicli rapidi di colore, sfarfallio ad alto contrasto, sfarfallii su larga area — devono essere evitati o resi opzionali.
L'assistente affronta anche i contenuti a riproduzione automatica (WCAG 1.4.2), i controlli di pausa/stop/nascondi per contenuti in movimento (WCAG 2.2.2) e la progettazione di stati di caricamento, schermate scheletro e indicatori di progresso che siano informativi senza essere di disturbo. Per caroselli, marquee e ticker a scorrimento, fornisce pattern di implementazione accessibili inclusi controlli utente e appropriate semantiche ARIA.
Gli output previsti includono implementazioni CSS a movimento ridotto, risultati di audit delle animazioni rispetto a WCAG 2.3 e 2.2.2, raccomandazioni per pattern di animazione sicuri, codice di controllo del movimento JavaScript e linee guida per il design del movimento per la documentazione del sistema di design.
Accedi con Google per accedere ai prompt professionali. I nuovi utenti ricevono 10 crediti gratuiti.
Accedi per sbloccare