Problem beim Erstellen eines Footers mit Copyright, Impressum und Datenschutz

[Gunnar Bittersmann]

@@Michael53

Dass du deine problematische Seite verlinken oder auf einer Plattform wie bspw. CodePen zugänglich machen solltest, damit man sich das ohne Copy-and-paste-Orgien ansehen kann, erwähnte Henry schon.

Mir fiel dein Menü ins Auge, das nicht funktioniert:

	<input type="checkbox" id="chk">
		<label for="chk" class="show-menu-btn">
		<i class="fas fa-ellipsis-h"></i>
		</label>
	<ul class="menu">
		<a href="index.html">Home</a>
		<a href="#">Über mich</a>
		<a href="fotos.html">Fotos</a>
		<a href="#">Panoramen</a>
		<a href="#">Videos</a>
		<a href="#">Kontakt</a>
		<label for="chk" class="hide-menu-btn">
		<i class="fas fa-times-circle times"></i>
		</label>		
	</ul>

Falsch daran:

• Ein input-Element sollte nicht mehrere zugehörige labels haben.

• Das input-Element hat zwar label, aber keine Beschriftung. Kein Text, den ein Screenreader vorlesen könnte. Auch wenn das Stylesheet nicht greift, ist nichts da. Da sollte sowas wie „Menü öffnen/schließen“ stehen, was visuell versteckt werden kann.

• Du missbrauchst eine Checkbox (Eingabeelement) für eine Aktion. CSS-only ist für interaktive Elemente kein erstrebenswertes Ziel. Weg mit dem Checkbox-Hack; verwende einen button! Die Sichtbarkeit wird mit JavaScript umgeschaltet – und auch die notwendigen ARIA-Attribute.

  Ich hab das in diesem Beispiel mal vorgemacht. Etwas Beschreibung in diesem Posting – aber nicht das dort vorgestellte Vorgängerbeispiel verwenden, denn:

• Menü und Öffnen/Schließen-Button gehören in in nav-Element, s.a. diesen Thread. Und natürlich Menus & Menu Buttons auf Inclusive Design.

• Iconfonts sind keine gute Idee. Wirklich nicht. Verwende SVG – Font Awesome stellt die zur Verfügung. Siehe Tutorial Teil 1 und insbesondere Teil 2.

LLAP 🖖