einsiedler: Bitte genauestens prüfen ob alles richtig funktioniert

Hallo liebe Forumer, auf meiner Webseite habe ich die Fotos untereinander-gereiht das man eigentlich nur noch abwärts scrollen bräuchte, das möchte ich dahingehend ändern das ich dort nur noch eine kleine Auswahl an Fotos zeigen möchte (als Teaser) und mit einem Link (am Ende) zu einer Fotogalerie weiterleite. So eine Fotogalerie habe ich gerade fertiggestellt und ich möchte sie euch zur Prüfung überlassen. Bitte versucht es an so vielen Browsern wie möglich:

a) vergrössern & verkleinern b) Bildschirm zusammenstauchen + vergrössern & verkleinern

Alle erdenkliche und ach so unmögliche kombinationen!

Meine Frage verhält sich diese Seite weitgehend ordentlich bei der Darstellung oder gibt es übersehene Fehler!

Was ich bemerkt habe das der IE anscheinend nicht das CSS läd, ist dies bei euch auch so?

Wie reagieren ältere IE`s , Opera, Firefox etc.... weitgehend ordentlich????

Ist der Code weitgehend ordentlich geschrieben???

der Link zum Projekt

Gruss der einsiedelnde

  1. @@einsiedler

    der Link zum Projekt

    Gut: Die Galerie ist per Tastatur bedienbar.

    Besser wäre noch, beim Bildwechsel den Fokus auf den Vorwärts- bzw. Rückwärtspfeil zu setzen, damit man beim Durchblättern nicht jedesmal wieder per Tab-Taste zu dem entsprechenden Pfeil navigieren muss.

    Blöd: Videos starten automatisch, und das mit Ton.

    LLAP 🖖

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

      gut, wie mache ich das? gibt es irgendwo ein Beispiel das ich mir abgucken / nachbauen könnte?

      Das mit dem "von selbst anlaufende" Videos muss ich ändern (Siehe anderen post!).

      Gruss der einsiedelnde

      @@einsiedler

      der Link zum Projekt

      Gut: Die Galerie ist per Tastatur bedienbar.

      Besser wäre noch, beim Bildwechsel den Fokus auf den Vorwärts- bzw. Rückwärtspfeil zu setzen, damit man beim Durchblättern nicht jedesmal wieder per Tab-Taste zu dem entsprechenden Pfeil navigieren muss.

      Blöd: Videos starten automatisch, und das mit Ton.

      LLAP 🖖

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

      1. @LLAP

        hi LLAP,

        vielleicht solltest du mit ‚<accronym role="Gruß" lang="en">LLAP</accronym>‘ unterschreiben

      2. @@einsiedler

        hi LLAP,

        Hi Gruss der einsiedelnde,

        gut, wie mache ich das?

        Du müsstest jeder aufgerufenen Seite mitgeben, ob sie per Vorwärts- oder Rückwärtsblättern aufgerufen wurde. Der Query dürfte ein geeigneter Ort dafür sein. Auf der Seite mit Bild 42 bspw. Links zu ?dir=1&img=41&scrolldir=back und ?dir=1&img=43&scrolldir=fwd.

        Auf jeder Seite suchst per JavaScript z.B. mit regulärem Ausdruck im Query nach dem Parameter scrolldir und setzst, wenn vorhanden, je nach dessen Wert den Fokus auf den entsprechenden Link.

        gibt es irgendwo ein Beispiel das ich mir abgucken / nachbauen könnte?

        Ja, dieses Posting. Hier kannst du dir abgucken, wie man beim Antworten sinnvoll zitiert. TOFU wird hier nicht gern gesehen.

        LLAP 🖖

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

      der Link zum Projekt

      Gut: Die Galerie ist per Tastatur bedienbar.

      Schlecht: Die Links haben keine Beschriftung. '≪' und '≫' ist wohl nichts, was ein Screenreader dem Nutzer sinnvoll vorlesen kann. Entweder den Linktext „voriges Bild“ bzw. „nächstes Bild“ als Linktitel verwenden und visuell verstecken oder Beschriftung mit ARIA-Attributen hinzufügen: <a href="" aria-label="voriges Bild" rel="prev"> und <a href="" aria-label="nächstes Bild" rel="next">

      (Ich hab auch gleich mal rel-Attribute gesetzt.)

      LLAP 🖖

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

    So eine Fotogalerie habe ich gerade fertiggestellt und ich möchte sie euch zur Prüfung überlassen.

    Habe nur einzelne Bilder gesehen, keine Galerie. Dafür aber einen Film mit Blasmusik, der von allein losgerannt ist. - Leider hatte ich die Kopfhörer auf. Jetzt klingeln mir die Ohren und ich habe keine lust mehr weiter zu testen...

    Marc

    1. oh, das tut mir leid... könntest du dich nicht doch überwinden.... villeicht???

      SORRY!!!!

      ich merke schon, "von selbst anlaufene" videos sind keine gute Idee, das muss ich ändern!!!

      grüsse der einsiedelnde

      Hej einsiedler,

      So eine Fotogalerie habe ich gerade fertiggestellt und ich möchte sie euch zur Prüfung überlassen.

      Habe nur einzelne Bilder gesehen, keine Galerie. Dafür aber einen Film mit Blasmusik, der von allein losgerannt ist. - Leider hatte ich die Kopfhörer auf. Jetzt klingeln mir die Ohren und ich habe keine lust mehr weiter zu testen...

      Marc

      1. Hej einsiedler,

        oh, das tut mir leid... könntest du dich nicht doch überwinden.... villeicht???

        SORRY!!!!

        Na gut - bei mir funktioniert alles - war wohl ein Missverständnis. Wenn ich Bildergalerie höre habe ich immer sofort Thumbnils vor eminem inneren Auge - muss natürlich nciht zwangsläufig sein...

        Marc

  3. Ich bleibe mal (sicherheitshalber) in meinem <fred> ... </fred>,

    aus irgendeinem undurchsichtigen Grund möchte mein IE11 meine Seite nicht ordentlich darstellen, es sieht so aus als wenn er das CSS nicht richtig läd,

    oder ich nehme mal an das die " display: flex; " entweder zuviele oder falsch gesetzt sind.

    Von der Struktur soll diese Galerie so aussehen: IMG Seitenstruktur

    im <body> mit flex-direction: column; befinden sich <section> <aside> und <footer>

    die <section> mit der flex-direction: row; besteht aus <nav class="bottonprevious"> <figure> und <nav class="bottonnext", wohlgemerkt ROW;

    Wie mache ich da den strukturenn Aufbau richtig? Ich wollte schon für <section> eine dreiteilige Tabelle nehmen... warscheinlich Pfui...

    Es scheint so das irgendwie die display: flex; falsch aufeinander reagieren.... kommen sich ins Gehege...

    Deshalb möchte der IE11 wohl auch nicht....

    Bitte gebt mir mal Tipps und Ratschläge...

    Des weiteren: Bitte verkleinert mal das Browserfenster und vergrössert (zusätzlich auch) mal mit strg++ die Schrift, ist dann noch alles in der Darstellung Richtig? Bitte das Ganze auch mit verschiedenen Browsern....

    Danke für eure Unterstützung!

    Gruss der einsiedelnde

    1. @@einsiedler

      aus irgendeinem undurchsichtigen Grund möchte mein IE11 meine Seite nicht ordentlich darstellen,

      Oder aus irgendeinem known issue?

      LLAP 🖖

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

    Alle erdenkliche und ach so unmögliche kombinationen!

    Die Zeit haben weder Webseitenersteller noch Forenteilnehmer. Als Webseitenersteller solltest du nur die relevanten Browser berücksichtigen und für den Rest ein Fallback bereitstellen. Bei allen anderen Vorgehensweisen bist du ganz schnell verraten und verkauft.

    Ist der Code weitgehend ordentlich geschrieben???

    Na ja.

    Du hast leider die Einheiten vw und vh entdeckt. Die solltest du aber nur dort einsetzen wo es auch Sinn macht.

    Für Schriftgrößen sind sie nicht geeignet. Bei kleineren Fenstern eine kleine Schrift zu verwenden ist widersinnig. Es sollte genau anders herum sein. Auf kleinen Monitoren sollte die Schrift etwas größer angezeigt werden.

    Tablets und grade auch Smartphones werden in der Regel mobil benutzt. Heißt: Sie haben weder einen gleichbleibenden Abstand zum User noch stehen sie statisch wie Desktop-Monitore. Sie werden häufig in Bus, Bahn oder Auto verwendet, in der Hand oder auf Knien. Dabei sind kleinere Schriften kontraproduktiv.

    aus irgendeinem undurchsichtigen Grund möchte mein IE11 meine Seite nicht ordentlich darstellen, es sieht so aus als wenn er das CSS nicht richtig läd

    Dass der IE grade bei Flexbox etwas rumzickt ist klar. Bei über 95% aller Beschwerden hat aber der Webseitenersteller Fehler gemacht. Dass andere Browser solche Fehler überspielen ist Glückssache, da die dann einfach nur fehlertoleranter sind als in den Richtlinien vorgeschrieben.

    Ein großer Nachteil solcher Fehlertoleranz ist, dass Webseitenersteller ihre Fehler wiederum überhaupt nicht bemerken, sich ein schludrigen Stil angewöhnen (funktioniert doch) und aus allen Wolken fallen, wenn sie erfahren, dass ihr Quelltext eher auf unterem Niveau angesiedelt ist. Häufig geht das so weit, dass sie ihren Besuchern die Wahl ihrer Browser vorwerfen und andere Browser vorschreiben wollen. Insofern ist der IE zur Fehlersuche prima geeignet.

    In deinem CSS fehlt zum Beispiel eine schließende Klammer vor dem Kommentar /Farben/ . Da müssen zwei hintereinander folgen.

             padding: 0.1vw 0.3vw 0.1vw 0.3vw;
          }
          /*Farben*/
    

    Hinweis nebenbei: Auch bei padding ist die Einheit vw eher kritisch zu sehen.

    Nicht schön ist auch dass auch bei kleineren Bildschirmen (bis zum Breakpoint) die seitlichen Ränder des body bleiben. Dadurch werden die Bilder unnötig verkleinert. Besser wäre dem body statt width und max-width mit auf den Weg zu geben.

    Layouter aus dem Papierbereich arbeiten gerne mit Weißraum (der durchaus nicht immer weiß sein muss). Dies ist aber auf Webseiten nur eingeschränkt übertragbar. Eventuell stammt dein Wunsch nach leeren seitlichen Flächer daher. Dann solltest du für Webseiten deine Layoutvorstellungen auch auf Webseiten umstellen.

    im <body> mit flex-direction: column; befinden sich <section> <aside> und <footer>

    Deine Beispielseite ist anders aufgebaut. Dort finden sich im body direkt main und footer. Im main dann section und aside. Im section dann h2, nav, figure und nav.

    Die Struktur ist soweit in Ordnung. Ich würde nur die h2 über das section stellen, so dass du dich direkt im section nur um nav, figure und nav kümmern musst.

    Von der Element-Wahl her würde ich statt der beiden nav eher zu zwei div neigen. nav-Elemente sind für die Hauptnavitation vorgesehen, dazu zählt ein Bilderwechsel nicht. Und statt der h2 eher zu einer h1.

    Gruss

    MrMurphy

    1. Danke MrMurphy, dass hilft mir schon wieder ein Stückchen weiter.

      Gruss der einsiedelnde

    2. @@MrMurphy1

      Als Webseitenersteller solltest du nur die relevanten Browser berücksichtigen und für den Rest ein Fallback bereitstellen.

      Wobei die Denke andersrum sein sollte:

      2. Den Fallback, d.h. die Kernfunktionalität für alle bereitstellen. Dazu muss diese natürlich 1. bestimmt werden.

      3. Für fähigere Browser/Geräte bessere UX (bspw. durch erweiterte Funktionalität) anbieten.

      Progressive enhancement in a nutshell.

      Der Begriff „relevante Browser“ kommt in dieser Denke nicht übrigens vor.

      Rolltreppen, nicht Fahrstühle!

      Du hast leider die Einheiten vw und vh entdeckt. Die solltest du aber nur dort einsetzen wo es auch Sinn macht.

      Für Schriftgrößen sind sie nicht geeignet.

      Kann man so nicht sagen. In Verbindung mit em oder rem können sie durchaus geeignet sein.

      LLAP 🖖

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

    erst mal herzlichen Glückwunsch! - Du bist auf einem guten Weg. Wird immer besser!

    a) vergrössern & verkleinern b) Bildschirm zusammenstauchen + vergrössern & verkleinern

    Och nö, ich brauche meinen Bildschirm noch ;-)

    Aber wenn ich das Fenster über zwei Monitore auseinanderziehe (würde ich normalerweise wohl nicht tun) und dann wieder zusammenschiebe, kommt der FF50 unter Win10 wohl mit den vw nicht so ganz zurecht:

    Schriftgrößen unproportional stark vergrößert im Verhältnis zum Bild

    Die Schriften bleiben riesig...

    MrMurphy hat viel richtiges und wichtiges gesagt. Insbesondere würde ich die Bilder auf die ganze Breite ziehen bei Smartphones! - Um die geht es hier schließlich und vor allem die hochkant-Bilder siond winzig

    Auf das figure kannst du vermutlich verzichten. Ein alt-Text könnte Informationen (z.B. zur Stimmung des Bildes) enthalöten, die du für Sehende nciht ausgeben willst (warum auch immer - ich bin ein Fan davon, so was vor Sehenden nicht zu verstecken).

    aside ist nicht geeignet für die Beschriftung, es handelt sich ja nicht um optionalen Inhalt, sondern um den eigentlichen Inhalt.

    Mein Aufbau wäre ehr so was in der Art:

    <body>
      <main>
        <article>
          <h1>Name des Bildes</h1><!-- Damit man weiß, was man sieht -->
          <a href="#">zurück</a><!-- Wenn das, was gezeigt wird, nicht interessiert, kann man gleich weg -->
          <a href="#">weiter</a>
          <img src="bild.jpg" alt=""><!-- Ohne alt-Text, Beschreibung für alle im Anschluss -->
          <p>
            Bildbeschreibung <!-- Eventuell strukturiert nach schema.org o.ä. - wenn Angaben zu Orten usw regelmäßig vorkommen -->
          </p>
        </article>
      </main>
      <footer>
          [...]
      </footer>
    </body>
    

    Marc

    1. hi marc, hi MrMurphy,

      ich habe mal einiges beherzigt und stelle diese Version in den Raum:

      bearbeitete Testseite

      Das mit der Schriftgrösse und der Grösse der Fotos (vorallem das) sehe ich irgendwie nicht ein. Was nutzt ein Foto wenn man scrollen muss wie hier (eine Arbeit von mir!)

      Bildbeschreibung Da wird auserdem ersichtlich das die Qualität miserabel ist. Und das scrollen finde ich lästig! Tut mir leid, ich möchte das die Bilder sich mit strg++ nicht vergrössern.

      Die Schriftgrösse ist nun im rem, wenn man im Opera auf 500% vergössert finde ich es nicht gerade leserlich noch hilfreich in der Art. Das der Textkladeradatsch seitlich (rechts) nicht herausragt mache ich das gesamte Textfenster auf max 500px, so bleibt er innerhalb vom <body> und <article> Testweise im IE, Firefox und Opera..... (ist das ebenso bei euch so?)

      Auf das <figure> kann man leider nicht verzichten, bei horizontal schmaleren Bildern zieht sich sonst der inhalt von <article> zusammen, kommt das nächste breitere Bild drückt es sich wieder auseinander, so ein "springen" finde ich doof.

      Bin mal gespannt was euch noch so auffält.... nur das mit den alt-Texten habe ich noch nicht .... aber wird erledigt....

      Achso, die Bildbeschreibung kann ich nicht in <p> </p> setzen, meine Struktur sieht so aus:

      <div class="imginfo">
      <h2>Infos</h2>
      <?	
      	echo '<p>' . $bildbeschreibung[$values['recentDir']]['ueberschrift'] . '<br />' . '</p>';
      	echo '<p>' . $bildbeschreibung[$values['recentDir']]['technik'] . '<br />' . '</p>';
      	echo '<p>' . $bildbeschreibung[$values['recentDir']]['ort'] . '<br />' . '</p>';
      	echo '<p>' . $bildbeschreibung[$values['recentDir']][$values['id']]['beschreibung'] . '<br />' . '</p>';
      ?>
      </div>
      

      Habe hier mal auf <div> zurückgegriffen!

      Gruss der einsiedelnde

      1. @@einsiedler

        <?	
        

        War das nicht so, dass der Short-Tag abgeschafft wurde? Es sollte <?php heißen.

        	echo '<p>' . $bildbeschreibung[$values['recentDir']]['ueberschrift'] . '<br />' . '</p>';
        	echo '<p>' . $bildbeschreibung[$values['recentDir']]['technik'] . '<br />' . '</p>';
        	echo '<p>' . $bildbeschreibung[$values['recentDir']]['ort'] . '<br />' . '</p>';
        	echo '<p>' . $bildbeschreibung[$values['recentDir']][$values['id']]['beschreibung'] . '<br />' . '</p>';
        

        Nein, kein Markup (Tags) mit PHP echo ausgeben! Nicht HTML in PHP schachteln, sondern andersrum:

        <p><?php echo $bildbeschreibung[$values['recentDir']]['ueberschrift']; ?></p>
        <p><?php echo $bildbeschreibung[$values['recentDir']]['technik']; ?></p>
        <p><?php echo $bildbeschreibung[$values['recentDir']]['ort']; ?></p>
        <p><?php echo $bildbeschreibung[$values['recentDir']][$values['id']]['beschreibung']; ?></p>
        

        Der Short-Tag <?= ist übrigens weiter erlaubt und kann hier auch verwendet werden.

        Die Strings in $bildbeschreibung liegen vollständig unter deiner Kontrolle, können also keienn Schadcode enthalten? Ansonsten unbedingt durch htmlspecialchars() jagen!

        Die sinnlosen br-Elemente hab ich gleich mal entsorgt. Abstände mit CSS.

        LLAP 🖖

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

        bearbeitete Testseite

        Das mit der Schriftgrösse und der Grösse der Fotos (vorallem das) sehe ich irgendwie nicht ein. Was nutzt ein Foto wenn man scrollen muss wie hier (eine Arbeit von mir!)

        max-height: 100vh;
        

        Beziehungsweise 100vh abzüglich gewünschter Ränder, zum Beispiel:

        max-height: calc(100vh - 10em - 3px);
        

        Sonst ist es auf Handys einfach zu klein...

        Bildbeschreibung Da wird auserdem ersichtlich das die Qualität miserabel ist. Und das scrollen finde ich lästig! Tut mir leid, ich möchte das die Bilder sich mit strg++ nicht vergrössern.

        s.o.

        Die Schriftgrösse ist nun im rem, wenn man im Opera auf 500% vergössert finde ich es nicht gerade leserlich noch hilfreich in der Art.

        Wer eine Vergrößerung auf 500% benötigt, wird Deine Meinung nciht teilen ;-)

        Das der Textkladeradatsch seitlich (rechts) nicht herausragt mache ich das gesamte Textfenster auf max 500px, so bleibt er innerhalb vom <body> und <article>

        Aber nicht auf einem 320px breiten Smartphone! - Nimm besser max-width: 100% - auch hier ggfs. abzüglich von Rändern.

        Auf das <figure> kann man leider nicht verzichten, bei horizontal schmaleren Bildern zieht sich sonst der inhalt von <article> zusammen, kommt das nächste breitere Bild drückt es sich wieder auseinander, so ein "springen" finde ich doof.

        Ein figure-Element wird immer einem Text o.ä. beigefügt. Wenn du keinen Text hast, benutze ein anderes Element. Wenn es kein passendes gibt, wäre das ein div!

        Marc

        1. hi marctrix, dann denke ich gerade über eine andere neuen Aufbau / Stuktur nach: wäre es dann nicht besser das Ganze so zu lösen?

          Website Struktur

          Also mit <figure> und <figcaption>! Wäre das nicht besser?

          Nur ist die Frage ob ich im <figure> noch ein <div> setzen darf, warscheinlich nicht!

          Ich benötige (dieses orange gekennzeichnete) div das es kein springen des Bildes gibt, denn alle Bilder sind unterschiedlich / sowohl hoch als auch waagrecht breit) Dann "hüpfen" mir die Bilder, ich hatte das schon mal ausprobiert! das möchte ich unterbinden indem ich einen "vorgegeben Raum" für die Bilder gebe.

          Dazu kommt noch, es sind nicht nur Bilder sondern auch Videos, darf man die auch in <figure> setzen? Sowohl Bilder als auch die Videos haben eine Erläuterung und da sehe ich <figcaption> als richtig an! Sehe ich das richtig?

          Ich möchte mit diesem Lernprojekt endlich mal zum Ende kommen.

          @Gunnar O.K. das mit dem php habe ich verstanden. was mache ich nun aber wenn ich Fotos und Videos ausgebe?

          <figure>
          	<?php
          		{ ... BERECHNUNGEN der Bildgrösse ... }
          										
          			echo '<img style="width: '. $res_width .'vw; height: '. $res_height .'vh; max-width: 100%; height: auto;" src="'. $values['file']['filename'] .'" alt="" width="'.$values['file']['width'] .'" height="'.$values['file']['height'] .'" />';
          							}
          				elseif ($values['file']['type'] == 'video')
          					{
          					$res_width = 39.063312;
          					$res_height = 77.241564;
          										
          				echo '<video autoplay controls style="width:'. $res_width .'vw; height: '. $res_height .'vh; max-width: 100%; height: auto;">';
          				foreach ($values['file']['fileTypes'] as $extension) {
          				echo '<source src="'. $values['file']['filename'] .'.'. $extension .'" type="video/'. $extension .'"></source>';
          				}
          				echo 'Your browser does not support the video tag.';
          				echo '</video>';
          				}
          				else 
          				{
          				echo '<b>Die aufgerufene Datei existiert leider nicht.<br /> Leite zum Anfang zurück ...</b><meta http-equiv="refresh" content="3; URL=index_uebung2.php">';    
          				}
          	?>                            
          </figure>
          

          Was muss ich da für Änderungen vornehmen?

          Gruss der einsiedelnde (der endlich mal fertig werden will!)

          1. Hej einsiedler,

            dann denke ich gerade über eine andere neuen Aufbau / Stuktur nach: wäre es dann nicht besser das Ganze so zu lösen?

            Website Struktur

            Also mit <figure> und <figcaption>! Wäre das nicht besser?

            Wie gesagt: das figure-Element setzt man dann ein, wenn das, was im figure-Element drin ist, etwas anderem mitgegeben werden soll: du hast aber ncihts "anderes". Insofern ist figure hier eigentlich falsch.

            Um eine Beschriftung mit einem beliebigen Element zu verknüpfen gibt es aria-labelledby. Das lesen derzeit meines Wissens zwar nur Screenreader aus, aber theoretisch können Suchmaschinen und jede beliebige Software wie UAs, Parser usw auch.

            Noch mehr könnte man mit schema.org herausholen, wenn du das noch in dein Lernprojekt mit aufnehmen wolltest. Es ist aber vermutlich hie rmal gut sein zu lassen und sich auf das vorhandene zu beschränken.

            Für Sehende ist der Bezug ohnehin klar (durch die Gestaltung und Positionierung - achte darauf, dass das so bleibt!)

            Nur ist die Frage ob ich im <figure> noch ein <div> setzen darf, warscheinlich nicht!

            Probiere es doch einfach aus. ;-)

            Immer alles validieren!

            Ich benötige (dieses orange gekennzeichnete) div das es kein springen des Bildes gibt, denn alle Bilder sind unterschiedlich / sowohl hoch als auch waagrecht breit)

            Vielleicht suchst du so etwas wie clip?

            Ich möchte mit diesem Lernprojekt endlich mal zum Ende kommen.

            Da es viele Aspekte von HTML, CSS und PHP betrifft - alles drei lebendige Sprache, die sich ständig weiterentwickeln und an deren Oberfläche du gerade mal gekratzt hast - solltest du dich mit der Tatsache anfreunden, dass du damit als Lernprojekt niemals fertig sein wirst.

            Dennoch weiß ich was du meinst und du kannst nicht jeden Tipp aus dem Forum hier umsetzen. Mein Vorsachlag wäre übrigens in etwa folgendes HTML:

            
            <body>
              <main>
                <h1>Titel des Bildes</h1>
                <a href="#">zurück</a>
                <article>
                  <img src="#"
                    alt="Informationen die über die Beschreibung hinaus gehen (z.B. 'Stimmung', Eigenschaften wie s/w oder ähnliches - sonst leer lassen!)" aria-describedby="ID-desc">
                  <div id="ID-desc">
                    <p>Beschreibung des Bildes</p>
                    <p>Beschreibung des Bildes</p>
                  </div>
                </article>
              </main>
              <footer>Copyright by Superhero</footer>
            </body>
            

            Das sollte wahrscheinlich reichen...

            Anmerkung Das main ist eigentlich nicht nötig. Es ist nur üblicherweise vorhanden und ich verwende es, damit ein Screenreader-Nutzer, der es per Tastenkürzel versucht anzuspringen, auch irgendwo landet. Wenn er ausgegeben bekommt, dass es kein main gibt, denkt er womöglich fälschlicherweise, dass die Seite Barrieren enthält...

            Gruss der einsiedelnde (der endlich mal fertig werden will!)

            Der Weg ist das Ziel - siehe auch CSS-Timeline - alles ist im Fluss und ein Ziel oder gar Ende gibt es übrhaupt nicht...

            Marc

          2. Hallo einsiedler,

            Your browser does not support the video tag

            Diese Aussage ist für deine Besucher nicht hilfreich. Das ist so, als ob an einer Treppe stünde: „Diese Treppe ist für Rollstuhlfahrer nicht benutzbar.“ Zudem ist in einer deutschspachigen Seite eine englischsprachige Meldung auch irgendwie fehl am Platze.

            Abgesehen davon, dass es Element und nicht Tag heißen sollte, brauchst du deinen Besucher auch nicht darauf hinzuweisen, denn es gibt da genau zwei Möglichkeiten:

            Entweder der Besucher sieht, dass da ein Video abgespielt werden soll oder er sieht gar nichts. In beiden Fällen hilft ihm die Fehlermeldung nicht weiter.

            Biete ihm stattdessen eine Beschreibung des Inhalts und eine alternative Quelle. Siehe https://wiki.selfhtml.org/wiki/Video.

            Bis demnächst
            Matthias

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