html-einfach.de

Ressourcen

Cheat-Sheets & Checklisten

Von Zuletzt geändert am

Die ausführlichen Artikel auf dieser Seite erklären das Warum. Diese Seite ist für die Momente, in denen man das Warum schon kennt und nur noch schnell nachsehen will: Welche Elemente wofür? Welcher Kontrast reicht? Was muss vor dem Launch noch geprüft werden? Ich habe die Spickzettel zusammengetragen, die ich selbst am häufigsten brauche – ein paar davon hängen bei mir tatsächlich neben dem Monitor.

Jede Liste verlinkt zurück auf den Artikel mit den Details. Wer also bei einem Punkt ins Grübeln kommt, ist nur einen Klick von der Begründung entfernt.

Semantik-Spickzettel: welches Element wofür?

Brauche ich … … nehme ich
den Kopfbereich / die Hauptnavigation <header>, <nav>
den zentralen, einzigartigen Inhalt <main> (genau einmal)
einen für sich stehenden Beitrag <article>
einen thematischen Abschnitt mit Überschrift <section>
ergänzenden Randinhalt <aside>
den Fußbereich <footer>
eine Aktion (etwas passiert) <button>
einen Verweis (es geht woanders hin) <a href>
eine Aufzählung / Reihenfolge <ul> / <ol>
Begriff-Erklärung-Paare <dl>
Bild mit Bildunterschrift <figure> + <figcaption>
reinen Layout-Container ohne Bedeutung <div> / <span>

Im Detail: Struktur-Elemente, article vs. section und div vs. span.

Überschriften-Check

  • Genau eine <h1> pro Seite, die das Thema benennt.
  • Keine Ebene überspringen (nach <h2> kommt <h3>, nicht <h4>).
  • Die Hierarchie folgt der Bedeutung, nicht der Schriftgröße.
  • Größe und Optik macht CSS – nicht die Wahl der Überschriftenebene.

Mehr: Überschriften-Hierarchie.

Formular-Check

  • Jedes Feld hat ein verknüpftes <label for> – kein Platzhalter als Ersatz.
  • Zusammengehörige Felder stehen in <fieldset> mit <legend>.
  • Pflichtfelder sind im Text gekennzeichnet, nicht nur per Farbe.
  • Fehler stehen am Feld, sind per aria-describedby verknüpft und im Klartext.
  • Passendes autocomplete und type (email, tel, …) sind gesetzt.

Details: Labels, Fehlermeldungen, Validierung und fieldset & legend.

Kontrast-Richtwerte

Inhalt Mindestkontrast
Normaler Text (< 24 px, bzw. < 18,66 px fett) 4,5 : 1
Großer Text (≥ 24 px, bzw. ≥ 18,66 px fett) 3 : 1
Bedienelemente & aussagekräftige Grafiken 3 : 1

Das sind die AA-Werte. Wie man sie misst und einstellt: Farbkontraste.

Tastatur-Check

  • Alles, was per Maus geht, geht auch per Tab / Shift+Tab / Enter / Leertaste.
  • Der Fokus ist immer sichtbar (kein outline: none ohne Ersatz).
  • Die Reihenfolge ist logisch und folgt der Leserichtung.
  • Es gibt keine Tastaturfalle, aus der man nicht mehr herauskommt.

Mehr: Tastatur & Fokus.

WCAG in vier Worten: POUR

  • Wahrnehmbar – Inhalte sind seh-, hör- oder ertastbar (Alt-Texte, Kontrast).
  • Bedienbar – alles geht per Tastatur, nichts erzwingt die Maus.
  • Verständlich – Sprache, Aufbau und Verhalten sind vorhersehbar.
  • Robust – sauberes Markup, das Browser und Hilfsmittel zuverlässig deuten.

Mehr: Die vier Prinzipien (POUR) und Konformitätsstufen A / AA / AAA.

Kurz-Audit vor dem Launch

  1. axe / Lighthouse laufen lassen, offensichtliche Fehler beheben.
  2. Tastatur-Durchlauf der wichtigsten Seiten und Abläufe.
  3. Zoom auf 200 % / Reflow prüfen.
  4. Kontraste der kritischen Stellen messen.
  5. Screenreader-Stichprobe (NVDA oder VoiceOver).
  6. Inhaltliche Prüfung für alles, was Tools nicht sehen.

Diese Runde lasse ich vor keinem Launch aus – Schritt für Schritt unter Barrierefreiheit selbst testen. Die ausführliche gesetzliche Variante ist die BFSG-Checkliste.

SEO-Quick-Wins

  • Aussagekräftiger <title> und <meta name="description"> je Seite.
  • Eine <h1> und eine saubere Überschriften-Struktur (= halbe SEO-Miete).
  • Sprechende, stabile URLs.
  • Strukturierte Daten dort, wo sie passen.
  • Sinnvolle Alt-Texte.
  • Tempo im Blick behalten (Core Web Vitals).

Warum dieselbe Struktur Suche und KI hilft: Semantik & SEO.

Fazit

Checklisten ersetzen kein Verständnis, aber sie verhindern Flüchtigkeitsfehler – und genau dafür sind sie da. Tipp: Die Seite lässt sich sauber ausdrucken, wenn man eine Papierversion neben den Bildschirm legen möchte. Den passenden Code zu vielen Punkten gibt es in der Snippet-Bibliothek, unbekannte Begriffe klärt das Glossar, und die Werkzeuge dazu stehen unter Tools.