Barrierefreie Animationen – Design im Browser
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Willkommen beim Browser-Design mit unserem Host Una Kravets. Interaktive Berührungen können für das Verständnis der Nutzenden in einer digitalen Umgebung hilfreich sein, aber sie können auch dazu führen, dass einige Ihrer Nutzenden desorientiert und frustriert sind – genau das Gegenteil des gewünschten Effekts.
Sprechen wir also darüber, wie wir das vermeiden können und wie wir unsere niedlichen animierten SVGs und die Einblendung von Schaltflächen integrieren können. Gleichzeitig sorgen wir dafür, dass auch Nutzern, denen zu viele Animationen vor sich nervös werden, ebenfalls Freude bereiten. Wir zeigen Ihnen, wie Sie mit der Medienabfrage "prefers-Reduced-motion" Animationen schrittweise auf Ihrer Website verbessern können und wie Sie einen einfachen Schalter "Animation reduzieren" erstellen.
Links:
Design im Browser → https://goo.gle/2NeLxjI
Abonniere Chrome-Entwickler → https://goo.gle/ChromeDevs
arrow_back Zurück zu allen Folgen
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2020-09-28 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Benötigte Informationen nicht gefunden"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Zu umständlich/zu viele Schritte"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Nicht mehr aktuell"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problem mit der Übersetzung"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problem mit Beispielen/Code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Sonstiges"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Leicht verständlich"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Mein Problem wurde gelöst"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Sonstiges"
}]
{"lastModified": "Zuletzt aktualisiert: 2020-09-28\u00a0(UTC)."}
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2020-09-28 (UTC)."],[],[]]