HTML-Markup für image credits
Matthias Scharwies
- aria
- html
Servus!
Ich suche das perfekte HTML-Markup für image credits.
<figure lang="de">
<div> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/640px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg"
srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/1280px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 1280w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/1024px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 1024w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/640px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 640w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg/320px-Regierungsviertel%2C_Berlin-Mitte%2C_Blaue_Stunde%2C_Panorama%2C_160206%2C_ako.jpg 320w"
sizes="100%" alt="" aria-describedby="caption" />
<footer> Foto: Ansgar Koreng, <small><a href="https://creativecommons.org/licenses/by-sa/3.0/de/deed.de" target="_blank">CC BY-SA 3.0</a></small> </footer>
</div>
<figcaption id="caption">Berlin-Mitte: Blick von der Hugo-Preuß-Brücke in Richtung Regierungs­viertel
während der blauen Stunde</figcaption>
</figure>
@Gunnar Bittersmann hat in diesem Beispiel einen footer verwendet. Sollte man evtl sogar noch ein aria-label oder eine role=doc-credits
verwenden?
Weitere Komplikation: Es handelt sich teilweise um Hintergundbilder.
Vielen Dank im Voraus!
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
Ich hab dein Posting in einen neuen Thread verschoben; das schien mir mit dem ursprünglichen nichts zu tun zu haben.
@Gunnar Bittersmann hat in diesem Beispiel einen footer verwendet.
Scheint mir das geeignete Element dafür zu sein: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” [Spec]
Die Wahl des Elementtyps hat übrigens nichts mit der Position auf der Seite/in der Komponente zu tun. Ein footer
muss nicht immer unten sein; er kann auch oben stehen.
Sollte man evtl sogar noch ein aria-label oder eine
role=doc-credits
verwenden?
Ich weiß nicht, ob dieses EPUB-ARIA (von dem ich hier zugegebenermaßen zum ersten Mal höre) auf Webseiten zu irgendwas gut ist, also ob das von Browser/Screenreader-Kombinationen ausgewertet wird.
role="doc-credits"
scheint mir jedenfalls falsch zu sein. Wenn, dann role="doc-credit"
.
Aber ob überhaupt, müsste ich auch erstmal nachfragen.
<footer> Foto: Ansgar Koreng, <small><a href="https://creativecommons.org/licenses/by-sa/3.0/de/deed.de" target="_blank">CC BY-SA 3.0</a></small> </footer>
Das a
-Element könnte man noch mit rel="license"
anreichern. (Die Beschreibung “Indicates that the main content of the current document is covered by the copyright license described by the referenced document” bezieht sich wohl auf die Verwendung am link
-Element, nicht an a
-Elementen?)
target="_blank"
kann da weg. Das setze ich nur in Codepens, da dort die Links sonst im Iframe öffnen, was irgendwie noch blöder ist.
😷 LLAP
Servus!
@@Matthias Scharwies
Ich hab dein Posting in einen neuen Thread verschoben; das schien mir mit dem ursprünglichen nichts zu tun zu haben.
@Gunnar Bittersmann hat in diesem Beispiel einen footer verwendet.
Scheint mir das geeignete Element dafür zu sein: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” [Spec]
Die Wahl des Elementtyps hat übrigens nichts mit der Position auf der Seite/in der Komponente zu tun. Ein
footer
muss nicht immer unten sein; er kann auch oben stehen.Sollte man evtl sogar noch ein aria-label oder eine
role=doc-credits
verwenden?Ich weiß nicht, ob dieses EPUB-ARIA (von dem ich hier zugegebenermaßen zum ersten Mal höre) auf Webseiten zu irgendwas gut ist, also ob das von Browser/Screenreader-Kombinationen ausgewertet wird.
role="doc-credits"
scheint mir jedenfalls falsch zu sein. Wenn, dannrole="doc-credit"
.Aber ob überhaupt, müsste ich auch erstmal nachfragen.
<footer> Foto: Ansgar Koreng, <small><a href="https://creativecommons.org/licenses/by-sa/3.0/de/deed.de" target="_blank">CC BY-SA 3.0</a></small> </footer>
Das
a
-Element könnte man noch mitrel="license"
anreichern. (Die Beschreibung “Indicates that the main content of the current document is covered by the copyright license described by the referenced document” bezieht sich wohl auf die Verwendung amlink
-Element, nicht ana
-Elementen?)
Ah, danke, bis zum Link bin ich (gedanklich) noch gar nicht gekommen.
Herzliche Grüße
Matthias Scharwies