Frage zu einem PHP script
bearbeitet von Gunnar Bittersmann@@einsiedler
> b) **figure.html**
>
> ~~~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:
~~~html
<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"`{:.bad} 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
~~~html
<h3>
<span class="headline">{headline}</span>
<span class="title">{title}</span>
</h3>
~~~
oder
~~~html
<header>
<h3>{headline}</h3>
<span>{title}</span>
</header>
~~~
Ich glaube aber nicht, dass `{headline}`/`{title}` überhaupt Überschriften im Sinne der Dokumentstruktur sind. Eher nicht:
~~~html
<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”*{:@en} [[HTML](https://w3c.github.io/html/grouping-content.html#the-figure-element)]) sind.
Es sind eher Items in einer Liste:
~~~html
<ul>
<li>
<span class="headline">{headline}</span>
<span class="title">{title}</span>
<img …/>
<span class="subtext">{subtext}</span>
</li>
⋮
</ul>
~~~
Oder ggfs. `ol`.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Frage zu einem PHP script
bearbeitet von Gunnar Bittersmann@@einsiedler
> b) **figure.html**
>
> ~~~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:
~~~html
<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"`{:.bad} sind falsch; die Werte müssen Zahlen 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
~~~html
<h3>
<span class="headline">{headline}</span>
<span class="title">{title}</span>
</h3>
~~~
oder
~~~html
<header>
<h3>{headline}</h3>
<span>{title}</span>
</header>
~~~
Ich glaube aber nicht, dass `{headline}`/`{title}` überhaupt Überschriften im Sinne der Dokumentstruktur sind. Eher nicht:
~~~html
<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”*{:@en} [[HTML](https://w3c.github.io/html/grouping-content.html#the-figure-element)]) sind.
Es sind eher Items in einer Liste:
~~~html
<ul>
<li>
<span class="headline">{headline}</span>
<span class="title">{title}</span>
<img …/>
<span class="subtext">{subtext}</span>
</li>
⋮
</ul>
~~~
Oder ggfs. `ol`.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann