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

[Gunnar Bittersmann]

@@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 🖖