Skip to Content
Last modified by Carina Enke on 12.11.2024
From version 195.1
edited by Katharina Schönefeld (Admin)
on 28.02.2024
Change comment: There is no comment for this version
To version 201.1
edited by Katharina Schönefeld (Admin)
on 28.02.2024
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -213,10 +213,12 @@
213 213  
214 214  Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
215 215  
216 -{{code language="html" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
216 +**Bildunterschrift mit den HTML-Elementen figure und figcaption**
217 +
218 +{{code layout="LINENUMBERS"}}
217 217  <figure>
218 - <img data-cke-saved-src="" src="" alt="Alternativtext">
219 - <figcaption>Bildtitel / Bildunterschrift</figcaption>
220 + <img ... alt="Alternativtext">
221 + <figcaption>Bildtitel / Bildunterschrift</figcaption>
220 220  </figure>
221 221  {{/code}}
222 222  {{/layout-cell}}
... ... @@ -248,12 +248,16 @@
248 248  {{column}}
249 249  ==== HTML-Code nutzen ====
250 250  
251 -{{code language="xml" title="Alternativtext mit dem Attribut alt"}}
252 -<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
253 +**Alternativtext mit dem Attribut alt**
254 +
255 +{{code}}
256 +<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
253 253  {{/code}}
254 254  
255 -{{code language="xml" title="Leeres alt-Attribut für Bilder ohne relevante Informationen"}}
256 -<img data-cke-saved-src="banner.jpg" src="banner.jpg" alt=" " />
259 +**Leeres alt-Attribut für Bilder ohne relevante Informationen**
260 +
261 +{{code}}
262 +<img ... alt=" " />
257 257  {{/code}}
258 258  {{/column}}
259 259  {{/section}}
... ... @@ -278,8 +278,10 @@
278 278  
279 279  Damit Bilder auf Geräten mit kleineren Bildschirmen vollständig dargestellt werden, ohne das Nutzer*innen horizontal scrollen müssen, sollte die maximale Breite im HTML auf 100% begrenzt werden. Dadurch wird das Bild nur so lange in der gewählten Größe dargestellt, bis es breiter ist, als der verfügbare Platz auf dem Bildschirm. Danach wird es dynamisch an die verfügbare Breite angepasst.
280 280  
281 -{{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
282 -<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
287 +**Mit max-width eine maximale Breite für Bilder setzen**
288 +
289 +{{code language="html"}}
290 +<img ... style="max-width: 100%" />
283 283  {{/code}}
284 284  {{/layout-cell}}
285 285  {{/layout-section}}