Animazione accessibile - Progettazione nel browser
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Ti diamo il benvenuto nella progettazione nel browser con il nostro conduttore Una Kravets. I tocchi interattivi possono essere ottimi per comprendere gli utenti in un ambiente digitale, ma possono anche lasciare alcuni di loro disorientati e frustrati, il contrario dell'effetto previsto.
Parliamo quindi di come possiamo evitarlo e di come possiamo essere sicuri di includere i nostri simpatici SVG animati e il passaggio del pulsante, garantendo allo stesso tempo che anche gli utenti che potrebbero avere un po' di nausea quando vedono tante animazioni davanti a loro possano godersi il vostro sito. Dimostreremo come utilizzare la query supporti "prefers-reduced-motion" per migliorare progressivamente l'animazione nel tuo sito web e ti mostreremo come realizzare una semplice opzione "Riduzione animazione".
Link:
Progettare nel browser → https://goo.gle/2NeLxjI
Abbonati al servizio Sviluppatori di Chrome → https://goo.gle/ChromeDevs
arrow_back Torna a tutte le puntate
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2020-09-28 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Mancano le informazioni di cui ho bisogno"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Troppo complicato/troppi passaggi"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsoleti"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema di traduzione"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema relativo a esempi/codice"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Altra"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile da capire"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Il problema è stato risolto"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Altra"
}]
{"lastModified": "Ultimo aggiornamento 2020-09-28 UTC."}
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2020-09-28 UTC."],[],[]]