Frage zu einem PHP script

[Gunnar Bittersmann]

@@einsiedler

b) figure.html

<figure>
    <h3>{headline}</h3>
    <h4>{title}</h4>
    <img src="{img.path}" width="880px" height="880px" alt="{headline}" style="width:{img.width}vw; height:{img.height}vw;">
        <figcaption>{subtext}</figcaption>
</figure>

Das Markup stimmt so nicht. Von innen nach außen:

Es macht wenig Sinn, als Alternativtext alt="{headline}" anzugeben, wo ebendieser Inhalt {headline} schon im h3-Element steht. In dem Fall ist wohl ein Leerstring angebracht: alt="".

Man könnte die Zuordnung übers aria-labelledby-Attribut herstellen. Dazu braucht dann jede Bildüberschrift eine eigene ID:

	<h3 id="{id}">{headline}</h3> …
	<img src="{img.path}" alt="" aria-labelledby="{id}" …/>

Es wäre aber zu überdenken, ob aria-labelledby auf den Inhalt von {headline} oder von {subtext} zeigen sollte.

Die Angaben width="880px" height="880px" sind falsch; die Werte müssen Zahlen (ohne px) sein. Aber wozu soll das überhaupt gut sein? Wenn die Angabe style="width:{img.width}vw; height:{img.height}vw;" nicht greift (bspw. in alten Browsern, die vw nicht verstehen), sollen alle Bilder auf 880 × 880 Pixel verzerrt werden?

Bildbreite in vw? Wie groß sind die Werte dafür? Sollen die Bilder auf schmalen Viewports unkenntlich klein dargestellt werden?

Die Überschriftenhierarchie stimmt nicht; {title} ist keine Unterüberschrift zu {headline}, h4 ist falsch. Entweder

	<h3>
		<span class="headline">{headline}</span>
		<span class="title">{title}</span>
	</h3>

oder

	<header>
		<h3>{headline}</h3>
		<span>{title}</span>
	</header>

Ich glaube aber nicht, dass {headline}/{title} überhaupt Überschriften im Sinne der Dokumentstruktur sind. Folglich:

<figure>
	<span class="headline">{headline}</span>
	<span class="title">{title}</span>
	<img …/>
	<figcaption>{subtext}</figcaption>
</figure>

Ich glaube auch nicht, dass die Bilder einer Galerie figure-Elemente (“typically referenced as a single unit from the main flow of the document” [HTML]) sind.

Es sind eher Items in einer Liste:

<ul>
	<li>
		<span class="headline">{headline}</span>
		<span class="title">{title}</span>
		<img …/>
		<span class="subtext">{subtext}</span>
	</li>
	⋮
</ul>

Oder ggfs. ol.

LLAP 🖖