Gerhard1: Untermenu aufklappen - Anfängerfrage

0 128

Untermenu aufklappen - Anfängerfrage

Gerhard1
  • css
  • html
  1. 0
    marctrix
    1. 0
      Gerhard1
      1. 0
        marctrix
        1. 1
          Camping_RIDER
          1. 0
            marctrix
            1. 0
              Camping_RIDER
  2. 0
    Martl
    1. 0
      Gerhard1
      1. 0
        Martl
    2. 0
      beatovich
  3. 2
    Felix Riesterer
    1. 0
      Gerhard1
      1. 0
        beatovich
        1. 0
          Felix Riesterer
        2. 1
          Gunnar Bittersmann
          • barrierefreiheit
          • html
          1. 0
            beatovich
      2. 0
        Felix Riesterer
        • css
        • html
        • javascript
        1. 0
          Camping_RIDER
        2. 0
          Camping_RIDER
          1. 0
            beatovich
        3. 0
          Gunnar Bittersmann
          1. 0
            Felix Riesterer
            1. 0
              beatovich
              1. 0
                Felix Riesterer
            2. 0
              Gunnar Bittersmann
              1. 0
                Felix Riesterer
                1. 0
                  beatovich
                2. 0
                  beatovich
                  1. 0
                    Felix Riesterer
                    1. 0
                      beatovich
                    2. 0
                      Felix Riesterer
                3. 0
                  at
                  1. 0
                    Felix Riesterer
                    1. 1
                      Christian Kruse
                      1. 1
                        Gunnar Bittersmann
                        • html
                        • xml
                        1. 0
                          Christian Kruse
                          1. 1
                            Gunnar Bittersmann
                            • html
                            1. 0
                              Christian Kruse
                              1. 1
                                Matthias Apsel
                                1. 0
                                  Camping_RIDER
                            2. 0
                              Gunnar Bittersmann
                              • html
                              • html
                              • xml
                    2. 2
                      Auge
              2. 0
                Gunnar Bittersmann
      3. 1
        Gunnar Bittersmann
  4. 0
    Gunnar Bittersmann
    1. 1
      beatovich
    2. 0
      marctrix
      1. 0
        Gunnar Bittersmann
        1. 0
          marctrix
    3. 0
      Gunnar Bittersmann
      1. 0
        Gerhard1
        1. 0
          marctrix
          1. 1
            dedlfix
            1. 0
              marctrix
          2. 0
            Christian Kruse
            1. 0
              marctrix
              1. 0
                Christian Kruse
                1. 0
                  marctrix
                  1. 0
                    Christian Kruse
                    1. 0
                      marctrix
                      1. 0
                        Christian Kruse
                        1. 0
                          marctrix
          3. 0
            Gerhard1
            1. 1
              marctrix
              1. 0
                beatovich
                1. 0
                  marctrix
                  1. 0
                    beatovich
                    1. 0
                      marctrix
                      1. 0
                        beatovich
                        1. 0
                          marctrix
                          1. 0
                            beatovich
                            1. 0
                              Gerhard1
                              1. 0
                                marctrix
          4. 0
            Gerhard1
            1. 0
              marctrix
  5. 0
    Camping_RIDER
    1. 0
      Gunnar Bittersmann
      1. 0
        Camping_RIDER
        1. 0
          Gunnar Bittersmann
          1. 0
            Camping_RIDER
            1. 0
              Gunnar Bittersmann
              1. 0
                Camping_RIDER
              2. 0
                Felix Riesterer
          2. 1
            Felix Riesterer
            • css
            • html
            • menschelei
            1. 0
              Gunnar Bittersmann
  6. 0

    Schön wäre es, wenn man die für mich unverständlichen Diskussionen beenden könnte

    Gerhard1
    1. 1
      Camping_RIDER
      1. 0
        Gerhard1
        1. 2

          Kleine Führung durch die unverständlichen Diskussionen!

          Camping_RIDER
          1. 0
            Auge
            1. 0
              beatovich
              1. 0
                Auge
                1. 0
                  beatovich
                2. 0
                  Gunnar Bittersmann
            2. 0
              Camping_RIDER
    2. -1
      Martl
      1. 0
        Gunnar Bittersmann
  7. 0

    Untermenu aufklappen - Was für eine Diskussion!

    Rolandi
    1. 0
      marctrix
    2. 0
      beatovich
      1. 1
        Rolandi
        1. 0
          marctrix
        2. 0
          beatovich
          1. 1
            Rolandi
            1. 0
              beatovich
              1. 0
                marctrix
                1. 0
                  beatovich
                  1. 0
                    marctrix
                    1. 0
                      beatovich
                2. 0
                  Rolandi
                  1. 0
                    marctrix
                  2. 0
                    Gunnar Bittersmann
                    1. 1
                      Rolandi
                      1. 0
                        Camping_RIDER
                        1. 0
                          marctrix
                        2. 0
                          beatovich
                          1. 0
                            Gunnar Bittersmann
                        3. 1
                          Gunnar Bittersmann
                          1. 1
                            Camping_RIDER
                      2. 0
                        Gunnar Bittersmann
                        1. 0
                          Rolandi
                          1. 0
                            marctrix
    3. 0
      Rolandi
  8. 0
    marctrix
    1. 0
      marctrix
      1. 1
        Rolandi
        1. 0
          marctrix

Hallo, was habe ich bei folgendem falsch gemacht? Das Untermenu ist nicht unsichtbar.

CSS

# Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar
li.menu ul li
{
    display: none;  	   
}
# Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen
li.menu:hover, li.menu:focus, li.menu:active ul li
{
    display: inline-block;
	font-size: 0.9em;
	font-style: italic;
	margin-left: 2em;  	   
}

HTML

<ul>
  <li class="menu"><a href="/wir.shtml">Über uns</a></li>
    <ul>
	  <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
	  <li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
    </ul>
  </li> 
</ul>  

  1. Hej Gerhard1,

    was habe ich bei folgendem falsch gemacht? Das Untermenu ist nicht unsichtbar.

    Natürlich nicht. Schau mal Deinen Kommentar an:

    # Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar
    li.menu ul li
    

    Und jetzt dein HTML:

    HTML

    <ul>
      <li class="menu"><a href="/wir.shtml">Über uns</a></li>
        <ul>
    	  <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
    	  <li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
        </ul>
      </li> 
    </ul>  
    
    

    Hat das Element mit der Klasse menu denn eine ul und darin weitere li? 😉

    Besser wäre folgendes HTML:

    <nav>
    <ul>
    […]
    </ul>
    </nav>
    

    Dann kannst du so selektieren und brauchst gar keine Klassen mehr:

    nav li li
    

    Marc

    1. @marctrix

      Mein Kommentar: Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar li.menu ul li

      Meine Struktur:

      <ul>
        <li class="menu"><a href="/wir.shtml">Über uns</a></li>
          <ul>
      	  <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
      
      

      Das (letzte) li unter ul und (dieses) ul unter li der Klasse "menu".

      Dies entspricht doch meinem Kommentar.

      1. Hej Gerhard1,

        Mein Kommentar: Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar li.menu ul li

        Meine Struktur:

        <ul>
          <li class="menu"><a href="/wir.shtml">Über uns</a></li>
            <ul>
        	  <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
        
        

        Das (letzte) li unter ul und (dieses) ul unter li der Klasse "menu".

        Dies entspricht doch meinem Kommentar.

        Nein du hast kommentiert (und selektiert), dass da zwei ul unterhalb der Klasse menu sein sollen. Ist aber nur eine.

        Mach es dir daher einfacher: li li reicht vollkommen aus um die zweite Ebene zu selektieren. Wenn es um die zweite Ebene einer Hauptnavigation geht, setze noch ein nav davor.

        Marc

        1. Aloha ;)

          Mach es dir daher einfacher: li li reicht vollkommen aus um die zweite Ebene zu selektieren. Wenn es um die zweite Ebene einer Hauptnavigation geht, setze noch ein nav davor.

          Ich glaub du bist auf dem Holzweg! Sein Selektor war schon korrekt, nur sein HTML war falsch. Er hat das äußere <li> bereits zugemacht, nur deshalb greift der Selektor nicht.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          1. Hej Camping_RIDER,

            Ich glaub du bist auf dem Holzweg! Sein Selektor war schon korrekt, nur sein HTML war falsch. Er hat das äußere <li> bereits zugemacht, nur deshalb greift der Selektor nicht.

            Du hast vollkommen recht! Habe ich übersehen!

            Dennoch würde ich empfehlen auf die Klasse zu verzichten und die Liste in ein nav zu packen.

            Marc

            1. Aloha ;)

              Ich glaub du bist auf dem Holzweg! Sein Selektor war schon korrekt, nur sein HTML war falsch. Er hat das äußere <li> bereits zugemacht, nur deshalb greift der Selektor nicht.

              Du hast vollkommen recht! Habe ich übersehen!

              Dennoch würde ich empfehlen auf die Klasse zu verzichten und die Liste in ein nav zu packen.

              Klar, FACK!

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
  2. Hallo Gerhard1,

    1. In CSS gibt es nur /* Kommentar */ als Kommentarzeichen
    2. li.menu ul li für die Nicht-Anzeige, also muß
    3. li.menu:hover ul li die Anzeige wieder herstellen.

    Bezüglich der Verwendung von dispaly:none für diesen Zweck kommen wahrscheinlich noch ein paar Kommentare. :)

    Grüße, Martl

    1. @Martl Du schreibst: li.menu ul li für die Nicht-Anzeige So habe ich es doch angegeben und die beiden Zeilen des Untermenus sind trotzdem sichtbar.

      1. Hallo Gerhard1,

        ...sind trotzdem sichtbar.

        das habe ich überlesen; es funktioniert, sobald Du Deine falschen '#'-Kommentare (# bezieht sich auf eine ID) entfernst.

        Was aber dann nicht funktioniert, ist „die Anzeige wieder herstellen“, deshalb der Punkt drei. Infos zu Verwendung von :active.

        Grüße, Martl

    2. hallo

      Hallo Gerhard1,

      1. In CSS gibt es nur /* Kommentar */ als Kommentarzeichen
      2. li.menu ul li für die Nicht-Anzeige, also muß
      3. li.menu:hover ul li die Anzeige wieder herstellen.

      Bezüglich der Verwendung von dispaly:none für diesen Zweck kommen wahrscheinlich noch ein paar Kommentare. :)

      Genau, nämlich, dass man da bereits mit Javascript arbeiten muss, um zugängliches zu produzieren.

      Deshalb verlinke ich mal hier mein Eigenprodukt für alles was klappern soll. https://beat-stoecklin.ch/klapperlogic.html

      --
      Neu im Forum! Signaturen kann man ausblenden!
  3. Lieber Gerhard1,

    ich fasse mal zusammen was schon gesagt wurde:

    1. Kaputte Kommentare können die Funktionalität Deines CSS-Codes zerstören. Verwende /* Kommentar (auch mehrzeilig) */ stattdessen.
    2. Deine Navigation gehört in ein <nav>-Element

    Desweiteren ist mir aufgefallen, dass Du die Klasse .menu verwendest. Wenn Du Deine Liste in ein <nav> kapselst, dann genügt Dir den Nachfahrenselektor ganz ohne Klasse:

    /* grundsätzlich Untermenüs verbergen */
    nav ul ul {
      display: none;
    }
    
    /* Untermenü eines gehoverten Listenpunkts anzeigen */
    nav li:hover > ul {
      display: block;
    }
    

    Dazu das passende Markup:

    <nav>
      <h2>Navigation</h2>
      <ul>
        <li><a href="/wir.shtml">Über uns</a>
          <ul>
            <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
            <li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    

    was habe ich bei folgendem falsch gemacht? [...]

    <ul>
      <li class="menu"><a href="/wir.shtml">Über uns</a></li>
        <ul>
    

    Du hast einen Listenpunkt geschlossen und dann eine neue Liste begonnen. Damit ist sie kein Kind des Listenpunktes mehr, was sie aber sein muss, damit Deine Technik funktioniert.

    Bitte beachte, dass Deine Navigation mit Touchgeräten unbedienbar ist! Dort gibt es keine :hover-Zustände. Daher bräuchte es eigentlich eine Klapp-Navi mit Buttons.

    Liebe Grüße,

    Felix Riesterer.

    1. @all: Danke für Eure Tipps.

      @Felix Riesterer

      Bitte beachte, dass Deine Navigation mit Touchgeräten unbedienbar ist! Dort gibt es keine :hover-Zustände. Daher bräuchte es eigentlich eine Klapp-Navi mit Buttons.

      Das, dachte ich, hätte ich mit den Angaben focus und active erledigt.

      Muss man dann zweierlei Methoden realisieren, abhängig vom verwendeten Gerät?

      Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?

      1. hallo

        Das, dachte ich, hätte ich mit den Angaben focus und active erledigt.

        Ja aber Elemente werden nicht fokusierbar, indem man im CSS element:focus schreibt.

        Entweder ein Element ist von Haus aus fokusierbar (Buttons, Links, Formularelemente) oder ihm wurde diese Eigenschaft über das Attribut tabindex="0" explizit gegeben.

        --
        Neu im Forum! Signaturen kann man ausblenden!
        1. Lieber beatovich,

          Ja aber Elemente werden nicht fokusierbar, indem man im CSS element:focus schreibt.

          es geht nicht darum, ob ein Element prinzipiell fokussierbar ist, sondern ob ein Touchfeld einen Hover-Zustand auslösen kann, um ein Element zu hovern. Der Focus-Zustand kommt bei Toucheingabe bei einem Klick zustande, was aber den Link der übergeordneten Hierarchie auslöst.

          Liebe Grüße,

          Felix Riesterer.

        2. @@beatovich

          Entweder ein Element ist von Haus aus fokusierbar (Buttons, Links, Formularelemente) oder ihm wurde diese Eigenschaft über das Attribut tabindex="0" explizit gegeben.

          Es reicht nicht, irgendein Element per tabindex fokussierbar zu machen. Es muss dem Nutzer auch erkenntlich gemacht werden, dass das Element nun interaktiv sein soll (role), wie es sich verhält, welchen Status es gerade hat und und und … da kommen einige ARIA-Attribute zusammen.

          TL;DR: Nicht machen. button verwenden.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. hallo

            @@beatovich

            Entweder ein Element ist von Haus aus fokusierbar (Buttons, Links, Formularelemente) oder ihm wurde diese Eigenschaft über das Attribut tabindex="0" explizit gegeben.

            Es reicht nicht, irgendein Element per tabindex fokussierbar zu machen. Es muss dem Nutzer auch erkenntlich gemacht werden, dass das Element nun interaktiv sein soll (role), wie es sich verhält, welchen Status es gerade hat und und und … da kommen einige ARIA-Attribute zusammen.

            Die Beispiele der WAI-ARIA-Seite selbst verwenden des öfteren tabindex ohne role Attribut weil das Element eben nicht immer eine eigene interaktive Rolle hat, ausser den Fokus zu verschieben.

            Und doch, technisch betrachtet reicht tabindex 😉

            --
            Neu im Forum! Signaturen kann man ausblenden!
      2. Lieber Gerhard1,

        Bitte beachte, dass Deine Navigation mit Touchgeräten unbedienbar ist! Dort gibt es keine :hover-Zustände. Daher bräuchte es eigentlich eine Klapp-Navi mit Buttons.

        Das, dachte ich, hätte ich mit den Angaben focus und active erledigt.

        auf einem Touch-Gerät kann ich mit dem Finger das Menü auklappen wollen, indem ich den passenden Punkt (also den sichtbaren Link) mit dem Finger berühre. Dabei kann ich kurz darauf tippen (wird als Klick mit der linken Maustaste interpretiert) oder eben etwas länger (wird als Klick mit der rechten Maustaste interpretiert). Ein Klick würde den Link aufrufen und die Seite verlassen. Ein Rechtsklick würde ein Kontextmenü aufrufen.

        Du kannst auf Touchgeräten nicht hovern! Das gibt es dort nicht! Also kann auch der "Hover-Zustand" nicht eintreten, auf den mit der Pseudoklasse :hover reagiert werden soll.

        Muss man dann zweierlei Methoden realisieren, abhängig vom verwendeten Gerät?

        Ja. Wenn Du "Gerät" schreibst, dann solltest Du das Eingabegerät (Maus/Touchfeld) damit meinen.

        Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?

        Ich habe mich an einem solchen versucht. Probiere es aus und entscheide selbst, ob es Deinen Anforderungen genügt.

        Liebe Grüße,

        Felix Riesterer.

        1. Aloha ;)

          Nur der Korrektheit halber:

          Du kannst auf Touchgeräten nicht hovern! Das gibt es dort nicht! Also kann auch der "Hover-Zustand" nicht eintreten, auf den mit der Pseudoklasse :hover reagiert werden soll.

          Ich kann schon hovern, auch auf einem Touchgerät. Nur muss man davon ausgehen, dass die Mehrheit der User das a) nicht kann und b) nicht tut. De facto bleibt das damit bei deiner Aussage, dass man das :hover für wichtige Seitenelemente (oder auch: die ganze Seite) am besten vergisst.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        2. Aloha ;)

          Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?

          Ich habe mich an einem solchen versucht. Probiere es aus und entscheide selbst, ob es Deinen Anforderungen genügt.

          Ich find das Beispiel gut. Als progressive enhancement könnte es jetzt auch zusätzlich zur überall funktionierenden Basisfunktionalität noch eine Reaktion auf :hover für die Geräte anbieten, die hovern können, um das Menü mit Maus intuitiver zu machen. Für Mobilgeräte ist es bereits intuitiv.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          1. hallo

            Ich find das Beispiel gut. Als progressive enhancement

            Ich frage mich, wie man in Zeiten von aria noch von progressive enhancement sprechen kann. Entweder du machst eine statische Nav oder du erforderst JS.

            Progressives Verbesserung wäre in etwa das

            <nav useragent-automation="true"> ... </nav>

            Ich glaube ich habe eine Idee für ein Browser-Plugin.

            --
            Neu im Forum! Signaturen kann man ausblenden!
        3. @@Felix Riesterer

          Ich habe mich an einem solchen versucht.

          Wenn man da mit JavaScript im DOM rummacht, sollte man wohl auch ARIA-Attribute entsprechend setzten. Und wenn der Zustand des Untermenüs schon im aria-expanded-Attribut festgehalten ist, dann braucht man auch gar keine Klasse "open" mehr.

          Ich hatte da auch mal einen Anlauf gemacht. Welcher noch ein gutes Stück von der Zielgerade entfernt ist.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Lieber Gunnar,

            Wenn man da mit JavaScript im DOM rummacht, sollte man wohl auch ARIA-Attribute entsprechend setzten.

            tja, wenn ich mich damit auskennen würde... zwischen welchen Attributen oder -Werten müsste ich da hin- und herschalten?

            Und wenn der Zustand des Untermenüs schon im aria-expanded-Attribut festgehalten ist, dann braucht man auch gar keine Klasse "open" mehr.

            Das leuchtet mir sofort ein.

            Ich hatte da auch mal einen Anlauf gemacht. Welcher noch ein gutes Stück von der Zielgerade entfernt ist.

            Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.

            Liebe Grüße,

            Felix Riesterer.

            1. hallo

              Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.

              Warum willst du sie verlinkbar machen?

              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. Lieber beatovich,

                Warum willst du sie verlinkbar machen?

                weil halt! Im Ernst: Der Op hat in seinem Code-Beispiel für alle <li> einen Link als Kindelement, egal, ob es noch eine verschachtelte Liste mit Unterkategorien darin gibt, oder nicht. Für meine Belange benötige ich auch so etwas, daher hatte ich das jsfiddle-Beispiel erstellt.

                Liebe Grüße,

                Felix Riesterer.

            2. @@Felix Riesterer

              tja, wenn ich mich damit auskennen würde... zwischen welchen Attributen oder -Werten müsste ich da hin- und herschalten?

              Ich schalte da aria-expanded zwischen "false" und "true" um. Ich müsste aber auch nochmal genauer nachlesen/testen, ob das schon reicht.

              Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.

              Das sollte in jenem Fall so sein. Das können aber auch – wie im hiesigen Fall – Links sein. Da müsste wohl im Eventhandler lediglich if (event.target.nodeName === 'BUTTON') entsprechend erweitert werden.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Lieber Gunnar,

                Ich schalte da aria-expanded zwischen "false" und "true" um. Ich müsste aber auch nochmal genauer nachlesen/testen, ob das schon reicht.

                die Attributwerte true und false sind meiner Meinung nach ein echtes Design-Versagen bei einer beschreibenden Sprache wie HTML. Warum wird da am Wert geschraubt, anstatt dass man das Vorhandensein eines Attributs alleine nimmt? Vergleiche:

                <li>
                  <button>expand</button>
                  Text
                  <ul aria-expanded>
                    <li>
                      <button>expand</button>
                      Text
                    </li>
                  </ul>
                  <ul aria-contracted>
                    <li>
                      <button>expand</button>
                      Text
                    </li>
                  </ul>
                </li>
                

                Das sähe für mich eher nach sinnvollen HTML-Attributnamen aus, als dass man Zustände über generische Attribut-Werte steuert. Ach ja, das aria-expanded wäre nach meinem Dafürhalten nicht notwendig, da es den Standardzustand repräsentieren sollte. Damit kann dann auch kein Konflikt entstehen, wenn man beide Attributnamen einsetzen würde:

                <li aria-expanded aria-contracted>
                

                Vielleicht anstelle von aria-contracted auch aria-collapsed?

                Aber was weiß ich schon.

                Liebe Grüße,

                Felix Riesterer.

                1. hallo

                  die Attributwerte true und false sind meiner Meinung nach ein echtes Design-Versagen bei einer beschreibenden Sprache wie HTML. Warum wird da am Wert geschraubt, anstatt dass man das Vorhandensein eines Attributs alleine nimmt? Vergleiche:

                  Du kannst mit JS Verhalten registrieren, indem du allein auf [aria-expanded] eine query durchführst.

                  --
                  Neu im Forum! Signaturen kann man ausblenden!
                2. hallo

                  <button>expand</button>

                  Und jetzt kennzeichne den Schalterzustand.

                  --
                  Neu im Forum! Signaturen kann man ausblenden!
                  1. Lieber beatovich,

                    <button>expand</button>

                    Und jetzt kennzeichne den Schalterzustand.

                    nach meinem Dafürhalten ist er automatisch expandiert. Nur wenn er es nicht sein sollte, braucht es ein Attribut.

                    Liebe Grüße,

                    Felix Riesterer.

                    1. <button>expand</button>

                      Und jetzt kennzeichne den Schalterzustand.

                      nach meinem Dafürhalten ist er automatisch expandiert. Nur wenn er es nicht sein sollte, braucht es ein Attribut.

                      Und woran erkennst du, dass er expandiert ist? Wir sind noch nicht bei css :has() angekommen.

                      --
                      Neu im Forum! Signaturen kann man ausblenden!
                    2. Hallo Ingrid,

                      eigentlich möchte ich das <li> expandieren oder kollabieren. Daher braucht der Schalter keinen eigenen Zustand:

                      <li aria-collapsed>
                        <button>expand</button>
                        <ul>
                          <li>Text</li>
                        </ul>
                      </li>
                      

                      Duch li[aria-collapsed] button kann ich doch das Aussehen des Buttons steuern. Seine Eigenschaft wäre "aria-collapsed", weil er sie von seinem Elternelement erbt.

                      Liebe Grüße,

                      Felix Riesterer.

                3. Hallo Felix.

                  Ich schalte da aria-expanded zwischen "false" und "true" um. Ich müsste aber auch nochmal genauer nachlesen/testen, ob das schon reicht.

                  die Attributwerte true und false sind meiner Meinung nach ein echtes Design-Versagen bei einer beschreibenden Sprache wie HTML. Warum wird da am Wert geschraubt, anstatt dass man das Vorhandensein eines Attributs alleine nimmt?

                  In erster Linie weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.

                  MfG, at

                  1. Lieber at,

                    weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.

                    mit disabled="disabled" gibt es doch auch schon...

                    Liebe Grüße,

                    Felix Riesterer.

                    1. Hallo Felix,

                      weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.

                      mit disabled="disabled" gibt es doch auch schon...

                      und inwiefern findest du disabled="disabled" eleganter als enabled="false" / enabled="true"? Ich persönlich fand die Wiederholung als Attribut-Wert immer ziemlich albern.

                      LG,
                      CK

                      1. @@Christian Kruse

                        weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.

                        mit disabled="disabled" gibt es doch auch schon...

                        und inwiefern findest du disabled="disabled" eleganter als enabled="false" / enabled="true"? Ich persönlich fand die Wiederholung als Attribut-Wert immer ziemlich albern.

                        Die Macher der HTML5-Spec wohl auch. Deshalb kann man in HTML auch disabled="" schreiben.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hallo Gunnar,

                          Die Macher der HTML5-Spec wohl auch. Deshalb kann man in HTML auch disabled="" schreiben.

                          Ah, das ist mir neu. Interessant, danke.

                          LG,
                          CK

                          1. @@Christian Kruse

                            Die Macher der HTML5-Spec wohl auch. Deshalb kann man in HTML auch disabled="" schreiben.

                            Ah, das ist mir neu. Interessant, danke.

                            Mal rausgesucht: §8.1.2.3. Attributes, Empty attribute syntax: Attribut ohne Wert und Attribut mit Leerstring als Wert ist dasselbe.

                            Das heißt, man könnte auch <img src="" alt> schreiben, wenn kein Alternativtext für ein Bild sinnvoll ist. (Das alt-Attribut muss aber auch dann vorhanden sein!)

                            LLAP 🖖

                            --
                            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            1. Hallo Gunnar,

                              Mal rausgesucht: §8.1.2.3. Attributes, Empty attribute syntax: Attribut ohne Wert und Attribut mit Leerstring als Wert ist dasselbe.

                              Hehe, das wusste ich sogar. Aber die Verknüpfung zu disabled="" hat nicht stattgefunden bei mir 😀

                              LG,
                              CK

                              1. Hallo Christian Kruse,

                                Hehe, das wusste ich sogar. Aber die Verknüpfung zu disabled="" hat nicht stattgefunden bei mir 😀

                                Es ist meiner Meinung nach ein Designfehler: Ein unbedarfter würde wahrscheinlich disabled="" als disabled=_NICHT_ lesen.

                                Bis demnächst
                                Matthias

                                --
                                Rosen sind rot.
                                1. Aloha ;)

                                  Hehe, das wusste ich sogar. Aber die Verknüpfung zu disabled="" hat nicht stattgefunden bei mir 😀

                                  Es ist meiner Meinung nach ein Designfehler: Ein unbedarfter würde wahrscheinlich disabled="" als disabled=_NICHT_ lesen.

                                  Da würde ich dir zustimmen. Das ist irgendwie wie einen Designfehler durch einen anderen Designfehler kaschieren wollen...

                                  Grüße,

                                  RIDER

                                  --
                                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                  # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                            2. @@Gunnar Bittersmann

                              Mal rausgesucht: §8.1.2.3. Attributes, Empty attribute syntax: Attribut ohne Wert und Attribut mit Leerstring als Wert ist dasselbe.

                              Hm, das gilt jetzt für den HTML-Parser.

                              Würde der XHMTL-Parser (application/xhtml+xml) bei disabled="disabled" und disabled="" auch dasselbe tun?

                              LLAP 🖖

                              --
                              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    2. Hallo

                      weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.

                      mit disabled="disabled" gibt es doch auch schon...

                      Meiner Meinung nach ist das das echte™️ Designversagen.

                      Tschö, Auge

                      --
                      Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                      Kleine freie Männer von Terry Pratchett
              2. @@Gunnar Bittersmann

                Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.

                Das sollte in jenem Fall so sein. Das können aber auch – wie im hiesigen Fall – Links sein.

                Äh nein, das können sie nicht so einfach. Ich hatte das ja so gebaut, dass sich das Untermenü nicht beim Hovern bzw. Fokussieren öffnet, sondern beim Click. Das geht natürlich bei Links so nicht, da ein Click ja zur verlinkten Seite führen soll.

                Es müsste tatsächlich das Konzept geändert werden.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      3. @@Gerhard1

        Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?

        Das Problem ist, dass ein aufklappbares Menu, das überall funktioniert, eben nicht so einfach ist.

        Da gibt es einiges zu bedenken; nicht unbedingt Stoff für blutige Anfänger.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. @@Gerhard1

    was habe ich bei folgendem falsch gemacht?

    Worauf Marc schon hinwies: Dein Markup ist fehlerhaft. Der Markup Checker spürt solche Fehler auf; visuelle Tests sind dafür auch ein gutes Werkzeug.

    Das Untermenu ist nicht unsichtbar.

    Und das bleibt es auch für alle Nutzer, die im Web anders navigieren sind als mit einer Maus (o.ä. Zeigergerät).

    In einem Fall, wo auch die Unterpunkte zur selben Seite führen (aber zu anderen Stellen auf dieser), mag das verschmerzbar sein, wenn man auf der anderen Seite zu den einzelnen Stellen navigieren kann.

    Allgemein ist es das aber nicht; jedes Menü muss auch mit der Tastatur bedienbar sein.

    Una Kravets hat da eine Lösung mit :focus-within vorgestellt. Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den Kommentar von Marcy Sutton.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. hallo

      Una Kravets hat da eine Lösung mit :focus-within vorgestellt. Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den Kommentar von Marcy Sutton.

      Jup. Für umfangreiche Navigationen oder Inhalte, die viele fokusierbare Elemente enthalten, ist das tatsächlich nicht optimal, weil man nun einen zusätzlichen Skip-Link braucht.

      Reine CSS-Lösungen sind zudem nicht in der Lage, aria-attribute umzuschreiben, weshalb man hier nie mit display:none arbeiten darf.

      Da man aber nicht mit display:none arbeiten soll, besteht die Gefahr/Möglichkeit, mit dem Cursor in Content hinein zu wandern, der visuell immer noch ausgeblendet ist, weil nie ein focus stattfand.

      --
      Neu im Forum! Signaturen kann man ausblenden!
    2. Hej Gunnar,

      @@Gerhard1

      was habe ich bei folgendem falsch gemacht?

      Worauf Marc schon hinwies: Dein Markup ist fehlerhaft. Der Markup Checker spürt solche Fehler auf; visuelle Tests sind dafür auch ein gutes Werkzeug.

      Das Untermenu ist nicht unsichtbar.

      Und das bleibt es auch für alle Nutzer, die im Web anders navigieren sind als mit einer Maus (o.ä. Zeigergerät).

      Persönlich bin ich ja auch der Meinung, dass display: none nicht die beste Lösung ist.

      Ich würde die unteren Menüpunkte nur aus dem Viewport schieben, dann bleiben Sie für Blinde schon mal erreichbar.

      So wie man es mit Skiplinks macht.

      Allgemein ist es das aber nicht; jedes Menü muss auch mit der Tastatur bedienbar sein.

      Full ACK

      Una Kravets hat da eine Lösung mit :focus-within vorgestellt.

      So weit war ich schon vor Jahren, wenn auch ohne die Möglichkeiten von focus-within. Das ist IMHO gar nicht nötig, denn man sieht ja am aufgeklappten Untermenü, welcher obere Menü-Punkt dazu gehört.

      Warum ich eine reine CSS-Lösung aber für ungut halte, erkläre ich unten.

      Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den Kommentar von Marcy Sutton.

      Probleme gibt es beim schrägen Überfahren um Untermenü-Punkte zu erreichen, wobei (kurzzeitig) das Eltern-li verlassen wird. Hier ist JS nötig um eine kurze Verzögerung zu erreichen, bevor sich das Menü wieder zuklappt. Habe da mit Delay und so romprobiert, das aber mit CSS allein nicht hinbekommen. Vielleicht hatte ich einen schlechten Tag?

      Jedenfalls ist nicht die Tastatur-Bedienung die große Herausforderung, wie in dem Artikel behauptet (und dann "gelöst" wird - ist längst gelöst), sondern die Bedienung mit der Maus ist das größere Problem. Das habe ich mi reinem CSS nicht lösen können.

      Kannst es ja selber mal probieren, @Gunnar Bittersmann ,denn bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.

      Marc

      1. @@marctrix

        sondern die Bedienung mit der Maus ist das größere Problem.

        Man könnte den Unterpunkt-ul Padding verpassen – und transparenten Hintergrund. Die Hintergrundfarbe bekommen die li oder a darin. Das vergrößert die Fläche und sollte auch schräge Mausbewegungen ermöglichen.

        bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.

        Das sollte mit transition möglich sein – wenn man denn das Ausblenden über animierbare Eigenschaften realisiert.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hej Gunnar,

          @@marctrix

          sondern die Bedienung mit der Maus ist das größere Problem.

          Man könnte den Unterpunkt-ul Padding verpassen – und transparenten Hintergrund. Die Hintergrundfarbe bekommen die li oder a darin. Das vergrößert die Fläche und sollte auch schräge Mausbewegungen ermöglichen.

          bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.

          Das sollte mit transition möglich sein – wenn man denn das Ausblenden über animierbare Eigenschaften realisiert.

          Die beiden Hinweise miteinander kombinieren, könnte zum Ergebnis führen (die vergrößerten Flächen könnten kurzzeitig, während der Mausbewegung und ganz kurz danach (eben die 0,3 Sekunden) noch Links nebenan überdecken. - Es sei denn, sie erhalten einen niedrigen z-index. Das würde dafür sorgen, dass man mit der Maus so lange über dem Elternelement bleibt, bis man das Kindelement erreicht und kann schon sofort auf das Kind-Element klicken, weil das Elternelement darunter gestapelt wird. Kommt auf einen Versuch an!

          Ich brauche aber Hilfe mit dem JS — wollen wir gemeinsam basteln, @Gunnar Bittersmann ?

          Ich stelle das mal auf GitHub bereit. Wer will kann mitmachen.

          Marc

    3. @@Gunnar Bittersmann

      Una Kravets hat da eine Lösung mit :focus-within vorgestellt. Für kleine Menüs mag die durchaus brauchbar sein

      In Browsern, die :focus-within unterstützen. Für Edge (und IE, falls der noch ein Thema sein sollte) und einige Mobilbrowser braucht man einen Polyfill.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. @alle: Au secours! Hilfe!

        Jetzt kamen so viele Vorschläge mit Varianten, die nur ein Insider versteht. Da bin ich nun jedenfalls total überfordert. Ich suche eine gute Lösung nur für folgendes:

        Item1   (ruft Seite1 auf)
        Item2
        Item3
        

        Wenn Item1 überfahren wird mit Maus oder berührt wird (und was sonst noch in Frage kommt für die Auswahl dieses Items), soll das Untermenu aufklappen:

        
        Item1   (ruft Seite1 auf)
          Item11 (ruft Kapitel1 auf Seite 1 auf)
          ...…
          Item14  (ruft Kapitel4 auf Seite 1 auf)
        Item2
        Item3
        
        1. Hej Gerhard1,

          Da hast du ein gutes Konzept! Ich werde dir gerne dabei später helfen. Allerdings habe ich jetzt keine Zeit und die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch @Christian Kruse : Beitrag wieder auf ungelesen setzen).

          Daher wäre es nett wenn du einfach heute Abend noch mal nachfragst, falls ich vergessen sollte, dir dafür etwas zu schreiben.

          Marc

          1. Tach!

            [...] die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch @Christian Kruse : Beitrag wieder auf ungelesen setzen).

            Du könntest ihn als interessant markieren, also den Beitrag.

            dedlfix.

            1. Hej dedlfix,

              [...] die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch @Christian Kruse : Beitrag wieder auf ungelesen setzen).

              Du könntest ihn als interessant markieren, also den Beitrag.

              Davon habe ich schon viele - was ich daran mal interessant fand, weiß kein Mensch mehr. Am wenigsten ich selber. 😂

              Marc

          2. Hallo marctrix,

            Da hast du ein gutes Konzept! Ich werde dir gerne dabei später helfen. Allerdings habe ich jetzt keine Zeit und die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch @Christian Kruse : Beitrag wieder auf ungelesen setzen).

            Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). 😀

            LG,
            CK

            1. Hej Christian,

              Hallo marctrix,

              Da hast du ein gutes Konzept! Ich werde dir gerne dabei später helfen. Allerdings habe ich jetzt keine Zeit und die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch @Christian Kruse : Beitrag wieder auf ungelesen setzen).

              Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). 😀

              Dann kommt das wohl nicht zurück?

              Marc

              1. Hallo marctrix,

                Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). 😀

                Dann kommt das wohl nicht zurück?

                Es wurde halt entfernt als Vereinfachung und um das UI-Cluttering zu reduzieren. Ich hab per se auch kein Problem damit, dass in V5 wieder einzuführen. Müsste man sich halt dann überlegen, wie, damit nicht wieder 234234234 Icons vor jeder Nachricht stehen.

                LG,
                CK

                1. Hej Christian,

                  Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). 😀

                  Dann kommt das wohl nicht zurück?

                  Es wurde halt entfernt als Vereinfachung und um das UI-Cluttering zu reduzieren. Ich hab per se auch kein Problem damit, dass in V5 wieder einzuführen. Müsste man sich halt dann überlegen, wie, damit nicht wieder 234234234 Icons vor jeder Nachricht stehen.

                  Habe mir schon so etwas gedacht und ja: zu viele Optionen sind eine Barriere. Wenn das nicht zu aufwändig wäre, würde ich mir wünschen, dass es in den Einstellungen zwei Radio-Buttons „eingeschränkte Optionen“ und „alle Optionen“ gäbe.

                  Dann kann das jeder selber ein- und ausschalten. Als default halte ich die wenigen Optionen für sinnvoll.

                  Marc

                  1. Hallo marctrix,

                    Habe mir schon so etwas gedacht und ja: zu viele Optionen sind eine Barriere. Wenn das nicht zu aufwändig wäre, würde ich mir wünschen, dass es in den Einstellungen zwei Radio-Buttons „eingeschränkte Optionen“ und „alle Optionen“ gäbe.

                    Hm. Was ich machen könnte wäre eine Klasse auf das Body- oder HTML-Element zu setzen und dann via CSS Bedienelemente auszublenden.

                    Ein auslassen in den Templates wäre sehr aufwendig zu pflegen und noch aufwendiger zu testen…

                    LG,
                    CK

                    1. Hej Christian,

                      Hm. Was ich machen könnte wäre eine Klasse auf das Body- oder HTML-Element zu setzen und dann via CSS Bedienelemente auszublenden.

                      Ein auslassen in den Templates wäre sehr aufwendig zu pflegen und noch aufwendiger zu testen…

                      Verstehe. Für mich allein ohnehin zu viel Aufwand. Es hat niemand „ich auch“ geschrien. Also würde ich vorschlagen, es zu lassen. Komisch. Ich habe mir das schon oft gewünscht…

                      Marc

                      1. Hallo marctrix,

                        Verstehe. Für mich allein ohnehin zu viel Aufwand. Es hat niemand „ich auch“ geschrien. Also würde ich vorschlagen, es zu lassen. Komisch. Ich habe mir das schon oft gewünscht…

                        Warum ist dir das ausblenden via CSS nicht genug? 😉 Das sähe so aus: du setzt die Konfigurations-Option und dementsprechend wird enhanced oder simple auf <html> gesetzt. Und für die Klasse simple gäbe es z.B. vordefiniert im Foren-Stylesheet solche Regeln:

                        .simple .thread .message .mark-interesting { display:none; }
                        .simple .thread .message .mark-unread { display:none; }
                        

                        LG,
                        CK

                        1. Hej Christian,

                          Warum ist dir das ausblenden via CSS nicht genug? 😉

                          Weil ich nicht möchte, dass andere mehr Daten laden müssen, für etwas das ich mir wünsche aber sonst niemand braucht.

                          Das fände ich unfair.

                          Ein schnelles web ist ein gutes web.

                          Datensparsamkeit (hier mal ohne den Bezug zur DSGVO) ist immer gut.

                          Marc

                          PS: Ich weiß aber das Angebot zu schätzen! Danke für deine Bereitschaft!

          3. OK, ich freue mich!

            1. Hej Gerhard1,

              Also habe ich das richtig verstanden, dass du nur wenige Seiten hast. Die erste Ebene der Navigation entspricht daher einer Seite, die Unterpunkte gehen auf bestimmte Stellen (Kapitel) auf derselben Seite?

              Dann muss nur die erste Ebene der Navigation zugänglich sein. Da ich immer die einfachste Lösung für die beste halte, würde ich ich persönlich so vorgehen:

              Die Links der ersten Ebene sind immer verfügbar. Die Links in der zweiten Ebene sind nebensächlich. Setz sie um, wie du kannst (und mach das mit der Zeit und den hier erhaltenen Tipps) besser. Ich versuche mich gerade an einem zugänglichen Menü, aber ich weiß weder, ob das erfolgreich wird, noch weiß ich, wann es fertig wird.

              Meine Lösung für Deinen Fall:

              #HTML

              	<nav>
              		<ul>
              			<li>
              				<a href="">Item 1</a>
              				<ul>
              					<li><a href="">Subitem 1</a></li>
              					<li><a href="">Subitem 2</a></li>
              					<li><a href="">Subitem 3</a></li>
              					<li><a href="">Subitem 4</a></li>
              					<li><a href="">Subitem 5</a></li>
              				</ul>
              			</li>
              			<li>
              				<a href="">Item 2</a>
              				<ul>
              					<li><a href="">Subitem 1</a></li>
              					<li><a href="">Subitem 2</a></li>
              					<li><a href="">Subitem 3</a></li>
              					<li><a href="">Subitem 4</a></li>
              					<li><a href="">Subitem 5</a></li>
              				</ul>
              			</li>
              			<li>
              				<a href="">Item 3</a>
              				<ul>
              					<li><a href="">Subitem 1</a></li>
              					<li><a href="">Subitem 2</a></li>
              					<li><a href="">Subitem 3</a></li>
              					<li><a href="">Subitem 4</a></li>
              					<li><a href="">Subitem 5</a></li>
              				</ul>
              			</li>
              			<li>
              				<a href="">Item 4</a>
              				<ul>
              					<li><a href="">Subitem 1</a></li>
              					<li><a href="">Subitem 2</a></li>
              					<li><a href="">Subitem 3</a></li>
              					<li><a href="">Subitem 4</a></li>
              					<li><a href="">Subitem 5</a></li>
              				</ul>
              			</li>
              			<li>
              				<a href="">Item 5</a>
              				<ul>
              					<li><a href="">Subitem 1</a></li>
              					<li><a href="">Subitem 2</a></li>
              					<li><a href="">Subitem 3</a></li>
              					<li><a href="">Subitem 4</a></li>
              					<li><a href="">Subitem 5</a></li>
              				</ul>
              			</li>
              		</ul>
              	</nav>
              

              #CSS

              
              		nav > ul {
              			display: flex;
              			flex-wrap: wrap;
              		}
              		nav ul {
              			margin-left:0;
              			padding-left: 0;
              			list-style: none;
              		}
              		nav li {
              			position:relative;
              			min-width: 15em;
              		}
              		nav li li {
              			position: absolute;
              			z-index: -1;
              			top:0;
              			left: 0;
              		}
              		nav li:focus-within li,
              		nav li:hover li {
              			position: static;
              		}
              		nav a {
              			display: block;
              			padding: 1em;
              			color: #000;
              			background: #fa0;
              		}
              

              Warum reicht das erst mal? Weil alle Seiten erreichbar sind! Niemand wird so ausgeschlossen!

              Auf den Unterseiten solltest du die Seiteninterne Navigation noch mal einbauen, also so was in der Art wie:

              #HTML

              <!doctype html>
              <html>
              <head>
              	<meta charset="UTF-8">
              	<title>Name des Dokumentes</title>
              </head>
              <body>
              <a href="#content" class="visuallyhidden focusable">Zum Hauptinhalt</a>
              <header>
              […]
              </header>
              <main id="content">
              <article>
                <header>
                  <h1>Name des Textes>
              		<ul>
              			<li><a href="#">Kapitel 1</a></li>
              			<li><a href="#">Kapitel 2</a></li>
              			<li><a href="#">Kapitel 3</a></li>
              			<li><a href="#">Kapitel 4</a></li>
              			<li><a href="#">Kapitel 5</a></li>
              		</ul>
                </header>
               <section>
                  <h2>Kapitel 1</h2>
                  […]
                </section>
               <section>
                  <h2>Kapitel 2</h2>
                  […]
                </section>
              
              [usw]
              </article>
              <footer>
              […]
              </footer >
              
              </body>
              </html>
              
              

              Für den Skiplink (Damit kommen Tastatur-Nutzer sofort zum Inhalt) am Anfang des Body bräuchtest du noch die folgenden beiden Klassen.

              .visuallyhidden {
                  border: 0;
                  clip: rect(0 0 0 0);
                  height: 1px;
                  margin: -1px;
                  overflow: hidden;
                  padding: 0;
                  position: absolute;
                  width: 1px;
                  white-space: nowrap; /* 1 */
              }
              
              
              .visuallyhidden.focusable:active,
              .visuallyhidden.focusable:focus {
                  clip: auto;
                  height: auto;
                  margin: 0;
                  overflow: visible;
                  position: static;
                  width: auto;
                  white-space: inherit;
              }
              

              Damit kommt jeder auf alle Deine Seiten und kann dann an sinnvoller Stelle weiter navigieren. Das erfüllt alle Anforderungen an gute Zugänglichkeit (abgesehen davon dass die Navigation eh schon für fast alle erreichbar ist, denn die Links werden nie komplett entfernt; die zweite Ebene wird nur hinter die erste geschoben und so vor Sehenden verborgen. Blinde kommen jederzeit an alle Links, Sehende mit Maus und Nutzer moderner Browser mit Unterstützung von focus-within können sich die wieder zurück holen. Das von mir angesprochene Problem mit dem time-out werde ich noch versuchen zu lösen, aria-Attribute dürften so komplett überflüssig sein).

              Im wesentlichen habe ich den Code aus dem oben verlinkten GitHub-repository übernommen und empfehle dir, statt paste und copy den Code aus dem Repository zu nehmen. Dann wird es leichter, die Updates zu übernehmen, die sicher kommen werden.

              Marc

              1. Ich verbessere mal

                 <nav>
                		<ul>
                			<li>
                				<a href="#navgroup1">Item 1</a>
                				<ul id="navgroup1">
                					<li><a href="">Subitem 4</a></li>
                					<li><a href="">Subitem 5</a></li>
                				</ul>
                			</li>
                ...
                

                Wenn man schon Links für labels verwendet, sollte man auch dessen Fähigkeiten nutzen.

                Deshalb werte ich hier auch :target aus.

                nav ul:target,
                nav a:focus + ul,
                nav a:hover + ul
                 {height:auto}
                
                1. Hej beatovich,

                   <nav>
                  		<ul>
                  			<li>
                  				<a href="#navgroup1">Item 1</a>
                  				<ul id="navgroup1">
                  					<li><a href="">Subitem 4</a></li>
                  					<li><a href="">Subitem 5</a></li>
                  				</ul>
                  			</li>
                  ...
                  

                  Wenn man schon Links für labels verwendet, sollte man auch dessen Fähigkeiten nutzen.

                  So war es nicht gemeint, sorry, mag missverständlich sein mit den ganzen Hashtags an stelle von Beispiel-Links. Hier noch mal:

                  	<nav>
                  		<ul>
                  			<li>
                  				<a href="seite1.html">Erstes Dokument</a>
                  				<ul>
                  					<li><a href="seite1.html#kapitel1">Erstes Dokument Kapitel 1</a></li>
                  					<li><a href="seite1.html#kapitel2">Erstes Dokument Kapitel 2</a></li>
                  					<li><a href="seite1.html#kapitel3">Erstes Dokument Kapitel 3</a></li>
                  					<li><a href="seite1.html#kapitel4">Erstes Dokument Kapitel 4</a></li>
                  					<li><a href="seite1.html#kapitel5">Erstes Dokument Kapitel 5</a></li>
                  				</ul>
                  			</li>
                  […]
                  </ul>
                  

                  Marc

                  1. hallo

                    So war es nicht gemeint, sorry, mag missverständlich sein mit den ganzen Hashtags an stelle von Beispiel-Links. Hier noch mal:

                    	<nav>
                    		<ul>
                    			<li>
                    				<a href="seite1.html">Erstes Dokument</a>
                    				<ul>
                    					<li><a href="seite1.html#kapitel1">Erstes Dokument Kapitel 1</a></li>
                    					<li><a href="seite1.html#kapitel2">Erstes Dokument Kapitel 2</a></li>
                    					<li><a href="seite1.html#kapitel3">Erstes Dokument Kapitel 3</a></li>
                    					<li><a href="seite1.html#kapitel4">Erstes Dokument Kapitel 4</a></li>
                    					<li><a href="seite1.html#kapitel5">Erstes Dokument Kapitel 5</a></li>
                    				</ul>
                    			</li>
                    […]
                    </ul>
                    

                    Gut, damit haben wir aber effektiv 2 Arten vn Navigationen, nämlich

                    • eine 1-level Navigation für alles was nicht hovert sondern nur focussiert&klickt.
                    • eine 2-Level Navigation für alle Geräte, die fokussieren von klicken trennen können oder hover erzeugen.
                    --
                    Neu im Forum! Signaturen kann man ausblenden!
                    1. Hej beatovich,

                      Gut, damit haben wir aber effektiv 2 Arten vn Navigationen, nämlich

                      • eine 1-level Navigation für alles was nicht hovert sondern nur focussiert&klickt.
                      • eine 2-Level Navigation für alle Geräte, die fokussieren von klicken trennen können oder hover erzeugen.

                      Jein, weil die zweite zusätzlich immer jedem zur Verfügung steht.

                      Erfüllt werden die folgenden relevanten SCs der WCAG (Dein Hinweis bezog sich vermutlich auf SC 3.2.3?):

                      #2.1.2 No Keyboard Trap

                      ##Begründung

                      Die Seite lässt sich komplett durchtabben, der Tastaturfokus bleibt nirgends „hängen“.

                      2.4.1 Bypass Blocks

                      ##Begründung

                      HTML wird bestimmungsgemäß verwendet, also beispielsweise Listen für die Navigation. Listen lassen sich für Screenreader-Nutzer per Tastendruck überspringen, so dass diese nciht komplett durchgehabt werden müssen.

                      Was mein GitHub-Beispiel (noch) nicht enthält, aber mein ergänzender Beitrag für Gerhard1: für sehende Tastatur-Nutzer gehören da noch Skiplinks an den Seitenanfang.

                      Hier habe ich mich erst mal ausschließlich um die Navigation gekümmert.

                      #2.4.3 Focus Order

                      ##Begründung

                      Beim Durchtabben der Seite folgt der Fokus der natürlichen Leserichtung des Kulturbereiches, in dessen Sprache die Seite hauptsächlich verfasst ist (hier Deutsch mit einer typischen Leserichtung von links nach rechts, dann von oben nach unten)

                      #2.4.4 Link Purpose (In Context)

                      ##Begründung

                      Der programmatisch ermittelbare Linktext (also der accessible name, hier Name des HTML-Dokumentes und ggfs. Kapitelname) sind aussagekräftig, verständlich und eindeutig.

                      #2.4.7 Focus Visible

                      ##Begründung

                      Die Hervorhebung des fokussierten Elementes ist mindestens so deutlich wie die Hervorhebung beim Überfahren mit der Maus (tatsächlich sind meine Hervorhebungen immer besonders deutlich, da ich selber gerne mit der Tastatur navigiere).

                      #3.2.4 Consistent Identification

                      #3.2.3 Consistent Navigation

                      ##Begründung

                      Die Navigationselemente werden auf allen Seiten eingesetzt und verändern sich weder im Aussehen, noch in ihrer Position oder semantischen Auszeichnung. Sie können also aufgrund ihrer identischen Darstellung über das gesamte Angebot hinweg leicht identifiziert werden.

                      #Nicht erfüllte SCs

                      ##2.4.5. Multiple ways to locate web pages

                      Begründung

                      Die einzelnen Seiten sind ausschließlich über die Hauptnavigation erreichbar. Alternative Zugangswege fehlen. Eine Sitemap und/oder Suche wären als Abhilfe geeignet und sollten daher in die reale Webseite noch integriert werden. In dem vorliegenden Beispiel lässt sich das prinzipbedingt (Ausschnitt aus einer Webseite, keine kompletten Dokumente) nicht umsetzen

                      Wenn ich etwas nicht bedacht habe, @beatovich , bitte ich um Nachricht. Ich werde das dann mit berücksichtigen.

                      Marc

                      1. hallo

                        Jein, weil die zweite zusätzlich immer jedem zur Verfügung steht.

                        Du willst sagen, weil die (für Mobiles unerreichbare) 2nd-Level Navigation eine redundante Funktion einnimmt (sie nimmt die seiteninterne Navigation der Zielseite vorweg), ist mein Einwand unwichtig?

                        Dann wollen wir hoffen, dass das auch so bleibt.

                        Ich kann mich übrigens mit dem Gedanken Tastatur-User sehen schlecht nicht so recht anfreunden.

                        Aber ich habe auch schon Blinde auf der Strasse angebrüllt.

                        --
                        Neu im Forum! Signaturen kann man ausblenden!
                        1. Hej beatovich,

                          Jein, weil die zweite zusätzlich immer jedem zur Verfügung steht.

                          Du willst sagen, weil die (für Mobiles unerreichbare) 2nd-Level Navigation eine redundante Funktion einnimmt (sie nimmt die seiteninterne Navigation der Zielseite vorweg), ist mein Einwand unwichtig?

                          Nein. Ich glaubte, dein Einwand zielt auf verschiedene Darstellungen (SC 3.2.3) ab, die verwirren könnten. Ich meine aber das trifft nicht zu, weil das Erscheinungsbild konsistent ist.

                          Das Anbieten von Navigationen über mehrere Stufen ist seit jeher Accessibility-Praxis und bei großen Sites oft unvermeidbar (um die Hauptnavigation nicht zu überfrachten, siehe Über-Kreuz-Navigation, wie z.B. hier auf www.ble.de)

                          Dann wollen wir hoffen, dass das auch so bleibt.

                          Niemand schaut in die Zukunft und oft sind Anpassungen nötig, wenn eine Seite wächst. Das hier gezeigte Konzept kann aber mitwachsen. Dann erscheinen an der Stelle, wo sich derzeit die Kapitel-Überschriften befinden halt verschachtelte Listen. Hier lässt sich eine dritte Navigationsebene prima unterbringen (würde ich aus der Kopf-Navi raushalten, aus diversen Gründen).

                          Ich kann mich übrigens mit dem Gedanken Tastatur-User sehen schlecht nicht so recht anfreunden.

                          Musst du auch nicht. Wer verlangt das denn von dir?

                          Aber ich habe auch schon Blinde auf der Strasse angebrüllt.

                          Kann nötig sein. 😉

                          Marc

                          1. hallo

                            Nein. Ich glaubte, dein Einwand zielt auf verschiedene Darstellungen (SC 3.2.3) ab, die verwirren könnten. Ich meine aber das trifft nicht zu, weil das Erscheinungsbild konsistent ist.

                            Na mach erst mal den mobile Test.

                            Das Anbieten von Navigationen über mehrere Stufen ist seit jeher Accessibility-Praxis und bei großen Sites oft unvermeidbar (um die Hauptnavigation nicht zu überfrachten, siehe Über-Kreuz-Navigation, wie z.B. hier auf www.ble.de)

                            Ich kann dem durchaus zustimmen. Deshalb verwenden wir ja Javascript, aria-expanded und aria-hidden für jene die auf Animationen nicht verzichten wollen. Auf jeden Fall will man die Überfrachtung einer Seite mit fokusierbaren Elementen vermeiden, gerade dann, wenn sich diese als redundant erweisen.

                            Ich kann mich übrigens mit dem Gedanken Tastatur-User sehen schlecht nicht so recht anfreunden.

                            Musst du auch nicht. Wer verlangt das denn von dir?

                            Du hast versucht, meine Bemerkung betreffs Tab-Taste mit Screenreadern zu beantworten.

                            --
                            Neu im Forum! Signaturen kann man ausblenden!
                            1. @marctrix und beatovich: Vielen Dank für die Hilfe, für eure Mühe. Ich hoffe, dass ich die verschiedenen Korrekturen richtig in das Original einbaue. Da ich morgen für 2 Wochen verreise, wird es etwas dauern. Falls ich dann noch Fragen habe, soll ich diese in diesem thread stellen oder einen neuen anfangen?

                              1. Hej Gerhard1,

                                @marctrix und beatovich: Vielen Dank für die Hilfe, für eure Mühe.

                                Keine Ursache. Vielleicht entsteht dabei ein gutes Menü für das Wiki oder gar ein Tutorial — mal schauen.

                                Ich hoffe, dass ich die verschiedenen Korrekturen richtig in das Original einbaue.

                                Wenn es fertig ist, werde ich auch eine fünfzeilige Anleitung schreiben. Mehr braucht es hoffentlich nicht.

                                Da ich morgen für 2 Wochen verreise, wird es etwas dauern.

                                Viel Spaß und komm gesund zurück!

                                Falls ich dann noch Fragen habe, soll ich diese in diesem thread stellen oder einen neuen anfangen?

                                Vermutlich sind das dann konkretere Dinge zu speziellen Aspekten. Da macht dann meiner Meinung nach ein neuer Thread Sinn. Du siehst ja, die können schnell länglich werden hier 😉

                                Marc

          4. Daher wäre es nett wenn du einfach heute Abend noch mal nachfragst, falls ich vergessen sollte, dir dafür etwas zu schreiben.

            Was hiermit geschieht.

            1. Hej Gerhard1,

              Daher wäre es nett wenn du einfach heute Abend noch mal nachfragst, falls ich vergessen sollte, dir dafür etwas zu schreiben.

              Was hiermit geschieht.

              Bin erst jetzt dazu gekommen.

              Marc

  5. Aloha ;)

    was habe ich bei folgendem falsch gemacht?

    <ul>
      <li class="menu"><a href="/wir.shtml">Über uns</a></li>
        <ul>
    	  <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
    	  <li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
        </ul>
      </li> 
    </ul>  
    
    

    Tipp: Zähl mal in deinem Quelltext die Vorkommen von </li>. Da ist eins zu viel.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    1. @@Camping_RIDER

      Tipp: Zähl mal in deinem Quelltext die Vorkommen von </li>. Da ist eins zu viel.

      Tipp: Zähl mal in diesem Thread die Vorkommen von Postings, die das schon erwähnten.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Aloha ;)

        Tipp: Zähl mal in deinem Quelltext die Vorkommen von </li>. Da ist eins zu viel.

        Tipp: Zähl mal in diesem Thread die Vorkommen von Postings, die das schon erwähnten.

        Genau 1. Das von Felix. Alle anderen enthalten Andeutungen, die man in diese Richtung verstehen kann. Aber zum Beispiel war Marc mit dem Hinweis auf den vermeintlich falschen Selektor irgendwie auf dem Holzweg und du hast dich auf Marc bezogen. Wenn ich mal noch mitrechne, dass du den Markup Checker erwähnt hast (was ja auch zum selben führt), dann sind wir bei 2.

        Also: 2 Postings, in denen aber neben dem Flüchtigkeitsfehler, den der TO gesucht hat, noch viele andere richtige (und wichtige) Anmerkungen standen, die den TO aber offensichtlich ziemlich überfahren haben. Deshalb dachte ich, ich versuchs nochmal ohne das Drumrum.

        Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        1. @@Camping_RIDER

          Tipp: Zähl mal in deinem Quelltext die Vorkommen von </li>. Da ist eins zu viel.

          Tipp: Zähl mal in diesem Thread die Vorkommen von Postings, die das schon erwähnten.

          Genau 1. Das von Felix. Alle anderen enthalten Andeutungen, die man in diese Richtung verstehen kann. Aber zum Beispiel war Marc mit dem Hinweis auf den vermeintlich falschen Selektor irgendwie auf dem Holzweg und du hast dich auf Marc bezogen.

          Marc stellte vorher schon die entscheidende Frage „Hat das Element mit der Klasse menu denn eine ul und darin weitere li?“ Darauf hatte ich mich bezogen.

          Wenn ich mal noch mitrechne, dass du den Markup Checker erwähnt hast (was ja auch zum selben führt)

          Und den visuellen Test. Gleich der erste dort vorgestellte bezieht sich auf falsch verschachtelte Listen.

          Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt.

          Sarkartisch wäre gewesen, wenn ich „Da ist eins zu viel“ aus deinem Tipp mit in meinen Tipp übernommen hätte.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Aloha ;)

            Marc stellte vorher schon die entscheidende Frage „Hat das Element mit der Klasse menu denn eine ul und darin weitere li?“ Darauf hatte ich mich bezogen.

            Aus Sicht des Anfängers führt das zwar in die richtige Richtung, aber über einen Umweg. Der Anfänger kann da jetzt auch Antworten, ja, da mach ich ja ein li auf und nach der ul mach ichs wieder zu. Die Einrückung lässt das ja auch so als Intention erahnen.

            Dass der Selektor nicht selektiert weil irgendwas falsch ist, ist ja eigentlich schon klar. Auch dem TO. Dass es explizit das eine schließende </li> zu viel ist, dazu braucht man schon einen gewisses Überblick, der u.U. gerade am Anfang, wenn sowieso alles auf einen einprasselt, nur schwierig zu erlangen ist.

            Wenn ich mal noch mitrechne, dass du den Markup Checker erwähnt hast (was ja auch zum selben führt)

            Und den visuellen Test. Gleich der erste dort vorgestellte bezieht sich auf falsch verschachtelte Listen.

            ACK. Ich hab dich ja schon mitgerechnet. Trotzdem war auch in deinem Posting die rettende Erkenntnis hinter einem link versteckt und mit recht viel (korrektem und wichtigem, aber ablenkendem) Drumrum umgeben.

            Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt.

            Sarkartisch wäre gewesen, wenn ich „Da ist eins zu viel“ aus deinem Tipp mit in meinen Tipp übernommen hätte.

            Ich versichere dir, dass es so oder so gleich wirkt - nur vielleicht in einer anderen Intensität.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. @@Camping_RIDER

              Trotzdem war auch in deinem Posting die rettende Erkenntnis hinter einem link versteckt

              Was ist wohl wertvoller: den Fehler zu verraten oder dem Fragenden Werzeuge in die Hand zu geben, solche Fehler aufzuspüren – womit sie auch für den nächsten Fehler gerüstet wäre?

              Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt. Ich versichere dir, dass es so oder so gleich wirkt - nur vielleicht in einer anderen Intensität.

              Du erwartest doch nicht, dass ich eine solche Vorlage nicht ausnutze? 😜

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Aloha ;)

                Trotzdem war auch in deinem Posting die rettende Erkenntnis hinter einem link versteckt

                Was ist wohl wertvoller: den Fehler zu verraten oder dem Fragenden Werzeuge in die Hand zu geben, solche Fehler aufzuspüren – womit sie auch für den nächsten Fehler gerüstet wäre?

                Beides ist sinnvoll. Das Werkzeug mit an die Hand zu geben kann im ersten Moment aber auch überfordern. Mein Ansatz wäre der, dem Fragenden zunächst beim konkreten Problem den Fehler zu verraten und ihm dann das Werkzeug fürs nächste Mal an die Hand zu geben.

                Dein Weg hat auch seinen Charme, ohne Frage, aber er birgt auch die Gefahr, dass der Fragende gar nicht versteht was du von ihm willst, und auch nicht versteht, was er mit dem Werkzeug tun soll - denn er hat vielleicht noch gar nicht verstanden welcher Art sein Fehler war. Überforderung ist die Folge.

                Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt. Ich versichere dir, dass es so oder so gleich wirkt - nur vielleicht in einer anderen Intensität.

                Du erwartest doch nicht, dass ich eine solche Vorlage nicht ausnutze? 😜

                Nun, um ganz ehrlich zu sein halte ich die dadurch ausgelöste Diskussion a) für nicht sinnvoll und b) für den TO verwirrend.

                Demnach, ja, es wäre besser gewesen du hättest die Vorlage nicht ausgenutzt und meinen Tipp einfach so stehen lassen wie er war. Er war weder falsch noch nicht zielführend noch anderweitig eines Kommentars bedürftig.

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
              2. Lieber Gunnar,

                Was ist wohl wertvoller: den Fehler zu verraten oder dem Fragenden Werzeuge in die Hand zu geben, solche Fehler aufzuspüren – womit sie auch für den nächsten Fehler gerüstet wäre?

                das eine schließt das andere nicht aus! Je nach Wissensstand des Fragenden ist das Vermitteln eines Werkzeugs nicht immer möglich, weil er es deshalb vielleicht noch nicht zu nutzen versteht. Aber den Fehler nachvollziehen können, wenn er ihn selbst gemacht hat, ist dagegen durchaus auch dazu geeignet, künftige Fehler dieser Art zu vermeiden.

                Liebe Grüße,

                Felix Riesterer.

          2. Lieber Gunnar,

            Marc stellte vorher schon die entscheidende Frage „Hat das Element mit der Klasse menu denn eine ul und darin weitere li?“ Darauf hatte ich mich bezogen.

            ist diese Frage und die dahinter steckende Absicht dazu geeignet, von einem Anfänger sofort zielführend verstanden zu werden? Wie sich gezeigt hat: Nein.

            Und den visuellen Test. Gleich der erste dort vorgestellte bezieht sich auf falsch verschachtelte Listen.

            Warum ist es so schwer, einem Anfänger einfach zu sagen, dass er seine Elemente falsch verschachtelt hat?

            Sarkartisch wäre gewesen, wenn ich „Da ist eins zu viel“ aus deinem Tipp mit in meinen Tipp übernommen hätte.

            Ich fürchte, es ist für den Empfänger Deiner Nachricht genau dann sarka[s]tisch, wenn er es als solches empfindet. Wenn Du es nicht sarkastisch gemeint hast, dann war es anhand der pointierten Formulierungen in Deiner Antwort nicht eindeutig erkennbar. Vielleicht hättest Du weniger pointiert formulieren können? Dann wäre eine sarkastische Lesart und damit das Missverständnis bestimmt weniger möglich gewesen.

            Liebe Grüße,

            Felix Riesterer.

            1. @@Felix Riesterer

              Warum ist es so schwer, einem Anfänger einfach zu sagen, dass er seine Elemente falsch verschachtelt hat?

              Es ist nicht schwer, aber in die Zukunft gedacht auch nicht besonders hilfreich.

              Vielleicht hättest Du weniger pointiert formulieren können?

              Och menno. Der Witz hier war doch gerade, dass ich gar nicht groß formuliert habe, sondern Riders Formulierung leicht abgewandelt zurückgegeben habe.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  6. Hallo an alle Selfhtmler! Ich erinnere daher an meinen Beitrag Au secours! und hoffe auf Eure Hilfe

    1. Aloha ;)

      Ich erinnere daher an meinen Beitrag Au secours! und hoffe auf Eure Hilfe

      Hast du deinen ursprünglichen Flüchtigkeitsfehler denn jetzt gefunden? Ich hab versucht, dir da einen Schubs in die richtige Richtung zu geben, nur leider hat Gunnar das gleich gekapert. Das war so nicht in meinem Sinn.

      Natürlich sind die anderen Dinge, die gesagt wurden, richtig, und du sollst auch dein funktionierende Beispiel bekommen.

      Vielleicht hattest du deinen Fehler schon vor meinem Posting gefunden.

      Ich finds nur - gerade für einen Anfänger - auch wichtig, dass man versteht wo genau man was konkret falsch gemacht hat, wenn was nicht so tut wie es soll - selbst wenn vielleicht der Ansatz auch korrigiert werden muss.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
      1. Hallo Camping_RIDER,

        mit meinem ursprünglichen Beispiel habe ich mich gar nicht mehr auseinandergesetzt, da wie Du selbst geschrieben hast:

        Nun, um ganz ehrlich zu sein halte ich die dadurch ausgelöste Diskussion a) für nicht sinnvoll und b) für den TO verwirrend.

        Da wir einmal "nan" vorgeschlagen, an anderer Stelle "display: none;" in Frage gestellt, dann sei das Beispiel nicht für Touchscreen-Geräte geeignet, dann wird auf eine Lösung mit ":focus-within" verwiesen, und, und, und. Welchen Weg sollte ich daher einschlagen? Mein Beispiel weiterverfolgen? Ich bin total frustriert darüber, wie hier - postiv formuliert - um die richtige Lösung gestritten wird, der Fragende aber dümmer herausgeht als er heringekommen ist.

        1. Aloha ;)

          Ich bin total frustriert darüber, wie hier - postiv formuliert - um die richtige Lösung gestritten wird, der Fragende aber dümmer herausgeht als er heringekommen ist.

          Das kann ich gut verstehen!

          Ich versuche mal, dich durch den Wirrwar zu führen. Mein Vorschlag für dich (bitte nur die jeweils einzelnen Postings, nicht die darauf folgenden Postings):

          Wenn du verstehen willst, warum dein ursprüngliches Beispiel aus technischer Sicht nicht funktioniert hat, dann hier entlang.

          Wenn du wissen willst, wie du solche Fehler in Zukunft leicht aufspürst, dann lies den ersten Absatz hier.

          Wenn du wissen willst, warum eine Navigation heutzutage nicht mehr auf hover setzen sollte, und wie eine rein tastatur- und klickbedienbare Navigation aussehen könnte, hier entlang (Vorsicht: Felix' Vorschlag enthält recht viel sinnvolles, aber nicht ganz triviales Javascript - ganz ohne Javascript wirds aber sowieso nicht gehen).

          Ich kann dir leider grad selbst kein Beispiel geben - alles was ich auf Lager hätte ist zwar klickbedienbar, aber nicht tastaturbedienbar (da wenig / nur optionales Javascript) - deshalb möchte ich dir dazu nicht explizit raten. Außerdem weiß ich schon was passiert, wenn ich das hier verlinke, dann arten die Diskussionen wieder aus. Das ist nicht in deinem Sinn, also lass ich das.

          Im Wiki gibt es ein Tutorial, in dem ein Menü, wie du es suchst, zusammengebaut wird. Leider ist der Artikel noch nicht ganz vollständig, du solltest aber aus dem letzten darin zu findenden Live-Beispiel schon einiges sinnvolles ziehen können.

          Marc ist sehr kompetent darin, zugängliche und gleichzeitig möglichst minimale Beispiele zu liefern. Ich würde an deiner Stelle also auch an diesem Angebot dranbleiben!

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          1. Hallo

            +1 für dein auseinanderdröseln der Diskussion. Dennoch ein Kontra. Wer behauptet denn sowas?

            Wenn du wissen willst, warum eine Navigation heutzutage nicht mehr auf hover setzen sollte …

            We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:

            „Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“

            Tschö, Auge

            --
            Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
            Kleine freie Männer von Terry Pratchett
            1. hallo

              We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:

              „Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“

              Aber wer hover falsch einsetzt (hallo heise.de), der macht es Mausbenutzern noch schwerer.

              Die Maus ist die zuletzt zu berücksichtigende Option. Nur wenige Elemente in der Browsereigenen GUI reagieren auf hover. Meist blenden sie nur title Info ein.

              -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
              Kleine freie Männer von Terry Pratchett

              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. Hallo

                We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:

                „Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“

                Aber wer hover falsch einsetzt (hallo heise.de), der macht es Mausbenutzern noch schwerer.

                Wer auf der Autobahn falsch herum fährt, macht es den anderen Verkehrsteilnehmern schwer.

                Dass man etwas falsch machen/benutzen kann ist per se kein Grund, dieses Etwas nicht zu benutzen.

                Die Maus ist die zuletzt zu berücksichtigende Option.

                Sie ist eine zu berücksichtigende Technik. Das reicht.

                Nur wenige Elemente in der Browsereigenen GUI reagieren auf hover. Meist blenden sie nur title Info ein.

                Nur um das klarzustellen, sowohl ich, als auch, wenn ich ihn denn nicht völlig falsch verstanden habe, @Camping_RIDER, reden von der CSS Pseudoklasse :hover. Title-Attribute haben damit nichts zu tun, Links aber sehr wohl. Es spricht absolut nichts dafür, Mausbenutzern die Hervorhebung, die für Tastaturbenutzer eingefordert wird, zu verweigern.

                Das ist ein sowohl als auch.

                a:focus, a:hover {
                    /* was auch immer */
                }
                

                Tschö, Auge

                --
                Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                Kleine freie Männer von Terry Pratchett
                1. hallo

                  Nur um das klarzustellen, sowohl ich, als auch, wenn ich ihn denn nicht völlig falsch verstanden habe, @Camping_RIDER, reden von der CSS Pseudoklasse :hover. Title-Attribute haben damit nichts zu tun, Links aber sehr wohl. Es spricht absolut nichts dafür, Mausbenutzern die Hervorhebung, die für Tastaturbenutzer eingefordert wird, zu verweigern.

                  Da stimme ich natürlich zu

                  :focus, :hover {outline:2px solid orange}
                  

                  Das heisst aber noch lange nicht, dass das auf

                  :focus, :hover {/*anything*/}
                  

                  ausgedehnt werden soll.

                  --
                  Neu im Forum! Signaturen kann man ausblenden!
                2. @@Auge

                  Es spricht absolut nichts dafür, Mausbenutzern die Hervorhebung, die für Tastaturbenutzer eingefordert wird, zu verweigern.

                  Ja. Aber auch nichts dagegen.

                  Der Mausnutzer verfolgt ja seinen Cursor. Und dieser ändert sich über einem Link. Eine zusätzliche Kennzeichnung „hier ist ein Link“ mag ein netter Effekt sein oder auch nur Effekthascherei – notwendig ist das nicht unbedingt.

                  Man kann auch unterschiedliche Stile für :focus und :hover vorsehen:

                  • einen subtilen für Mausnutzer

                  • und einen deutlich erkennbaren für Tastaturnutzer:

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            2. Aloha ;)

              +1 für dein auseinanderdröseln der Diskussion. Dennoch ein Kontra. Wer behauptet denn sowas?

              Wenn du wissen willst, warum eine Navigation heutzutage nicht mehr auf hover setzen sollte …

              We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:

              „Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“

              ACK, mit "setzen sollte" meinte ich "nicht allein setzen sollte" oder "nicht hauptsächlich setzen sollte" oder "nicht in der Grundfunktionalität setzen sollte". Da war ich unpräzise.

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    2. Hallo Gerhard1,

      Dein CSS bereinigt:

      /* Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar */
      li.menu ul {
      		display: none;  	   
      }
      /* Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen. Das wird nicht gebraucht: li.menu:active ul li*/
      li.menu:hover ul, li.menu:focus ul {
         	display: block;
      		font-size: 0.9em;
      		font-style: italic;
      		margin-left: 2em;  	   
      }
      
      

      Dein HTML bereinigt:

      <ul>
      	<li class="menu" tabindex="0"><a href="/wir.shtml">Über uns</a>
      		<ul>
      			<li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
      			<li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
      		</ul>
      	</li> 
      </ul>
      
      

      Den tabindex="0" wie beatovich schon schrieb.

      Grüße, Martl

      1. @@Martl

        /* Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar */
        li.menu ul {
        		display: none;  	   
        }
        /* Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen. Das wird nicht gebraucht: li.menu:active ul li*/
        li.menu:hover ul, li.menu:focus ul {
           	display: block;
        		font-size: 0.9em;
        		font-style: italic;
        		margin-left: 2em;  	   
        }
        
        

        Getestet hast du das aber nicht‽ Das kann überhaupt nicht funktionieren.

        <ul>
        	<li class="menu" tabindex="0"><a href="/wir.shtml">Über uns</a>
        		<ul>
        			<li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
        			<li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
        		</ul>
        	</li> 
        </ul>
        
        

        Den tabindex="0" wie beatovich schon schrieb.

        Und dann? Dann kannst du das li-Element fokussieren; das Untermenü geht auf. Um dorthin zu gelangen: [Tab] – das a-Element „Über uns“ erhält den Fokus.

        Das heißt: das li-Element verliert den Fokus; das Untermenü geht zu, bevor man dahin gelangt.

        Wie ich schon schrieb, geht’s mit :focus-within. Dann ist es auch überhaupt nicht notwendig (sondern störend), dass das li-Element fokussierbar ist (weil das „Über uns“ ja fokussierbar ist).

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  7. Hi all, ich habe gerade diesen thread entdeckt und teilweise durchgelesen. Was mich wundert ist die Tatsache, dass man über ein Thema diskutiert, das doch millionenfach realisiert ist.

    Es gibt doch kaum einen Internetauftritt, der nicht solche Menus enthält. Also müsste es doch genügend Beispiele geben

    1. Hej Rolandi,

      Was mich wundert ist die Tatsache, dass man über ein Thema diskutiert, das doch millionenfach realisiert ist.

      Also müsste es doch genügend Beispiele geben

      Das denke ich auch jedesmal, wenn ich mich mal wieder auf die Suche nach einem barrierefreien Menü mache, man bleibt aber immer an denselben wenigen Kandidaten hängen, die meist nicht alle Anwendungsfälle abdecken oder sich nicht so frei gestalten lassen, wie von einem Designer gewünscht.

      Wenn man dann etwas selber entwickelt, gibt man das dann nicht frei. Dann gibt es zwar u. U. etwas barrierefreies, man findet es aber nicht, weil es kein GitHub-Repository o.ä. Mit Anleitung usw gibt.

      Wenn es auf einem Webseite eines Autohauses ein barrierefreies Menü gibt, wirst du es nie finden, wenn du nach „barrierefreies Menü“ suchst.

      Es gibt mit compare eine Website, die solche Komponenten im web sucht, dann beurteilt und auch Links zu den Seiten bereits stellt, wo die Komponenten verwendet werden.

      Leider fallen die dort vorgestellten Kandidaten meist bei den Tests durch.

      Meine aktuelle Idee: die Seiten besuchen und analysieren, die vom wcag als vorzeige-Projekte für die Umsetzung der Wcag 2.1 herhalten sollen…

      Marc

    2. hallo

      Hi all, ich habe gerade diesen thread entdeckt und teilweise durchgelesen. Was mich wundert ist die Tatsache, dass man über ein Thema diskutiert, das doch millionenfach realisiert ist.

      Es gibt doch kaum einen Internetauftritt, der nicht solche Menus enthält. Also müsste es doch genügend Beispiele geben

      Das einzig erstaunliche ist doch, dass ich nicht schreiben kann

      <nav useragent="render">
        <!-- Verschachtelte Liste -->
      </nav>
      

      Offensichtlich wissen nicht mal User-Agents wie man eine Navigation für alle Fälle rendert. Sonst hätte man da einen Standard.

      --
      Neu im Forum! Signaturen kann man ausblenden!
      1. Hi,

        Offensichtlich wissen nicht mal User-Agents wie man eine Navigation für alle Fälle rendert. Sonst hätte man da einen Standard.

        ich möchte zwar jetzt nicht eine erneute Spezialistndiskussion bzw. einen Disput auslösen. Der Themenstarter wollte sicher keine Standardlösung, die alles abdeckt, sondern, wenn ich es recht verstehe, ein Auswahlmenu mit einem darunterliegenden Menu ohne weitere Verschachtelungen.

        Dafür gibt es doch sicher mehrere empfehlenswerte Lösungen. Schön wäre es zu lesen:

        • Laut Selfhtml-Testbericht 2018:
        • Lösung a: +++
        • . . .
        • Lösung x: ---
        1. Hej Rolandi,

          Schön wäre es zu lesen:

          • Laut Selfhtml-Testbericht 2018:
          • Lösung a: +++
          • . . .
          • Lösung x: ---

          Die Idee finde ich cool. Das wäre eine Idee für den Blog!

          Vielleicht mache ich mal so was: Vortstellubg verschiedener Menüs, die von sich behaupten barrierefrei zu sein und eine Bewertung der vor- und Nachteile.

          Marc

        2. hallo

          ich möchte zwar jetzt nicht eine erneute Spezialistndiskussion bzw. einen Disput auslösen. Der Themenstarter wollte sicher keine Standardlösung, die alles abdeckt, sondern, wenn ich es recht verstehe, ein Auswahlmenu mit einem darunterliegenden Menu ohne weitere Verschachtelungen.

          So wie ich es verstehe, ist seine Navigation (kein Label sondern ein Link) bereits als Spezialfall anzusehen.

          Dafür gibt es doch sicher mehrere empfehlenswerte Lösungen.

          Dafür muss man erst mal verbreitete Anwendungen finden.

          --
          Neu im Forum! Signaturen kann man ausblenden!
          1. Ich weiß zwar nicht, was hier mit einem label gemeint ist. Es handelt sich nach meiner Ansicht um den trivialen, alltäglichen Fall:

            1. Man klickt, hovert oder was auch immer auf "über uns" und wird zur entsprechenden Seite "Über uns" umgeleitet.
            2. Man klickt, hovert oder was auch immer auf eine Untermenü von "über uns" und wird zum entsprechenden Kapitel (z.B. "Was wir tun") auf der Seite "Über uns" umgeleitet.

            Mehr doch nicht?

            1. hallo

              1. Man klickt, hovert oder was auch immer auf "über uns" und wird zur entsprechenden Seite "Über uns" umgeleitet.
              2. Man klickt, hovert oder was auch immer auf eine Untermenü von "über uns" und wird zum entsprechenden Kapitel (z.B. "Was wir tun") auf der Seite "Über uns" umgeleitet.

              Mehr doch nicht?

              <ul>
                <li class="menu"><a href="/wir.shtml">Über uns</a>
                  <ul>
              	  <li> <a href="/wir.shtml#wws">Wer wir sind</a></li>
              	  <li> <a href="/wir.shtml#wwt">Was wir tun</a></li>
                  </ul>
                </li> 
              </ul>
              

              Sobald dies ein Klappmenu sein soll, handelt es sich um einen Spezialfall. Klappmenues verlangen nach einem Button mit Label, welche die einzublendende Liste erst sichtbar macht.

              • Der Spazialfall ligt vor, indem die Links der Untergruppe NUR Fragmente der Seite der Hauptgruppe sein dürfen.
              • Der Spezialfall liegt vor, weil es mit mobiles keine Möglichkeit gibt, an die Untergruppe zu kommen.
              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. Hej beatovich,

                Mehr doch nicht?

                Sehe ich genauso, Rolandi.

                • Der Spazialfall ligt vor, indem die Links der Untergruppe NUR Fragmente der Seite der Hauptgruppe sein dürfen.

                Das ist egal. Hier spart es die Notwendigkeit von extra-Button, die aber immer entfällt, wenn man eine Überkreuznavigation anbietet, oder etwas vergleichbares wobei die 2. und weitere Menü-Ebenen auf den Unterseiten angeboten werden, ohne dass irgendetwas erst aufgeklappt werden muss.

                • Der Spezialfall liegt vor, weil es mit mobiles keine Möglichkeit gibt, an die Untergruppe zu kommen.

                Es gibt keine derartige Vorgabe. Es ist durchaus erlaubt die typischen Pfeile anzubieten.

                Marc

                1. hallo

                  Ich warte auf den Beweis, dass das verbreitete Praxis und nicht Spezialfall ist.

                  --
                  Neu im Forum! Signaturen kann man ausblenden!
                  1. Hej beatovich,

                    Ich warte auf den Beweis, dass das verbreitete Praxis und nicht Spezialfall ist.

                    Sag mir, wenn er dir in den Schoß gefallen ist!

                    Marc

                    1. hallo

                      Ich warte auf den Beweis, dass das verbreitete Praxis und nicht Spezialfall ist.

                      Sag mir, wenn er dir in den Schoß gefallen ist!

                      Ich kann mich nicht erinnern, diesem Fall je begegnet zu sein.

                      --
                      Neu im Forum! Signaturen kann man ausblenden!
                2. Mehr doch nicht?

                  Sehe ich genauso, Rolandi.

                  Gerade bin ich auf dies gestoßen "Verschachtelte Listen als Untermenüs". Dies müsste doch das sein, was Gerhard meinte.

                  1. Hej Rolandi,

                    Mehr doch nicht?

                    Sehe ich genauso, Rolandi.

                    Gerade bin ich auf dies gestoßen "Verschachtelte Listen als Untermenüs". Dies müsste doch das sein, was Gerhard meinte.

                    Das funktioniert nur auf dem Desktop, wenn man sehen und eine Maus bedienen kann, ist also für die meisten Benutzer unbedienbar.

                    Marc

                  2. @@Rolandi

                    Gerade bin ich auf dies gestoßen "Verschachtelte Listen als Untermenüs". Dies müsste doch das sein, was Gerhard meinte.

                    Nein, das ist grober Unfug.

                    „Mit dem Selektor .menu li:hover ul wird nun die Stildefinition für den Hover-Effekt auf die geschachtelte Aufzählungsliste angewandt. Mit der Einstellung display: block; zeigen Sie diese an.“

                    Nein. Das funktioniert eben nicht. Die wenigsten Geräte haben sowas wie :hover – und selbst diese nur für einen Teil der Nutzer.

                    Wie hier schon mehrfach gesagt wurde, muss ein solches Menü sowohl mit Tastatursteuerung als auch mit Touchscreen bedienbar sein.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Dies müsste doch das sein, was Gerhard meinte.

                      Nein, das ist grober Unfug.

                      Beachte: Der Ton macht die Musik!

                      1. Aloha ;)

                        Dies müsste doch das sein, was Gerhard meinte.

                        Nein, das ist grober Unfug.

                        Beachte: Der Ton macht die Musik!

                        Völlig richtig.

                        Allerdings ist es auch nicht gerade schön, dass in einem Thread, in dem so etwa jedes zweite Posting betont, dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten und eben deshalb kein reines Hover-Menü genügt, ein vermeintlich funktionierendes Beispiel verlinkt wird, in dem aber wieder nur ein reines nicht-zugängliches Hover-Menü gezeigt wird.

                        Das grenzt schon fast ein wenig an Ignoranz und - um im Bild zu bleiben - mag damit das Notenbild sein, aus dem Gunnar dann diese Musik macht.

                        Womit ich nicht verteidigen will, dass jemand diese Musik dann auch noch freiwillig spielt.

                        Grüße,

                        RIDER

                        --
                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                        1. Hej Camping_RIDER,

                          Dies müsste doch das sein, was Gerhard meinte.

                          Nein, das ist grober Unfug.

                          Beachte: Der Ton macht die Musik!

                          Völlig richtig.

                          Allerdings ist es auch nicht gerade schön, dass in einem Thread, in dem so etwa jedes zweite Posting betont, dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten und eben deshalb kein reines Hover-Menü genügt, ein vermeintlich funktionierendes Beispiel verlinkt wird, in dem aber wieder nur ein reines nicht-zugängliches Hover-Menü gezeigt wird.

                          Das war @Rolandi vermutlich gar nicht bewusst.

                          Er kann ja nichts dafür, dass so eine große Zeitung so einen Quatsch online stellt.

                          Marc

                        2. hallo

                          Allerdings ist es auch nicht gerade schön, dass in einem Thread, in dem so etwa jedes zweite Posting betont, dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten und eben deshalb kein reines Hover-Menü genügt, ein vermeintlich funktionierendes Beispiel verlinkt wird, in dem aber wieder nur ein reines nicht-zugängliches Hover-Menü gezeigt wird.

                          Dagegen, dass PC-Magazin eine no-js Navigation bereitstellt, ist erst mal nichts einzuwenden, auch wenn in dem Fall :focus{} fehlt.

                          Aber dass ich bei Javascript dann nichts vollständig durchdachtes erhalte, ist der eigentliche Schwachpunkt.

                          Mich irritiert aber die Doppelfunktion als Link/:hover-label. Ich könnte diese Doppelfunktion vollkommen übersehen, würde ich nicht zufällig im Firefox unten Links die url eingeblendet sehen.

                          Wie ich schon erwähnte, habe ich solche Navigationen noch nicht beobachtet, was bedeutet, dass sie verbreiteter sind als ich es wahrnehme, oder dies tatsächlich eine seltene Ausnahme ist.

                          Ich kann diese Art der Navigation nicht unterstützen.

                          --
                          Neu im Forum! Signaturen kann man ausblenden!
                          1. @@beatovich

                            Dagegen, dass PC-Magazin eine no-js Navigation bereitstellt, ist erst mal nichts einzuwenden, auch wenn in dem Fall :focus{} fehlt.

                            Bei Tastaturnavigation fehlt das Untermenü.

                            Können wir bitte aufhören, bei unbedienbarem[1] Zeugs davon zu reden, dass da „nichts gegen einzuwenden“ wäre? Danke.

                            LLAP 🖖

                            --
                            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

                            1. nicht allgemein bedienbar ist allgemein nicht bedienbar, kurz unbedienbar ↩︎

                        3. @@Camping_RIDER

                          dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten

                          Nei-en, Menüs sollen mindestens tastaturbedienbar und klickbedienbar und touchbedienbar sein. Was die Mindestanforderung nicht erfüllt, ist nicht bedienbar.

                          … mag damit das Notenbild sein, aus dem Gunnar dann diese Musik macht.

                          Womit ich nicht verteidigen will, dass jemand diese Musik dann auch noch freiwillig spielt.

                          Wer nur Dur-Akkorde mag, der soll Schlager hören. Zu Musik gehören auch Moll-Akkorde; die machen Musik nicht schlechter.

                          LLAP 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. Aloha ;)

                            dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten

                            Nei-en, Menüs sollen mindestens tastaturbedienbar und klickbedienbar und touchbedienbar sein. Was die Mindestanforderung nicht erfüllt, ist nicht bedienbar.

                            Ich weiß, dass du gerne in Schwarz und Weiß malst. Ich habe das an dieser Stelle bewusst nicht getan. Ich habe auch bewusst „sollten“ statt „müssen“ geschrieben.

                            Die Diskussion, dass wir hier nicht dazu da sind, um Anderen Vorschriften zu machen, hatten wir schon oft. Wir geben Tipps und Hinweise, die Leser müssen wissen was sie daraus machen.

                            Es macht übrigens auch manchmal Sinn, Mindeststandards aus pädagogischen Gründen bewusst anders zu setzen. Zum Beispiel dann, wenn man davon ausgeht, dass man dadurch eher auf Offenheit stößt und somit wenigstens etwas verbessert, statt mit hohen Mindeststandards gleich in die das-mach-ich-sowieso-nicht-Tonne getreten zu werden.

                            Ich weiß, du machst das aus den besten Gründen und du fährst da gerne eine klare Linie. Ich bin aber nicht sicher, ob dieser Ansatz auch immer die meisten Früchte trägt, oder, ob ein anderer Ansatz nicht vielleicht eine großflächigere, zwar nicht perfekte, aber dafür schrittweise besser werdende Veränderung hervorruft.

                            Dass sowas wie das verlinkte Menü auf der Seite eines großen Magazins erscheint[1] und nichtmal dort von den Verantwortlichen kritisch hinterfragt wird, obwohl es nicht mal klickbedienbar (also touchbedienbar) ist, zeigt mir eigentlich, dass es nötig wäre, großflächig und niederschwellig zu arbeiten um überhaupt mal ein Verständnis des Ansatzes Zugänglichkeit zu erreichen.

                            Um mal ein Bild zu geben: Wenn ich ein Haus bauen will, sollte ich erstmal den Untergrund untersuchen. Wenn ich stillschweigend voraussetze, dass der schon halten wird, dann ist es im Endeffekt fraglich ob mein Hausbau bleibende Früchte trägt. Egal wie fachmännisch korrekt mein Haus gebaut ist. Dann doch vielleicht mal lieber übergangsweise die windschiefe Hütte auf festem Grund.

                            Ich mach dir nen Vorschlag: Ich nörgel nicht dran rum, wenn du Imperative nutzt, die ich auf zwischenmenschlich-kommunikativer Ebene für vergriffen halte und du nörgelst nicht dran rum, wenn ich dieselben Imperative absichtlich nicht nutze und nur sehr relativiert aufgreife. Auf fachlich-sachlicher Ebene sehen wir das sowieso gleich. Einverstanden?

                            … mag damit das Notenbild sein, aus dem Gunnar dann diese Musik macht.

                            Womit ich nicht verteidigen will, dass jemand diese Musik dann auch noch freiwillig spielt.

                            Wer nur Dur-Akkorde mag, der soll Schlager hören. Zu Musik gehören auch Moll-Akkorde; die machen Musik nicht schlechter.

                            Ich glaube nicht, dass Rolandi hier Moll-Akkorde herauszuhören meinte. Ich schätze, er spielte eher auf Dissonanzen an.

                            Grüße,

                            RIDER

                            --
                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[

                            1. Danke übrigens @marctrix für die Relativierung, das muss man der Fairness halber tatsächlich dazusagen, ich war da vielleicht ein wenig zu harsch! ↩︎

                      2. @@Rolandi

                        Nein, das ist grober Unfug.

                        Beachte: Der Ton macht die Musik!

                        Wenn „Unfug“ für dich schlechter Ton ist, lebst du in einer anderen Welt als ich.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Wenn „Unfug“ für dich schlechter Ton ist, lebst du in einer anderen Welt als ich.

                          Ich sehe mich, was das Internet-Wissen angeht in etwa auf dem Level des Threadstarters. De Seit, die ich referiert habe sah dem Muster von Gerhard1 sehr ähnlich. Ich konnte nicht ahnen, dass ein Computermagazin ein solch schwaches Beispiel veröffentlicht. Der Ausdruck "Unfug" ist daher Unfug, um in deinem Jargon zu bleiben. Vielleich hättest du schreiben sollen: Der Artikel ist Unfug.

                          1. Hej Rolandi,

                            Vielleich hättest du schreiben sollen: Der Artikel ist Unfug.

                            So ist es bei mir angekommen. Du hast einen Artikel verlinkt. Dazu wurde gesagt, das ist „grober Unfug“. Da du weiter nichts gesagt hast, gab es für mich ausschließlich den Artikel als möglichen Bezug.

                            Und der ist wirklich Unfug.

                            Auch ist @Gunnar Bittersmann jemand, dessen Kritik sich immer auf die Sache bezieht. Auch wenn seine direkte Art manchmal anders interpretiert werden kann (aber nicht muss). Dass nur als Erklärung für jemanden, der noch neu ist und nicht all die Namen mit bestimmten Eigenheiten oder gar Gesichtern verbindet. Zu Gunnar geht es übrigens hier lang

                            Wenn du Zeit hast, schon mal in seine Talks — dann hast du ein Gesicht und erlebst ihn live. Meine Empfehlung: nuqjatlh (What does it mean?) – Gunnar Bittersmann / Front-Trends 2015, Warsaw, Poland

                            Marc

    3. Hallo, auf die Gefahr hin, dass es Unfug ist, möchte ich fragen, ob das Beispiel Submenü ausblenden dem Wunsch von Gerhard entsprechen könnte?

  8. Hej Gerhard1,

    schau mal, was ich bisher habe. Der enstcheidende Nachteil (und dann wieder womöglich Vorteil) dieses Menüs ist: es ist nicht generisch, kann also nciht für jeden beliebigen Zweck eingesetzt werden, passt aber genau auf den von dir beschriebenen Fall.

    Was mir noch nicht gefällt: Wird das Menü geöffnet, verschieben sich die Inhalte darunter. Das muss kein Problem sein. Mitunter ist das auch gewünscht. Man kann das verhindern, dafür brauche ich aber eigentlich weitere Angaben. Wenn du beispielsweise eine Bühne hast mit einem Schmuckbild, kann man den Platz für das aufgeklappte Menü nutzen. Funktioniert dann aber auch wieder nur in einem speziellen Projekt (finde ich eigentlich nicht so gut).

    Ich werde es mit einem Bild noch etwas hübscher machen.

    Wenn es gewünscht ist, dass die Inhalte nicht nach unten verschoben werden (was vielleciht komisch aussieht, aber den Vorteil hat, dass diese sichtbar und somit lesbar bleiben, sag mir das bitte. Dann muss ich da noch mal ran. Du darfst das Menü gerne nutzen unter einer einzigen Bedingung: du schaust es dir genau an und versuchst zu verstehen, was da passiert. 😉

    Hier der Link: https://github.com/MarcHaunschild/accessible-nav

    Wer immer Fehler findet, darf sich gerne beteiligen. Es ist OpenSource und es ist auf Github. Also keine Scheu beim Melden von Issues, beim forken usw…

    Marc

    1. Hej Gerhard1,

      Was mir noch nicht gefällt: Wird das Menü geöffnet, verschieben sich die Inhalte darunter.

      Ist geändert.

      Ich werde es mit einem Bild noch etwas hübscher machen.

      Habe ich wieder verworfen.

      Hier der Link: https://github.com/MarcHaunschild/accessible-nav

      Wer immer Fehler findet, darf sich gerne beteiligen. Es ist OpenSource und es ist auf Github. Also keine Scheu beim Melden von Issues, beim forken usw…

      Marc

      1. Hi Marc,

        Hier der Link: https://github.com/MarcHaunschild/accessible-nav

        Wie kann man das Beispiel ansehen? Muss man sich einloggen (Sign in/Sign up) oder muss man es herunterladen (Clone or Download)? Einen "Test"-Button sehe ich nicht. Gruß Roland

        1. Hej Rolandi,

          Hier der Link: https://github.com/MarcHaunschild/accessible-nav

          Wie kann man das Beispiel ansehen? Muss man sich einloggen (Sign in/Sign up) oder muss man es herunterladen (Clone or Download)? Einen "Test"-Button sehe ich nicht.

          Habe hier eine Testumgebung, die aber nicht so oft aktualisiert wird.

          Herunterladen geht natürlich (ist dann eine zip-File), bequemer ist Klonen, dafür muss man aber git installiert haben.

          Habe schon das nächste Problem gefunden. Wenn man auf eine Seite tippt (iPhone Touch) öffnet sich das Untermenü der Seite davor. Mache ich heute nicht mehr.

          Wenn einer weiß, wodran es liegt, kann er gerne schon mal Tipps geben…

          Marc