Hej JürgenB,
figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.
du würdest also ein im Text erwähntes Bild oder eine im Text erwähnte Tabelle (beide Inhalt) in ein figure
-Element legen, und nicht direkt in das übergeordnete Element?
Genau. Angenommen das übergeordnete Element ist ein article (könnte auch ein Kapitel also section sein), wäre der Aufbau so:
<article>
<h1>Überschrift des Artikels</h1>
<p>Ein oder eher mehrere Absätze</p>
<figure>
<img src="browser-chart.jpg" alt="IE: 50% Marktanteil, Firefox: 30% Marktanteil, Chrome 20% Marktanteil">
</figure>
<p>In Mittelerde benutzen 50% aller Internetnutzer den IE, der Marktanteil von Firefox liegt bei 30%, der von Chrome bei 20%.</p>
</article>
Accessibility-Anmerkung: Hier würde ich einen Alternativ-Text mitgeben, obwohl dieselbe Information im Text noch einmal folgt, weil die Grafik auf einen Blick (also sehr kurz zusammengefasst) einen Sachverhalt widergibt, der im Text ausführlicher dargestellt wird.
Der Alternativ-Text erfüllt genau dasselbe: eine sehr kurze Zusammenfassung dessen, was im Text epischer und langatmiger beschrieben wird.
Somit muss ein Screenreader-Nutzer (genau wie ein Sehender) nicht unbedingt weiter lesen, um die Kernaussage zu begreifen.
Würde eine figcaption mitgeliefert, die identisch mit dem ist, was man in den alt-Text schreiben würde, wäre der alt-Text leer zu lassen (zweimal hintereinander dasselbe vorgelesen zu bekommen nervt nur).
Also entweder die obige Version oder das das Folgende. Auf keinen Fall einen Mix aus beidem:
<article>
<h1>Überschrift des Artikels</h1>
<p>Ein oder eher mehrere Absätze</p>
<figure>
<img src="browser-chart.jpg" alt="">
<figcaption>IE: 50% Marktanteil, Firefox: 30% Marktanteil, Chrome 20% Marktanteil</figcaption>
</figure>
<p>In Mittelerde benutzen 50% aller Internetnutzer den IE, der Marktanteil von Firefox liegt bei 30%, der von Chrome bei 20%.</p>
</article>
Marc