JavaScript/Tutorials/zugängliche Dropdown-Navigation

[Gunnar Bittersmann]

@@atina

passt jetzt alles 😀

Nö, das tut es nicht.

In deinem Stylesheet steht:

A:link, A:active, A:visited, A:hover {
    text-decoration: none;
    color: #e6e6e6;
}

Damit setzst du die Textfarbe von Links auf die Hintergrundfarbe; Textlinks sind also nicht sichtbar. Das betrifft auch die Textalternative von Bildlinks wie du sie verwendest: wenn das Bild nicht geladen wird, ist der Alternativtext unsichtbar, der Link also so gut wie nicht vorhanden.

Außerdem ist die Textfarbe (currentColor) der Defaultwert für outline-color in Browsern, die invert nicht unterstützen. Das hat zur Folge, dass im Firefox bei Tastaturnavigation der Rahmen um den gerade fokussierten Link nicht sichtbar ist, der Nutzer also nicht weiß, wo er sich befindet. (Chromia und WebKits sind davon nicht betroffen, da sie eine andere Kennzeichnung als outline für :focus verwenden.)

Lass die Angabe unbedingt weg! Außerdem kannst du outline: 1px solid #375add nicht nur innerhalb von #sitenav, sondern für alle Links gelten lassen.

---

Warum schreibst du überhaupt den Linktext in die Bilder hinein anstatt Text als Text auf die Seite zu setzen? Zum einen sieht das unschön aus; der Text erscheint verwaschen (auf hochauflösenden Bildschirmen, die heutzutage schon die Mehrheit der Nutzer haben dürfte).

Zum anderen ist das schlechter wartbar: Bei Textänderungen müsstest du ein Grafikprogramm verwenden.

---

Nochwas zum Markup:

<div class="container">

ist „bedauerlich bis ärgerlich“ – jedenfalls überflüssig.

<div class="eins"> 
  <img src="../imga/logo.gif" class="bild1" alt="Martin Bubenheim Moderne F&uuml;hrungskonzepte" />
</div>
<div class="zwei">
  <div id="umnavi">
    <nav id="sitenav">
    ⋮
    </nav>
  </div>
</div>

Das alles wäre der <header>. ☞ Seitenstrukturierung

Mindestens eins der beiden <div class="zwei"> und <div id="umnavi"> ist auch überflüssig; <div class="eins"> vermutlich auch.

Wie so verwendest du Klassen (eins, zwei, …), um Elemente eindeutig zu kennzeichnen, wofür doch IDs da sind?

<div class="zwoelf">
  <p class="foot"><a class="style1" href="impressum.html" title="Impressum">Impressum</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="style1" href="datenschutz.html" title="Datenschutz">Datenschutz</a></p>
  <p class="foot"></p>
</div>

Das wäre der <footer>.

Was soll das leere <p class="foot"></p> da? Und die ganzen  ? Für Abstände ist CSS da.

Alles zwischen Header und Footer käme ins <main>-Element.

Aber nochmal zurück zu ersterem:

<summary>
  &nbsp; &nbsp;&#9776;&nbsp;&nbsp;&nbsp;
</summary>

Da fehlt Text, der vom Screenreader wiedergegeben werden kann: „Menü“. Der kann visuell versteckt werden. (Warum eigentlich? Die Beschriftung hilft auch allen, die mit dem Hamburger-Icon nichts anzufangen wissen.)

Zu   siehe oben. Und vor </nav> fehlt noch ein schließendes </ul>.

Und warum verstümmelst du alle Umlaute? Das ist überhaupt nicht nötig.

LLAP 🖖