Footer auf Deutsch
Die Fußzeile lesbar und benannt aufbauen
Linkspalten, Rechtstexte, graue Schrift: drei Stellen in der Fußzeile.
Fußzeile als Orientierung
Ein guter Footer schließt die Seite sichtbar und semantisch ab
Kontakt, Service und Rechtliches bleiben getrennt, benannt und auf Mobilgeräten lesbar.
Die Fußzeile als tragende Ebene der Website
- 1Identität und Kontakt
addressbündelt die Kontaktdaten. - 2ServicewegeLinktexte nennen das Ziel ohne „mehr“.
- 3Rechtliche OrientierungEine eigene Navigation erhält einen eindeutigen Namen.
- 4AbschlusszeileStatusangaben bleiben Text und werden nicht zu Dekoration.
Desktop → 320 Pixel
Die Reihenfolge bleibt erhalten
CSS ändert die Zahl der Spalten. Das HTML bleibt in derselben sinnvollen Reihenfolge, damit Tastatur, Vorleseprogramm und Bildschirm dieselbe Struktur erhalten.
Position im Dokument
Nur der Seitenfooter ist das Seiten-Landmark
bodymainfooter → contentinfoarticlefooter → BeitragsfußDieser verschachtelte Footer beschreibt den Beitrag, nicht die ganze Seite.Vollständiges Muster
HTML mit benannten Bereichen
- Der Footer steht auf derselben Ebene wie
main. - Jede Linkgruppe ist eine Liste in einer benannten Navigation.
- Kontaktangaben stehen in
address, nicht alle übrigen Texte.
<footer class="site-footer">
<div class="site-footer__inner">
<div>
<h2 id="footer-kontakt">Kontakt</h2>
<address>
Ihr Unternehmen<br>
Beispielweg 12, 12345 Musterstadt<br>
<a href="mailto:kontakt@example.com">
kontakt@example.com
</a>
</address>
</div>
<nav aria-labelledby="footer-service">
<h2 id="footer-service">Service</h2>
<ul>
<li><a href="/kontakt">Kontakt</a></li>
<li><a href="/fragen">Häufige Fragen</a></li>
</ul>
</nav>
<nav aria-labelledby="footer-rechtliches">
<h2 id="footer-rechtliches">Rechtliches</h2>
<ul>
<li><a href="/impressum">Impressum</a></li>
<li><a href="/datenschutz">Datenschutz</a></li>
</ul>
</nav>
</div>
<p>© Ihr Unternehmen</p>
</footer>Responsives Fundament
Spalten ohne feste Breite
auto-fit legt nur so viele Spalten an, wie in den verfügbaren Raum passen. Auf schmalen Ansichten folgt daraus eine einzige, vertikale Lesespur.
.site-footer {
padding: 3rem 1.25rem 2rem;
color: #ffffff;
background: #1f2a26;
}
.site-footer__inner {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 2rem;
max-width: 70rem;
margin: 0 auto;
}
.site-footer address {
font-style: normal;
line-height: 1.6;
}
.site-footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.site-footer a:focus-visible {
outline: 3px solid #ffcb45;
outline-offset: 3px;
}Inhalte passend zum Angebot wählen
Die Beispielgruppen sind keine Rechtsberatung. Welche Rechtstexte und Pflichtangaben Ihre Website benötigt, hängt von Betreiber, Angebot und Zielgruppe ab. Die Struktur bleibt dieselbe: verständliche Überschriften, eindeutige Ziele und aktuelle Inhalte.
Quellen für die Struktur
So prüfen Sie es
- Öffnen Sie die Bereichsliste Ihres Vorleseprogramms. Dort steht einmal „Fußzeile“.
- Prüfen Sie die Navigationen. „Service“ und „Rechtliches“ sind getrennt benannt.
- Lesen Sie nur die Linktexte. Jeder nennt sein Ziel auch ohne den Text daneben.
- Verkleinern Sie das Fenster auf 320 Pixel. Alle Gruppen stehen in einer Spalte.
- Gehen Sie mit Tab durch die Fußzeile. Der Fokus bleibt sichtbar und folgt der Lesereihenfolge.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Zeile mit den Rechtstexten Regel link-name
In der unteren Zeile der Fußzeile heißen mehrere Links „mehr“. Schreiben Sie Impressum, Datenschutz und Kontakt in den Linktext.
Kritisch Eine Spaltenüberschrift steht in der Liste Regel list
In der ul der Spalte steht ein Absatz direkt neben den li-Einträgen. Setzen Sie ihn als Überschrift vor die Liste.
Kritisch Die graue Schrift unter den Spalten Regel color-contrast
Der Hinweis am Fuß der Seite erreicht 1,17:1 statt 4,5:1. Eine hellere Textfarbe auf derselben Fläche genügt.
Zum Mitnehmen
Die Fußzeile, korrigiert
Zwei Änderungen im HTML, eine Farbe im CSS.
Korrektur in 3 Schritten ansehen
Die Spaltenüberschrift vor die Liste setzen
In einer ul stehen nur li-Einträge. Die Spaltenüberschrift wird eine echte Überschrift und steht vor der Liste.
KorrekturvergleichSchritt 1 · HTML Vorher
<ul class="footer-spalte"> <p>Service</p> <li><a href="/kontakt">Kontakt</a></li> </ul>Nachher
<h2 class="footer-spalte-titel">Service</h2> <ul class="footer-spalte"> <li><a href="/kontakt">Kontakt</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie sich die Listen vorlesen. Jede Spalte hat genau so viele Einträge wie Links.
Rechtstexte beim Namen nennen
Der Linktext steht für sich. In der Linkliste eines Vorleseprogramms muss jeder Eintrag sein Ziel selbst nennen.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/impressum">mehr</a> <a href="/datenschutz">mehr</a>Nachher
<a href="/impressum">Impressum</a> <a href="/datenschutz">Datenschutz</a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Kein Eintrag heißt dort noch „mehr“.
Die Schrift der Fußzeile aufhellen
Nur die Textfarbe ändert sich. Weiß erreicht auf dieser Fläche 5,31:1 und liegt über den geforderten 4,5:1 für normalen Text.
KorrekturvergleichSchritt 3 · CSS Vorher
.site-footer p { color: #58635f; background: #626e69; }Nachher
.site-footer p { color: #ffffff; background: #626e69; }Markierte Zeilen wurden geändert
So prüfen Sie es Geben Sie beide Farben in einen Kontrastrechner. Das Ergebnis liegt über 4,5:1.