Bedeutung vor Aussehen
Du wählst für jeden Inhalt das Element, das seine Bedeutung trägt, und kannst begründen, warum ein div mit Klasse fast immer die schlechtere Wahl ist.
Man kann jede Seite mit zwei Elementen bauen: div und span. Sie sehen mit
etwas CSS aus wie alles andere auch. Trotzdem tut es niemand, der weiß, was er
tut, und dieses Kapitel erklärt warum.
Die kurze Antwort: Ein Browser ist nicht der einzige Leser deiner Seite.
Wer noch mitliest
Ein Vorleseprogramm für blinde Nutzer. Eine Suchmaschine. Der Lesemodus des Browsers. Ein Übersetzungsdienst. Ein Sprachassistent. Und ab und zu jemand mit einer Tastatur statt einer Maus.
Alle diese lesen nicht das Bild, sondern die Struktur. Ein div, das aussieht
wie eine Überschrift, ist für sie kein Kapitelanfang, sondern ein Kasten.
Die Elemente, die du wirklich brauchst
Es gibt über hundert. Im Alltag sind es zwanzig.
| Wofür | Element |
|---|---|
| Hauptüberschrift der Seite, genau eine | h1 |
| Gliederung darunter, ohne Ebenen zu überspringen | h2 bis h4 |
| Fließtext | p |
| Aufzählung, Reihenfolge egal | ul mit li |
| Aufzählung, Reihenfolge wichtig | ol mit li |
| Verweis auf eine andere Adresse | a mit href |
| Etwas, das etwas tut, ohne die Seite zu wechseln | button |
| Ein eigenständiger Inhalt, der auch allein Sinn ergäbe | article |
| Ein Abschnitt mit eigener Überschrift | section |
| Die Hauptnavigation | nav |
| Der Hauptinhalt, genau einmal | main |
| Beiwerk zum Hauptinhalt | aside |
| Kopf und Fuß, der Seite oder eines Abschnitts | header, footer |
Die letzten sieben nennt man Landmarken. Ein Vorleseprogramm kann sie anspringen, so wie ein Sehender mit dem Blick über die Seite springt.
Der Unterschied, der am meisten kostet
a gegen button. Er wird ständig verwechselt und hat handfeste Folgen.
Ein a mit href führt woandershin. Es lässt sich in einem neuen Reiter
öffnen, kopieren, mit der Eingabetaste auslösen und mit der rechten Maustaste
teilen. Der Browser bringt das alles mit.
Ein button tut etwas hier: Menü aufklappen, Formular absenden, Wert ändern.
Er reagiert auf Eingabe und Leertaste, was ein Verweis nicht tut.
Wer einen div mit onclick baut, bekommt keines von beidem: kein
Tastaturfokus, keine Ansage, keine Auslösung mit der Tastatur. Das ist der
häufigste Zugänglichkeitsfehler in freier Wildbahn.
Überschriften sind eine Gliederung, keine Größe
h1 bis h6 bilden ein Inhaltsverzeichnis. Wer eine h4 nimmt, weil sie
kleiner aussieht, baut ein Verzeichnis mit einer Lücke.
Die Regeln sind kurz: Eine h1 je Seite. Keine Ebene überspringen. Die Größe
kommt aus dem CSS, nicht aus der Wahl der Ebene.
<h1>Wie das Web funktioniert</h1>
<h2>Station eins</h2>
<h3>Was dabei schiefgehen kann</h3>
<h2>Station zwei</h2>
Was Klassen dürfen und was nicht
Klassen sind für das Aussehen da, nicht für die Bedeutung. class="karte"
sagt, wie es aussieht. <article> sagt, was es ist. Beides zusammen ist
richtig.
Falsch wird es, wenn die Klasse die Bedeutung ersetzen soll:
<div class="button"> ist keine Schaltfläche, nur weil dort „button" steht.
Was du davon hast
Weniger Code, weil der Browser Verhalten mitbringt, das du sonst nachbaust. Eine Seite, die im Lesemodus funktioniert. Bessere Auffindbarkeit, weil Suchmaschinen die Gliederung lesen. Und die Grundlage dafür, dass jemand deine Seite mit einer Tastatur bedienen kann, worum es in der Spur über Barrierefreiheit ausführlich geht.
Eine Seite ohne CSS lesbar machen
Der beste Test für Bedeutung ist, das Aussehen wegzunehmen.
- Nimm eine Seite, die du gebaut hast, oder baue eine kleine mit Überschrift, Navigation, Text, einer Liste und einer Schaltfläche.
- Schalte im Browser das CSS ab. In Firefox: Menü „Ansicht", „Webseiten-Stil", „Kein Stil". In Chrome geht es über die Entwicklerwerkzeuge, Reiter „Elemente", indem du das Stylesheet abwählst.
- Lies die Seite von oben nach unten. Ergibt die Reihenfolge Sinn? Erkennst du, was Überschrift, was Navigation und was Inhalt ist?
- Öffne die Entwicklerwerkzeuge, Reiter „Barrierefreiheit" beziehungsweise „Accessibility". Dort steht der Zugänglichkeitsbaum. Suche deine Schaltfläche. Steht dort „Schaltfläche" mit einem Namen?
- Drücke Tab, bis du jedes bedienbare Element einmal hattest. Kommt alles dran?
Fertig, wenn
- Deine Seite ist ohne CSS von oben nach unten verständlich.
- Im Zugänglichkeitsbaum steht bei jedem bedienbaren Element eine Rolle und ein Name.
- Mit Tab erreichst du jedes bedienbare Element, und du siehst, wo du bist.
Sitzt es?
6 Karten aus dieser Lektion, 6 Aufgaben im Prüfungsvorrat.