M.M: Frage zum Wiki-Artikel „Kapitel5“

problematische Seite

<!DOCTYPE html>
<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Preisliste</title>
        <link rel="stylesheet" herf="../formate.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a herf="../index.html">Startseite</a></li>
                <li>Preisliste</li>
                <li><a herf="bilder.html">Bilder</a></li>
            </ul>
        </nav>

Wo liegt mein Fehler, dass der Verweis zur Startseite nicht geht?

  1. problematische Seite

    Hi,

                    <li><a herf="../index.html">Startseite</a></li>
                    <li>Preisliste</li>
                    <li><a herf="bilder.html">Bilder</a></li>
    

    Wo liegt mein Fehler, dass der Verweis zur Startseite nicht geht?

    Deine Links haben kein href-Attribut.

    Computer sind da gnadenlos, denen reicht es nicht, daß alle nötigen Buchstaben da sind, die legen auch Wert auf die richtige Reihenfolge.

    cu,
    Andreas a/k/a MudGuard

    1. problematische Seite

      @@MudGuard

      Computer sind da gnadenlos, denen reicht es nicht, daß alle nötigen Buchstaben da sind, die legen auch Wert auf die richtige Reihenfolge.

      Ach, komm, die sollen sich mal nicht so haben. Kann doch für einen Computer nicht so schwer sein, da mal eben alle Permutationen durchzugehen.

      Ein wahrer™ Frontent-Entwickler™[1] löst das Problem natürlich so:

      document.querySelectorAll('[herf]').forEach(element => {
      	element.href = element.herf;
      });
      

      SCNR.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

      1. Ihr wisst schon: einer, der auf alles mit JavaScript ballert, was bei drei nicht auf’m Baum ist. Eins drei. ↩︎

      1. problematische Seite

        @@Gunnar Bittersmann

        Ein wahrer™ Frontent-Entwickler™[1] löst das Problem natürlich so:

        document.querySelectorAll('[herf]').forEach(element => {
        	element.href = element.herf;
        });
        

        SCNR.

        Oh pardon. Ich vergaß: Ein wahrer™ Frontent-Entwickler™ ballert natürlich erstmal alle möglichen Frameworks (er nennt auch Libraries so) rein. Das sieht dann natürlich so aus:

        $('[herf]').each(function () {
        	$(this).attr('href', $(this).attr('herf'));
        });
        

        SCNR2.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

        1. Ihr wisst schon: einer, der auf alles mit JavaScript ballert, was bei drei nicht auf’m Baum ist. Eins drei. ↩︎

        1. problematische Seite

          Hallo,

          Eins drei.

          wofür benötigst du hier „Eins“? Ein einfaches „Drei“ würde doch völlig genügen…

          Gruß
          Kalk

          1. problematische Seite

            Hi,

            Eins drei.

            wofür benötigst du hier „Eins“? Ein einfaches „Drei“ würde doch völlig genügen…

            Und wenn's schon benötigt wird, muß es Null sein statt eins. Ein wahrer Entwickler zählt immer ab 0.

            cu,
            Andreas a/k/a MudGuard

            1. problematische Seite

              Hallo,

              Eins drei.

              wofür benötigst du hier „Eins“? Ein einfaches „Drei“ würde doch völlig genügen…

              Und wenn's schon benötigt wird, muß es Null sein statt eins. Ein wahrer Entwickler zählt immer ab 0.

              also:
              Wer bei Drei nicht auf dem Baum ist …
              Zwei.

              Gruß
              Jürgen

  2. problematische Seite

    Tach!

    Wo liegt mein Fehler, dass der Verweis zur Startseite nicht geht?

    An der fehlerhaften Schreibweise von href, nicht herf.

    dedlfix.

  3. problematische Seite

    @@M.M

            <nav>
                <ul>
                    <li><a herf="../index.html">Startseite</a></li>
                    <li>Preisliste</li>
                    <li><a herf="bilder.html">Bilder</a></li>
                </ul>
            </nav>
    

    BTW: Nutzer von Screenreadern bekommen nur „Startseite“ und „Bilder“ vorgelesen (wenn die a-Elemente denn href-Attribute haben). Ihnen geht womöglich der Du-befindest-dich-hier-Hinweis verloren, den Sehende implizit erhalten.

    Ich verwende für den Menüpunkt der aktuellen Seite

                    <li><a tabindex="0" aria-current="page">Preisliste</a></li>
    

    (Sollte auch ohne a-Element gehen; die Attribute dann ans li-Element. Mit a-Element hat man’s aber einfacher – beim Generieren des Markups sowie beim Stylen.)

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      Hallo Gunnar Bittersmann,

      <li><a target="0" aria-current="page">Preisliste</a></li>
      

      Warum target="0"?

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
      1. problematische Seite

        @@Matthias Apsel

        <li><a target="0" aria-current="page">Preisliste</a></li>
        

        Warum target="0"?

        Hatte ich tatsächlich target geschrieben? Das sollte natürlich tabindex heißen.

        Weil ein a-Element ohne href-Attribut kein interaktives Element ist, also nicht in der Tab-Reihenfolge. Erst mit tabindex="0" kann man es per Tastatur fokussiert werden.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. problematische Seite

          Hallo Gunnar Bittersmann,

          Hatte ich tatsächlich target geschrieben? Das sollte natürlich tabindex heißen.

          Hab ich mir auf dem Weg zur Arbeit auch überlegt. 😀

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
        2. problematische Seite

          Hi,

          Weil ein a-Element ohne href-Attribut kein interaktives Element ist, also nicht in der Tab-Reihenfolge. Erst mit tabindex="0" kann man es per Tastatur fokussiert werden.

          ist das denn nötig? Was bringt es für Vorteile, wenn der Nicht-Link fokussierbar ist?

          cu,
          Andreas a/k/a MudGuard

          1. problematische Seite

            @@MudGuard

            Was bringt es für Vorteile, wenn der Nicht-Link fokussierbar ist?

            Wie ich schrub: Dass der Menüpunkt beim Durchtabben mit angesagt wird. Durch aria-current="page" sollte auch die besondere Bedeutung dieses Menüpunkts angesagt werden (in Screenreadern, die das bereits unterstützen). Andernfalls haben Blinde nicht den Du-befindest-dich-hier-Hinweis, den Sehende durch die abweichende Gestaltung des Menüpunkts der aktuellen Seite im Menü haben.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. problematische Seite

              Alternativ:

              <li><a href="#main" aria-current="page">Preisliste</a></li>
              

              (main natürlich durch die ID des Hauptinhaltscontainers ersetzen.)

              Damit hat ein Screen-Reader-Nutzer direkt die Möglichkeit zum Inhalt zu springen.

              Manche Nutzer (=u.a. ich) bevorzugen es in manchen Situationen auch auf den aktuellen Menüpunkt zu klicken, damit man die aktuelle Seite vor Augen hat. Wenn sich der Inhalt der Seite also öfter mal ändert finde ich einen Link auf die aktuelle Seite voll OK.

              YMMV.

              --

              Gunnar hat gesagt hier muss ein witziger Spruch hin, aber mir ist nix eingefallen.

              1. problematische Seite

                @@Eric Eggert

                Alternativ:

                <li><a href="#main" aria-current="page">Preisliste</a></li>
                

                Yep, Heydon sagt das so, nicht wahr?

                Damit hat ein Screen-Reader-Nutzer direkt die Möglichkeit zum Inhalt zu springen.

                Aber die Möglichkeit hat er doch schon durch den Skip-navigation-Link ganz am Anfang‽

                Manche Nutzer (=u.a. ich) bevorzugen es in manchen Situationen auch auf den aktuellen Menüpunkt zu klicken, damit man die aktuelle Seite vor Augen hat. Wenn sich der Inhalt der Seite also öfter mal ändert finde ich einen Link auf die aktuelle Seite voll OK.

                Wie ich immer betone, ist Aktualisieren des Seiteninhalts keine Navigation. Warum sollte man das übers Navigationsmenü tun? Zumal wohl jeder Browser einen Reload-Button anbietet.

                Es mag aber Konvention sein, dass man das auch übers Navigationsmenü tun kann – ob das nun sinnvoll ist oder nicht.

                Gunnar hat gesagt hier muss ein witziger Spruch hin, aber mir ist nix eingefallen.

                😄

                Du hier? \o/

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory