Semantic Animation

Kürzlich sagte ich dies, als ich nach neuen Tools (z. B. Edge) zum Erstellen von CSS-Animationen gefragt wurde.

Leere Divs, die nur zu Styling-Zwecken verwendet wurden, waren vor CSS-Animationen nicht semantisch und eine schlechte Idee, und sie sind auch jetzt noch eine schlechte Idee.

Dazu stehe ich. Ich habe das Gefühl, wir haben als Branche einen langen Weg zurückgelegt, um alle vom semantischen Markup zu überzeugen. Tun Sie dies und ernten Sie die großartigen Belohnungen für Geschwindigkeit, Zugänglichkeit, Wartbarkeit und SEO.

Dann kommt etwas Neues und Glänzendes, und das Erste, was wir tun, ist, unsere eigenen Regeln über Bord zu werfen. „Oooo, ich kann einen Vogel über den Bildschirm fliegen lassen?“ Bestellen Sie mir ein paar dieser leeren Divs mehr! Ich bin sicher schuldig. Es fühlt sich nicht wie eine große Sache an, wenn man es tut, besonders in Maßen.

Aber CSS-Animationen sind gekommen, um zu bleiben. Es werden allgemeine Best Practices entstehen, welche Arten von Dingen wir dafür verwenden sollten, wie viel zu viel ist, wie man sie semantisch angeht, wie man Fallback-Inhalte anbietet usw. Ich dachte, ich werfe eine kleine Idee ein, die ich hatte.

Betrachten wir, was Animationen für ein Design tun. Sie können ihm Stimmung verleihen. Sie können ihm Haltung verleihen. Wie andere Aspekte des Designs beeinflussen sie, wie ein Benutzer sich über diese Seite fühlt. Aber sie tun dies nur für sehende Benutzer. Das leere Div tut nichts davon für nicht sehende Benutzer. Es ist nur nutzloser Ballast.

<div class="moon">
  <!-- I offer nothing to non-sighted users -->
</div>

Was wäre, wenn wir dieses leere Div nehmen und versuchen würden, für nicht sehende Benutzer all das zu erreichen, was wir für unsere sehenden Benutzer erreichen. Einfach beschreibenden Text in diese Divs einzufügen, könnte es für uns erledigen. Ähnlich wie ein alt-Tag für Bilder, aber tatsächlicher Inline-Inhalt, der gelesen/genossen werden soll, so wie die Animation gesehen/genossen werden soll.

Vielleicht ist unsere Animation ein aufgehender Mond, und während er aufgeht, färben sich Himmel und Erde schwarz. Wir brauchen zwei Elemente, um unsere Animation zu realisieren, und vielleicht enthalten sie den Text von CCRs Bad Moon Rising.

<div class="moon">
   I see a bad moon rising
   I see trouble on the way
</div>

<div class="ground">
   I see earthquakes and lightnin’
   I see bad times today
</div>

Die CSS versteckt diesen Text vor dem Blick und ruft die Keyframe-Animation auf.

.ground, .moon {
   text-indent: -9999px;
   overflow: hidden; /* text-indent without this can cause choppy animation */
}

.ground {
   -webkit-animation: ground-to-black 5s ease;
   -moz-animation:    ground-to-black 5s ease;
   -o-animation:      ground-to-black 5s ease;
   animation:         ground-to-black 5s ease;
}

.moon {
   -webkit-animation: rising-moon 5s ease;
   -moz-animation:    rising-moon 5s ease;
   -o-animation:      rising-moon 5s ease;
   animation:         rising-moon 5s ease;
}

/* Plus various keyframe declarations */

Demo ansehen

Beachten Sie die Namen dieser Keyframe-Animationen. Das ist eine weitere Diskussion, die im Sinne von „semantischen Animationen“ geführt werden muss. Ein anderes Mal.

Dieser Text könnte alles sein, was mit der Animation zu tun hat. Er könnte die Animation wörtlich beschreiben. Er könnte ein Gedicht sein, das die gleiche Emotion wie die Animation hervorruft. Er könnte ein <audio>-Element sein.

Moment mal, du schicker Designer-Junge.

Ich benutze keine Screenreader, daher kann ich nicht beurteilen, ob das eine gute Idee ist oder nicht. Ich stelle mir vor, dass es bereits genug Ballast gibt, durch den man sich kämpfen muss, und dass dies trotz guter Absichten nur ein weiteres Hindernis auf dem Weg zum „echten Inhalt“ sein könnte.

Ich schätze, es ist wie bei allem anderen auf der Welt: Es kommt darauf an.