Scott O’Hara beschäftigt sich mit den Elementen <figure> und <figcaption>. Man muss einfach einen guten, tiefgehenden HTML-Einblick lieben.
Ich verwende diese in fast jedem Blogbeitrag hier auf CSS-Tricks, und wie ich es vermutet hatte, habe ich es im Grunde schon immer falsch gemacht. Mein ursprünglicher Gedanke war, dass eine figcaption genauso gut ist wie das alt-Attribut. Ich benutze sie im Allgemeinen, um das Bild zu beschreiben.
<figure>
<img src="starry-night.jpg" alt="">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>Ich habe den Alt-Text absichtlich weggelassen, weil die figcaption das sagt, was ich im alt-Text sagen wollen würde, und ich dachte, es wäre (für einen Screenreader-Nutzer) nervig und unnötig, es zu duplizieren. Scott sagt, das ist schlecht, da der leere Alt-Text das Bild für einige Screenreader völlig unauffindbar macht und die Figure infolgedessen nichts beschreibt.
Die richtige Antwort, denke ich, ist, mehr Arbeit zu leisten
<figure>
<img src="starry-night.jpg" alt="An abstract painting with a weird squiggly tree thing in front of a swirling starry nighttime sky.">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>Das ist ein gutes Ziel, und ich sollte darin besser werden. Es ist nur Faulheit, die im Weg steht, und Faulheit, die mich wünscht, es gäbe ein Muster, das es mir erlaubt, eine Beschreibung einmal zu schreiben, die für beides funktioniert. Vielleicht etwas Ähnliches, wie Nino Ross Rodriguez gerade heute geteilt hat, wo künstliche Intelligenz einen Teil der Arbeit abnehmen kann. Aber darum geht es hier irgendwie nicht. Der Punkt ist, dass man es nicht einmal schreiben kann, weil <figcaption> und alt unterschiedliche Dinge tun.
Danke für die Klärung. Ich habe mich immer gefragt, wie man "alt"-Attribute korrekt mit Bildern in Figures mit Figcaptions verwendet. Jetzt weiß ich es sicher.
Eine Frage, die ich zu Figure-Elementen habe, ist, ob es in Ordnung ist, sie einfach für sich allein zu verwenden… sagen wir, als Markup für ein "Karten"-Modul oder so?
Ich denke, die Spezifikation besagt, dass sich eine Figure auf einen Textinhalt im Dokument beziehen sollte…. aber ich habe viele Verwendungen von Figures ganz allein ohne jegliche Verknüpfung mit entsprechendem Text gesehen.
Figure-Elemente erlauben Flow-Inhalte (die meisten Tags, die Text umschließen oder Inhalte einbetten, wie Bilder), mit einer einzigen figcaption, als allererstes oder allerletztes Element.
Figcaptions sind auch nicht dazu gedacht, Alt-Tags zu ersetzen – sie haben unterschiedliche Auswirkungen. Alt-Tags dienen dazu, ein Bild zu erklären (und zugängliche Geräte teilen den Benutzern mit, dass ein Bild vorhanden ist, gefolgt von dem Alt-Text zur Erklärung; ein leerer Alt-Tag erwähnt niemals, dass ein Bild vorhanden ist, so dass die Figcaption einfach "aus dem Nichts kommen" würde), was sowohl von zugänglichen Geräten als auch von SEO verwendet wird (das ist super wichtig, wenn Ihnen Suchergebnisse wichtig sind). Figcaptions sind eher wie Labels, die den Inhalt innerhalb der Figure kennzeichnen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Außerdem ist der wichtigste Teil, dass Figures Sectioning Roots sind. Das bedeutet, der Inhalt wird aus dem Fluss der Seite entfernt – wie ein „aside“. Wenn der Inhalt darin keinen spezifischen Punkt hat (oder spezifisch darauf verwiesen wird), ist es in Ordnung. Aber wenn der Inhalt zu einem bestimmten Teil des Inhalts gehört (z. B. ein Bild, das zwischen verwandtem Absatztext schwebt), dann sollte keine Figure verwendet werden.