Matthias Scharwies: HTML-Markup für image credits

SELF-Forum

HTML-Markup für image credits

Matthias Scharwies
– Informationen zu den Bewertungsregeln

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&shy;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

--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HTML-Markup für image credits

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@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

    --
    „Man darf die Klimakrise doch echt jetzt nicht überbewerten.
    Es ist gar nicht klar, ob 2022 wieder Extremregen und Hochwasser bringt oder ob es ein ganz gewöhnliches Dürrejahr wird.“
    — @HalleVerkehrt
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML-Markup für image credits

      Matthias Scharwies (Versionen)
      – Informationen zu den Bewertungsregeln

      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, 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?)

      Ah, danke, bis zum Link bin ich (gedanklich) noch gar nicht gekommen.

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln