Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 12.11.2024
Von Version 195.1
bearbeitet von Katharina Schönefeld (Admin)
am 28.02.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 198.1
bearbeitet von Katharina Schönefeld (Admin)
am 28.02.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -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,7 +278,9 @@
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"}}
287 +**Mit max-width eine maximale Breite für Bilder setzen**
288 +
289 +{{code language="html"}}
282 282  <img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
283 283  {{/code}}
284 284  {{/layout-cell}}