Gunnar Bittersmann: Nachdenkliches zum Wochenende: The Cult of the Complex (Jeffrey Zeldman)

Beitrag lesen

@@Henry

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div> 

Quelle: https://www.w3schools.com/howto/howto_js_topnav.asp

Sich auf w3schools zu berufen war noch nie die beste Idee. Die mögen sich gebessert haben und es ist nicht mehr alles falsch, was da steht; als Referenz würde ich das aber noch lange nicht ansehen.

Das nav-Element anstelle von <div class="topnav"> zu verwenden wurde in diesem Thread ja schon besprochen.

Zur Kennzeichnung der aktuellen Seite bietet sich aria-current="page" an. Das hilft Nutzern von assitiven Technologien (zumindest von aktuellen, die das Attribut unterstützen), und außerdem ist es besser lesbarer Code. class="active" braucht man dann nicht; [aria-current] lässt sich genauso gut zum Stylen verwenden.

(Dass die aktuelle Seite im Menü nicht verlinkt sein sollte, ist nochmal eine andere Diskussion.)

Dann wären wir bei

<nav>
  <a aria-current="page" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</nav>

Kann man machen, aber: Die Auszeichnung der Menüpunkte als Liste bringt Nutzern von assitiven Technologien zusätzlichen Mehrwert. Screenreader können jeweils ansagen, der wievielte Menüpunkt von wievielten insgesamt das jeweils ist. Außerdem bieten die ul-/ol- und li-Elemente zusätzliche Ansatzpunkte für CSS, kommen also auch durchaus dem Entwickler entgegen. (Eine Diskussion, die ich desöfteren schon mit MrMurphy1 geführt habe.)

LLAP 🖖

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

Nachdenkliches zum Wochenende: The Cult of the Complex (Jeffrey Zeldman)

Gunnar Bittersmann
  • lesetipp
  1. 0
    pl
    1. 1
      pl
      1. 0
        marctrix
        1. 1
          pl
  2. 0
    Henry
    1. 0
      Matthias Apsel
      • zu diesem forum
    2. 1
      Camping_RIDER
      1. 0
        beatovich
        1. 1
          Camping_RIDER
          1. 0
            beatovich
            1. 1
              Camping_RIDER
              1. 1
                beatovich
                1. 0
                  Camping_RIDER
                  1. 0
                    Matthias Apsel
                    1. 1
                      Gunnar Bittersmann
                      • html
                  2. 0
                    beatovich
                    1. 1
                      Camping_RIDER
                      1. 0
                        beatovich
                        1. 0

                          separation of concerns - darstellungsbezogene Attribute nicht ins HTML reinnehmen!

                          Camping_RIDER
                          • css
                          • html
                          • webstandards
                          1. 0
                            beatovich
                            1. 1
                              Camping_RIDER
                              1. 0
                                beatovich
                                1. 0
                                  Camping_RIDER
                                  1. 0
                                    beatovich
                                    1. 0
                                      Camping_RIDER
                                      1. 0
                                        beatovich
                  3. 0
                    Henry
                    1. 3

                      Über Semantik, Unsematik und deren (Un-)Sinn

                      Camping_RIDER
                      • html
                      • semantik
                      • sprache
                      1. 0
                        Gunnar Bittersmann
                        • mathematik
                        • menschelei
                        1. 0
                          Camping_RIDER
                    2. 0
                      Gunnar Bittersmann
                      • html
        2. 0
          Gunnar Bittersmann
        3. 0
          marctrix
          1. 0
            beatovich
            1. 1
              marctrix
              1. 0
                beatovich
                1. 2
                  Gunnar Bittersmann
                2. 0
                  marctrix
                  1. 1
                    beatovich
              2. 0
                Gunnar Bittersmann
                1. 0
                  marctrix
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      marctrix