ManU.K: Bild+Text mit Link versehen

Hallo,

ich möchte eine Überschrift und ein Bild mit einem Link versehen.

Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen. Entweder es entsteht eine Leerzeile zwischen den Elementen oder die Breite der beiden Elemente ist nicht gleich. Wie würdet ihr vorgehen? Würdet ihr das überhaupt mit CSS machen oder mit einem anderen Bildbearbeitungsprogramm und dann einfach das Bild hochladen und einen Link hinterlegen? Wenn ja, welches Programm könntet ihr da empfehlen? Vielen Dank!

  1. Hallo

    Bilder sollten grundsätzlich für das Internet angepasst werden, so dass auch deren Größe im vorraus bestimmt wird.

    In der Praxis hat es sich bewährt, die Überschrift und das Bild in einen Container zu packen, dessen größte Breite (max-width) auf die Bildbreite oder schmaler gesetzt wird.

    Damit werden von vornherein viele Probleme ausgeschlossen, die sich bei anderen Vorgehensweisen ergeben können.

    Welches Element als Container geeignet ist hängt vom jeweiligen Inhalt der Webseite ab. Zum Beispiel, ob es sich bei der Überschrift um eine echte Überschrift oder "nur" eine Bezeichnung des Bildes handelt.

    Wenn alles verlinkt werden soll bietet sich als Container direkt das a-Element an.

    oder mit einem anderen Bildbearbeitungsprogramm

    Das hört sich nach Text als Grafik an und sollte vermieden werden.

    Würdet ihr das überhaupt mit CSS machen

    Ja, wie schon beschrieben ist das kein großer Aufwand sondern beim Erstellen von aktuellen Webseiten ein ganz üblicher Arbeitsschritt.

    Gruss

    MrMurphy

  2. @@ManU.K

    ich möchte eine Überschrift und ein Bild mit einem Link versehen.

    Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen.

    Dein Problem hat nichts mit der Verlinkung zu tun.

    Wie würdet ihr vorgehen? Würdet ihr das überhaupt mit CSS machen

    Nein. Wegen geht nicht.

    Dazu brauchst du JavaScript:

    1. Breite des Bildes bzw. des Containers sowie Breite des Texts auslesen
    2. Verhältnis bilden
    3. Text entsprechend skalieren

    Wie anno dazumals.

    (Die Elementtypen können bei dir natürlich andere sein: der Container (bei mir figure) bei dir a, die Überschrift (bei mir figcaption) bei dir h#.)

    oder mit einem anderen Bildbearbeitungsprogramm und dann einfach das Bild hochladen und einen Link hinterlegen?

    Auch das ist möglich. Dabei unbedingt an den Alternativtext (alt-Attribut) denken!

    Wenn ja, welches Programm könntet ihr da empfehlen?

    Photoshop.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    1. Wow, erstmal vielen Dank euch beiden!

      Leider bin ich etwas überfordert :) Zumal ich mit Javascript noch nicht viel anfangen kann. Ich halte es für riskant den Code einfach zu kopieren (und die entsprechenden Stellen umzuändern), oder?

      Das Ganze soll ungefähr so aussehen: Bild

      Was würdet ihr mir raten?

      1. Hallo ManU.K,

        Zu figure. https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. @@Matthias Apsel

          Zu figure. https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren

          Zu figure. https://forum.selfhtml.org/self/2016/aug/3/webseite-mit-div-container-in-ie-nicht-richtig-dargestellt/1672816#m1672816

          Ob figure/figcaption hier in diesem Fall angebracht sind, lässt sich ohne Kontext nicht beurteilen.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      2. @@ManU.K

        Das Ganze soll ungefähr so aussehen: Bild

        Oh, da hatte ich in „die Breite der Überschrift "automatisch" an dem Bild anzupassen“ wohl zu viel reingedeutet. Du willst gar nicht, dass der Text der Überschrift – hier eher Unterschrift – so breit ist wie das Bild, sondern das Element dafür, d.h. in deinem Beispiel die gelbe Fläche?

        Und was willst du da genau? Die Breite des Containers vorgeben? (Gleich der bekannten Breite des Bildes?) Die Breite des Bildes wird auf die Breite des Containers skaliert – mit CSS kein Problem.

        Oder soll sich die Breite des Containers nach der (unbekannten) tatsächlichen Breite des Bildes richten? Mit JavaScript auch kein Problem. Möglicherweise gibt es auch eine Lösung ohne JavaScript; sie ist mir aber noch nicht eingefallen. Gibt es eine?

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
        1. Hallo,

          Oder soll sich die Breite des Containers nach der (unbekannten) tatsächlichen Breite des Bildes richten? Mit JavaScript auch kein Problem. Möglicherweise gibt es auch eine Lösung ohne JavaScript; sie ist mir aber nich nicht eingefallen. Gibt es eine?

          passt sich bei

          <figure>
            <img >
            <figcaption></figcaption>
          </figure>
          

          die Größe von Figure nicht dem Inhalt an?

          Gruß
          Jürgen

          1. @@JürgenB

            passt sich bei

            <figure>
              <img >
              <figcaption></figcaption>
            </figure>
            

            die Größe von Figure nicht dem Inhalt an?

            Nein. Blockemente haben per Default eine Breite von 100% (ihres umgebenden Blocks).

            Es ist auch nicht so schwer, die Breite dem Inhalt anzupassen (shrink to fit).

            Das soll hier aber nicht geschehen. Die Bildunterschrift ist auch Inhalt; sie soll aber nicht die Breite des Containers beeinflussen. Die Breite des Containers (und damit auch die der Bildunterschrift) soll sich einzig nach der Breite des Bildes richten.

            LLAP 🖖

            --
            „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            1. Hallo Gunnar,

              passt sich bei

              <figure>
                <img >
                <figcaption></figcaption>
              </figure>
              

              die Größe von Figure nicht dem Inhalt an?

              Nein. Blockemente haben per Default eine Breite von 100% (ihres umgebenden Blocks).

              dann hat das bei mir „zufallig“ geklappt, weil die Randbedingungen entsprechend waren.

              Es ist auch nicht so schwer, die Breite dem Inhalt anzupassen (shrink to fit).

              Das soll hier aber nicht geschehen. Die Bildunteschrift ist auch Inhalt; sie soll aber nicht die Breite des Containers beeinflussen. Die Breite des Containers soll sich einzig nach der Breite des Bildes richten.

              auch hier hat bei mir der Zufall zugeschlagen, da meine Bildunterschriften kurz genug sind. Danke für die Klarstellung.

              Gruß
              Jürgen

        2. @@Gunnar Bittersmann

          Oder soll sich die Breite des Containers nach der (unbekannten) tatsächlichen Breite des Bildes richten? Mit JavaScript auch kein Problem. Möglicherweise gibt es auch eine Lösung ohne JavaScript; sie ist mir aber noch nicht eingefallen. Gibt es eine?

          Ja, die gibt es: width: min-content. Außer Edge/IE. Mein geschätzter Kollege hat’s gewusst.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          1. Hallo Gunnar Bittersmann,

            Ja, die gibt es: width: min-content. Außer Edge/IE. Mein geschätzter Kollege hat’s gewusst.

            Da du ja auch intrinsic schon gewusst hast, wäre es nur ein kleiner Schritt zur google-Suche gewesen. ;-)

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. @@Matthias Apsel

              Da du ja auch intrinsic schon gewusst hast, wäre es nur ein kleiner Schritt zur google-Suche gewesen. ;-)

              Nein. Zu Google mache ich keinen kleinen Schritt, sondern einen großen Bogen darum. Aus Gründen.

              Und mir war tatsächlich so, als hätte ich von dem Zeugs schon mal was gehört, und ich hatte sogar width: content probiert. Dicht daneben ist auch vorbei.

              Es wäre ein kleiner Schritt gewesen, einen Blick in die Spec zu werfen … aber was Linda sagte. ;-)

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
              1. Hallo Gunnar Bittersmann,

                Da du ja auch intrinsic schon gewusst hast, wäre es nur ein kleiner Schritt zur google-Suche gewesen. ;-)

                Nein. Zu Google mache ich keinen kleinen Schritt, sondern einen großen Bogen darum. Aus Gründen.

                Ente Ente gehn. https://duckduckgo.com/?q=css+intrinsic+width&t=ffab&ia=web

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      3. Hallo ManU.K,

        nimm dieses Beispiel im Wiki und wende etwas CSS darauf an:

        /*Entweder so: passt sich an die Bildbreite an*/
        figure{display:inline-block;}
        
        /*oder so: nimmt einen Teil des Viewports ein...*/
        figure{width:25%}
        /*...dann: das Bild über die ganze Breite anzeigen, Höhe ergibt sich automatisch*/
        img{display:block;width:100%;}
        
        /*in beiden Fällen: nach Geschmack deklarieren.*/
        figcaption{}
        
        

        Das sollte Deinem Vorhaben gerecht werden.

        Grüße, Martl

        1. @@Martl

          /*Entweder so: passt sich an die Bildbreite an*/
          figure{display:inline-block;}
          

          Nein, das tut es nicht. Es passt sich nicht der Bildbreite an, sondern dem Inhalt.

          Das sollte Deinem Vorhaben gerecht werden.

          Hängt vom Vorhaben ab.

          LLAP 🖖

          --
          „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  3. Hej ManU.K,

    Hallo,

    ich möchte eine Überschrift und ein Bild mit einem Link versehen.

    Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen.

    Wenn ich dich recht verstanden habe, muss nicht der Text selber genauso breit sein wie das Bild, es reicht dir, wenn das Elemnt (und dadurch seine Hintergrundfarbe) so breit ist wie das Bild.

    Dann solltest du einen Container für beides nehmen. Das kann eine figure mit figcaption sein, wenn das Bild einen vorhandenen Text illustriert. Es kann aber auch ein Bild mit einem div als Beschriftung sein (hier wäre eine id für die Beschriftung und ein aria-labeldby für das Bild angebracht - dann kann man eventuell auf einen alt-Text verzichten - nicht auf das Attribut selber!

    Ich sehe schon, ich schreibe mal einen Artikel darüber. ;-)

    Jedenfalls: wenn du einen Container hast, der Bild und Beschriftung enthält, solltest du ein Blockelement für die Beschriftung wählen oder das verwendete Element auf display: block setzen: dann nimmt es automatisch die Breite des Elternelementes ein - für das Bild kannst du dasselbe realisieren, indem du dem Bild ein width: 100%mitgibst - auf ausreichend große Bilder achten (in Pixel, in kByte sollten diese möglichst klein sein, also sauber komprimieren, bei vielen automatisch per Stapelverarbeitung, bei wenigen also 100 oder so besser per Hand. Dann kann man i.d.R. bei manchen Bildern noch ein bisschen mehr Kompression rauskitzeln, bei anderen etwas mehr Qualität, je nach Bedarf).

    Das war es. Also Bild und Überschrift so wählen/formatieren, dass sie beide das Elternelement (bei dir wohl ein a) komplett ausfüllen.

    Wenn du das umgesetzt hast, schick uns doch einen Link und wir werden gemeinsam herausfinden, was man am Markup/CSS noch verbessern kann. ;-)

    Marc

    1. Hallo

      Das kann eine figure mit figcaption sein, wenn das Bild einen vorhandenen Text illustriert. Es kann aber auch ein Bild mit einem div als Beschriftung sein (hier wäre eine id für die Beschriftung und ein aria-labeldby für das Bild angebracht …

      Nur mal der Klarstellung wegen eine Frage.

      Du schreibst „eine figure mit figcaption … wenn das Bild einen vorhandenen Text illustriert“ sonst ein div für die Beschriftung des Bildes. Mir wurde die figure-figcaption-Kombi immer als Bild mit seiner Bildbeschreibung vorgestellt, also dass der Text (in figcaption) eine Aussage zum Bild (in figure) macht, nicht, dass das Bild eine Ergänzung zum figcaption-Text ist.

      Habe ich deine Aussage falsch interpretiert? Und wenn ja, was ist denn nun genau die Aufgabe von figure und figcaption?

      Tschö, Auge

      --
      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
      Toller Dampf voraus von Terry Pratchett
      1. Hallo,

        ich schließe mich der Frage an. Ich habe figure auch als Rahmen für Bild und Bildunterschrift (figcaption) gesehen.

        Gruß
        Jürgen

        1. Hallo

          als Rahmen

          Nein, das ist viel zu visuell gedacht. figure ist ein Container, der seinen Inhalt und ein eventuelles figcaption-Element sachlich zusammenhält. Ob und wie das optisch angezeigt wird spielt dabei keine Rolle. Zur Verdeutlichung ist optisch ein Rahmen zwar meist sinnvoll, aber keineswegs vorgeschrieben.

          für Bild

          Das ist viel zu einschränkend.

          Zunächst kann ein figure-Element mehr als nur ein Bild enthalten, sondern auch mehrere.

          Und, viel entscheidender, bei dem Inhalt muss es sich nicht nur um Bilder handeln. Es können auch Videos, Quelltexte, Gedichte oder Teile davon, oder ... sein.

          figure-Elemente können auch durchaus in sich verschachtelt sein, falls der Inhalt dies erforderlich macht.

          figcaption-Elemente wiederum können das erste oder letzte Element innerhalb eines figure-Elements sein. Sie können Über- oder Unterschriften sein oder den Inhalt des figure-Elements beschreiben. Sie können also viel mehr als nur Über- oder Unterschrift sein. (Inhalt, weil wie bereits geschrieben auch andere Inhalte als nur Bilder zulässig sind).

          Gruss

          MrMurphy

          1. Hallo,

            als Rahmen

            Nein, das ist viel zu visuell gedacht. figure ist ein Container, der seinen Inhalt und ein eventuelles figcaption-Element sachlich zusammenhält.

            so war das auch gemeint.

            für Bild

            Das ist viel zu einschränkend.

            das war jetzt meine Anwendung.

            figure-Elemente können auch durchaus in sich verschachtelt sein, falls der Inhalt dies erforderlich macht.

            Das heist, du würdest mehrere Bild-Unterschrift-Paare in einem weitern Figure-Element zusammenfassen? Auf dieser Seite habe ich die Figure-Elemente mangels besseren Wissens noch in einem Aside-Element zusammengefasst. Hier schlägst du ein Figure vor?

            Gruß
            Jürgen

            1. Hallo

              Das heist, du würdest mehrere Bild-Unterschrift-Paare in einem weitern Figure-Element zusammenfassen?

              Nein, das habe ich so nie geschrieben. Sondern mit dem Zusatz

              falls der Inhalt dies erforderlich macht

              Wenn der Inhalt der Webseite dies sinnvoll erscheinen lassen würde, würde ich selbstverständlich so eine Verschachtelung vornehmen.

              Aber nur weil mehrere Bilder in eigenen figure-Elementen nebeneinander stehen würde ich sie noch lange nicht in einem übergeordneten figure-Element zusammenfassen.

              Es kommt also auf den inhaltlichen, sachlichen, semantischen Zusammenhang der figure-Elemente an.

              Gruss

              MrMurphy

              1. Hallo MrMurphy1,

                Das heist, du würdest mehrere Bild-Unterschrift-Paare in einem weitern Figure-Element zusammenfassen?

                Nein, das habe ich so nie geschrieben. Sondern mit dem Zusatz

                falls der Inhalt dies erforderlich macht

                Zum Beispiel um eine Entwicklung zu zeigen

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. @@Matthias Apsel

                  Der Plural ist berechtigt.

                  LLAP 🖖

                  --
                  „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          2. @@MrMurphy1

            figure-Elemente können auch durchaus in sich verschachtelt sein

            Da fiele mir jetzt aber kein Anwendungsbeispiel ein, das nicht sehr konstruiert daherkommen würde. Dir?

            LLAP 🖖

            --
            „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            1. Hallo @Gunnar Bittersmann

              figure-Elemente können auch durchaus in sich verschachtelt sein

              Da fiele mir jetzt aber kein Anwendungsbeispiel ein, das nicht sehr konstruiert daherkommen würde. Dir?

              eine Bildergruppe, wie hier die 4 Bilder?

              Gruß
              Jürgen

            2. Hej Gunnar,

              @@MrMurphy1

              figure-Elemente können auch durchaus in sich verschachtelt sein

              Da fiele mir jetzt aber kein Anwendungsbeispiel ein, das nicht sehr konstruiert daherkommen würde. Dir?

              Steve Faulkner hätte da ein Anwendungsbeispiel für verschachtelte figure...

              Kleine accessibility-Anmerkung: figure sollte mit role="group" verwendet werden...

              Marc

              1. Hallo,

                Kleine accessibility-Anmerkung: figure sollte mit role="group" verwendet werden...

                warum? Kann figure noch mehr als Gruppieren?

                Gruß
                Jürgen

                1. Hej JürgenB,

                  Kleine accessibility-Anmerkung: figure sollte mit role="group" verwendet werden...

                  warum? Kann figure noch mehr als Gruppieren?

                  Klar. Illustrieren. Das ist auch der eigentliche Sinn des figure-Elementes. figure geht schließlich auch ohne optionales figcaption.

                  Die Rolle ist nötig, damit Screenreader es kapieren.

                  Marc

                  1. Hallo,

                    Kleine accessibility-Anmerkung: figure sollte mit role="group" verwendet werden...

                    warum? Kann figure noch mehr als Gruppieren?

                    Klar. Illustrieren. Das ist auch der eigentliche Sinn des figure-Elementes. figure geht schließlich auch ohne optionales figcaption.

                    aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.

                    Gruß
                    Jürgen

                    1. Hallo JürgenB,

                      aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.

                      Oder eine Tabelle, ein Zitat, … Die sollten dann unbedingt in einem figure-Element stehen, falls sie zum Hauptinhalt gehören.

                      Bis demnächst
                      Matthias

                      --
                      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                      1. Hallo,

                        aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.

                        Oder eine Tabelle, ein Zitat, … Die sollten dann unbedingt in einem figure-Element stehen, falls sie zum Hauptinhalt gehören.

                        warum soll eine Tabelle in einem figure stehen? Und warum ein Zitat?

                        Gruß
                        Jürgen

                        1. Hallo JürgenB,

                          warum soll eine Tabelle in einem figure stehen? Und warum ein Zitat?

                          Weil es genau dafür gedacht ist: The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc. - Das Element kann genutzt werden, um ... beizufügen. Beifügen kann man auch Zitate oder Tabellen.

                          Bis demnächst
                          Matthias

                          --
                          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                          1. Hallo,

                            warum soll eine Tabelle in einem figure stehen? Und warum ein Zitat?

                            Weil es genau dafür gedacht ist: The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc. - Das Element kann genutzt werden, um ... beizufügen. Beifügen kann man auch Zitate oder Tabellen.

                            mmh. Ich habe Bilder (img) und Tabellen bisher immer direkt ins html gelegt und figure nur benutzt, um Bild und Text zu gruppieren, bzw. um mehrere Bild-Text-Gruppen zu gruppieren. Daher war für mich die Eigenschaft „Gruppieren“ bei figure das „normale“.

                            Beim Einsatz von figure als Platzhalter für per JS erstellte Grafiken (img, svg, canvas) bin ich mir immer noch nicht sicher, ob das OK ist, oder ob hier doch das neutrale div ebenso gut geeignet ist.

                            Gruß
                            Jürgen

                            1. Hej JürgenB,

                              Beim Einsatz von figure als Platzhalter für per JS erstellte Grafiken (img, svg, canvas) bin ich mir immer noch nicht sicher, ob das OK ist, oder ob hier doch das neutrale div ebenso gut geeignet ist.

                              figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.

                              Für zu beschreibende Dinge gibt es Beschreibungslisten (dl).

                              Marc

                              1. Hallo Marc,

                                figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.

                                du würdest also ein im Text erwähntes Bild oder eine im Text erwähnte Tabelle (beide Inhalt) in ein figure-Element legen, und nicht direkt in das übergeordnete Element?

                                Gruß
                                Jürgen

                                1. Hej JürgenB,

                                  figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.

                                  du würdest also ein im Text erwähntes Bild oder eine im Text erwähnte Tabelle (beide Inhalt) in ein figure-Element legen, und nicht direkt in das übergeordnete Element?

                                  Genau. Angenommen das übergeordnete Element ist ein article (könnte auch ein Kapitel also section sein), wäre der Aufbau so:

                                  <article>
                                    <h1>Überschrift des Artikels</h1>
                                    <p>Ein oder eher mehrere Absätze</p>
                                    <figure>
                                      <img src="browser-chart.jpg" alt="IE: 50% Marktanteil, Firefox: 30% Marktanteil, Chrome 20% Marktanteil">
                                    </figure>
                                    <p>In Mittelerde benutzen 50% aller Internetnutzer den IE, der Marktanteil von Firefox liegt bei 30%, der von Chrome bei 20%.</p>
                                  </article>
                                  

                                  Accessibility-Anmerkung: Hier würde ich einen Alternativ-Text mitgeben, obwohl dieselbe Information im Text noch einmal folgt, weil die Grafik auf einen Blick (also sehr kurz zusammengefasst) einen Sachverhalt widergibt, der im Text ausführlicher dargestellt wird.

                                  Der Alternativ-Text erfüllt genau dasselbe: eine sehr kurze Zusammenfassung dessen, was im Text epischer und langatmiger beschrieben wird.

                                  Somit muss ein Screenreader-Nutzer (genau wie ein Sehender) nicht unbedingt weiter lesen, um die Kernaussage zu begreifen.

                                  Würde eine figcaption mitgeliefert, die identisch mit dem ist, was man in den alt-Text schreiben würde, wäre der alt-Text leer zu lassen (zweimal hintereinander dasselbe vorgelesen zu bekommen nervt nur).

                                  Also entweder die obige Version oder das das Folgende. Auf keinen Fall einen Mix aus beidem:

                                  <article>
                                    <h1>Überschrift des Artikels</h1>
                                    <p>Ein oder eher mehrere Absätze</p>
                                    <figure>
                                      <img src="browser-chart.jpg" alt="">
                                      <figcaption>IE: 50% Marktanteil, Firefox: 30% Marktanteil, Chrome 20% Marktanteil</figcaption>
                                    </figure>
                                    <p>In Mittelerde benutzen 50% aller Internetnutzer den IE, der Marktanteil von Firefox liegt bei 30%, der von Chrome bei 20%.</p>
                                  </article>
                                  

                                  Marc

                      2. @@Matthias Apsel

                        aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.

                        Oder eine Tabelle, ein Zitat, … Die sollten dann unbedingt in einem figure-Element stehen, falls sie zum Hauptinhalt gehören.

                        Sehe ich nicht so. Nicht „sollten“, schon gar nicht „unbedingt“. Sondern „hängt davon ab“.

                        Wenn Tabellen, Zitate (da eher unwahrscheinlich) Unterschriften wie „Abb. 42“, „Tabelle 42“ o.ä. haben, auf die man sich im Text beziehen kann, dann ist figure angebracht.

                        LLAP 🖖

                        --
                        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                  2. @@marctrix

                    Kleine accessibility-Anmerkung: figure sollte mit role="group" verwendet werden... Die Rolle ist nötig, damit Screenreader es kapieren.

                    Der Bug sollte in Screenreadern gefixt werden, nicht Webentwicklern auferlegt.

                    LLAP 🖖

                    --
                    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                    1. Hallo Gunnar Bittersmann,

                      Die Rolle ist nötig, damit Screenreader es kapieren.

                      Der Bug sollte in Screenreadern gefixt werden, nicht Webentwicklern auferlegt.

                      Kommt mir irgendwie bekannt vor.

                      Bis demnächst
                      Matthias

                      --
                      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                    2. Hej Gunnar,

                      @@marctrix

                      Kleine accessibility-Anmerkung: figure sollte mit role="group" verwendet werden... Die Rolle ist nötig, damit Screenreader es kapieren.

                      Der Bug sollte in Screenreadern gefixt werden, nicht Webentwicklern auferlegt.

                      Einen Bug sehe ich da nicht. Es ist ein noch nicht implementiertes Feature (Bugs sind Fehler in vorhandenen Implementationen) und ja - es sollte noch eingebaut werden.

                      Bis dahin gilt obiges. ;-)

                      Marc

      2. @@Auge

        Du schreibst „eine figure mit figcaption … wenn das Bild einen vorhandenen Text illustriert“ sonst ein div für die Beschriftung des Bildes. Mir wurde die figure-figcaption-Kombi immer als Bild mit seiner Bildbeschreibung vorgestellt, also dass der Text (in figcaption) eine Aussage zum Bild (in figure) macht, nicht, dass das Bild eine Ergänzung zum figcaption-Text ist.

        Habe ich deine Aussage falsch interpretiert?

        Ich glaube ja. Mit „wenn das Bild einen vorhandenen Text illustriert“ war nicht der Text der Bildunterschrift gemeint, sondern Text im Seiteninhalt.

        Und wenn ja, was ist denn nun genau die Aufgabe von figure und figcaption?

        Siehe mein in diesem Thread bereits verlinktes Posting.

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
        1. Hej Gunnar,

          @@Auge @@MrMurphy

          Du schreibst „eine figure mit figcaption … wenn das Bild einen vorhandenen Text illustriert“ sonst ein div für die Beschriftung des Bildes. Mir wurde die figure-figcaption-Kombi immer als Bild mit seiner Bildbeschreibung vorgestellt, also dass der Text (in figcaption) eine Aussage zum Bild (in figure) macht, nicht, dass das Bild eine Ergänzung zum figcaption-Text ist.

          Habe ich deine Aussage falsch interpretiert?

          So ist es.

          Ich glaube ja. Mit „wenn das Bild einen vorhandenen Text illustriert“ war nicht der Text der Bildunterschrift gemeint, sondern Text im Seiteninhalt.

          Und wenn ja, was ist denn nun genau die Aufgabe von figure und figcaption?

          Siehe mein in diesem Thread bereits verlinktes Posting.

          Sorry, da habe ich wohl unbeabsichtigt eine Rätsel zur Wochenmitte geschaffen.

          Gunnar hat natürlich recht, MrMurphy war sehr nah dran mich zu verstehen. Werde mich um eine präszisere Ausdrucksweise bemühen!

          Beiden 10 Punkte :-)

          Marc