figure-Element anklickbar machen

[Jutta-1]

Hallo, Wie kann ich Bilder innerhalb der figure-Konstruktion

<figure>

    <img src="/fotos/aaaa.jpg" alt=""></img>
    <figcaption>
    Das ist mein Hund Waldi
    </figcaption>
  </figure>

anklickbar machen? Falls möglich ohne Javascript. Gruß Jutta

[Gunnar Bittersmann]

@@Jutta-1

Wie kann ich Bilder innerhalb der figure-Konstruktion … anklickbar machen?

Die Antwort bewegt sich zwischen „gar nicht“ und „verlinken“ bzw. Button hinzufügen/Bild als Button – je nachdem, was denn beim Clicken passieren soll.

LLAP 🖖

[hisatness]

Hallo Gunnar,

figure-Elemente sind doch grundsätzlich anklickbar.

MfG, at

[Gunnar Bittersmann]

@@hisatness

figure-Elemente sind doch grundsätzlich anklickbar.

Nein. „Grundsätzlich“ heißt: für alle – nicht nur für Mausschubser.

figure-Elemente sind grundsätzlich nicht interaktiv; sie sind nicht in der Tab-Folge, also per Tastatur nicht erreichbar und man kann mit ihnen grundsätzlich nicht interagieren.

Man kann aber ein figure-Element bspw. in ein interaktives a-Element tun, wenn denn die ganze Box als Link dienen soll. Deshalb meine Nachfrage, worin denn die Interaktion bestehen soll.

LLAP 🖖

[hisatness]

Hallo Gunnar,

ich meinte nicht interaktiv, sondern anklickbar.

MfG, at

[Gunnar Bittersmann]

@@hisatness

ich meinte nicht interaktiv, sondern anklickbar.

Was wäre der Unterschied?

Oder anders gefragt: Mit „anklickbar“ meinst du: mit Maus anklickbar? Welchen Wert hat dann anklickbar?

LLAP 🖖

[at]

Hallo Gunnar,

gar keinen. Ich habe damit nur den von dir in deiner ersten Antwort ausgemachten Spielraum geringfügig erweitert.

MfG, at

[Gunnar Bittersmann]

@@Jutta-1

<figure>

    <img src="/fotos/aaaa.jpg" alt=""></img>
    <figcaption>
    Das ist mein Hund Waldi
    </figcaption>
  </figure>

img ist ein void element und darf kein End-Tag </img> haben. [HTML §8.1.2]

Ein leerer Wert fürs alt-Attribut geht hier in Ordnung, wenn alles Relevante schon in der Bildunterschrift steht.

Wenn man gut ist, sagt man Screenreadern mittels aria-labelledby, wo denn die Bildbeschreibung zu finden ist:

<figure id="fig42">
	<img src="/fotos/aaaa.jpg" alt="" aria-labelledby="fig42-caption"/>
	<figcaption id="fig42-caption">
		Das ist mein Hund Waldi
	</figcaption>
</figure>

LLAP 🖖

[Nils-Hero]

Hallo Jutta-1,

Wie kann ich Bilder innerhalb der figure-Konstruktion anklickbar machen?

So:

<figure>
    <a href="/wo/Du/hinwillst/">
        <img src="/fotos/aaaa.jpg" alt="bla bla">
    </a>
    <figcaption>Das ist mein Hund Waldi</figcaption>
</figure>

Gruß, Nils

[Gunnar Bittersmann]

@@Nils-Hero

<figure>
    <a href="/wo/Du/hinwillst/">
        <img src="/fotos/aaaa.jpg" alt="bla bla">
    </a>
    <figcaption>Das ist mein Hund Waldi</figcaption>
</figure>

Das halte ich für keine gute Idee. Warum sollte das Bild verlinkt sein; die zugehörige Bildunterschrift aber nicht?

Was genau wolltest du mit "bla bla" andeuten? Dass dort eine Erklarüng hingehört, wohin der Link führt?

In dem Fall sollte der Alternativtext natürlich nicht mittels aria-labelledby überschrieben werden, aria-describedby könnte passen:

<a href="/wo/Du/hinwillst/">
	<figure id="fig42">
		<img src="/fotos/aaaa.jpg" alt="Link: wo Du hinwillst" aria-describedby="fig42-caption"/>
		<figcaption id="fig42-caption">
			Das ist mein Hund Waldi
		</figcaption>
	</figure>
</a>

Aber Jutta-1 sich nicht weiter geäußert hat, wissen wir überhaupt nicht, ob ein Link hier das richtige ist.

LLAP 🖖

[Nils-Hero]

Hallo Gunnar,

Ja, hast recht, da hatte ich eine Wissenslücke: Jedes Bild sollte in ein eigenes Kind−figure-element gekapselt werden. Und der Link sollte natürlich auch die figcaption beinhalten. Also bespielsweise:

<figure>
  <a href="/fotos/waldi.jpg" alt="Bild vergrößern">
	  <figure>
		  <img src="/thumbs/waldi.jpg" alt="Miniaturansicht: Mein Hund Waldi" aria-describedby="bild-1-beschreibung"/>
		  <figcaption id="bild-1-beschreibung">
			  Das ist mein Hund Waldi
		  </figcaption>
	  </figure>
  </a>
  <!-- weitere Bilder hier -->
</figure>

Gruß, Nils

[Gunnar Bittersmann]

@@Nils-Hero

<figure>
  <a href="/fotos/waldi.jpg" alt="Bild vergrößern">
	  <figure>

Ob als Containerelement figure das richtige ist, wage ich zu bezweifeln. Manchmal ist ein div einfach nur ein div.

Es ist noch nicht einmal sicher, ob die inneren figure-Elemente zur Gruppierung von Bild und Bildunterschrift figure richtig sind.

		  <img src="/thumbs/waldi.jpg" alt="Miniaturansicht: Mein Hund Waldi" aria-describedby="bild-1-beschreibung"/>
		  <figcaption id="bild-1-beschreibung">
			  Das ist mein Hund Waldi
		  </figcaption>

Der Alternativtext macht hier keinen Sinn. Warum sollte ein Screenreader „Miniaturansicht: Mein Hund Waldi. Das ist mein Hund Waldi“ vorlesen?

Wenn der Text zum Bild schon als Bildunterschrift vorhanden ist, dann ist alt="" angebracht.

LLAP 🖖

[Nils-Hero]

Hallo Gunnar,

Ob als Containerelement figure das richtige ist, wage ich zu bezweifeln. Manchmal ist ein div einfach nur ein div.

Ja, ist was dran.

Es ist noch nicht einmal sicher, ob die inneren figure-Elemente zur Gruppierung von Bild und Bildunterschrift figure richtig sind.

Ok. Mach einen besseren Vorschlag.

Warum sollte ein Screenreader „Miniaturansicht: Mein Hund Waldi. Das ist mein Hund Waldi“ vorlesen? Wenn der Text zum Bild schon als Bildunterschrift vorhanden ist, dann ist alt="" angebracht.

Leuchtet ebenfalls ein.

Gruß, Nils

[Matthias Apsel]

Hallo Nils-Hero,

Es ist noch nicht einmal sicher, ob die inneren figure-Elemente zur Gruppierung von Bild und Bildunterschrift figure richtig sind.

Ok. Mach einen besseren Vorschlag.

Das hängt von den konkreten Inhalten ab. Gunnar hat das Wort semantisch zur besseren Verdeutlichung vergessen.

Bis demnächst
Matthias

[Nils-Hero]

Hallo Matthias,

Das hängt von den konkreten Inhalten ab. Gunnar hat das Wort semantisch zur besseren Verdeutlichung vergessen.

Ah ja, ok. Wenn meine Annahme richtig ist, daß es sich um eine Fotogallerie handelt, passt meiner Meinung nach figure ganz gut. Beim äußeren Element wegen der semantischen Bedeutung von figure, als auch bei den inneren, wegen der semantischen Bedeutung von figcaption.

Mann kann es aber auch so machen.

Gruß, Nils

[Gunnar Bittersmann]

@@Nils-Hero

Ob als Containerelement figure das richtige ist, wage ich zu bezweifeln. Manchmal ist ein div einfach nur ein div.

Ja, ist was dran.

Ja, das isses.

Es ist noch nicht einmal sicher, ob die inneren figure-Elemente zur Gruppierung von Bild und Bildunterschrift figure richtig sind.

Ok. Mach einen besseren Vorschlag.

Das kann ich nicht.

LLAP 🖖