Semantic HTML Accessibility
Aussehen ist noch keine Struktur
Überschrift, Liste, Eintrag, Link: vier Stellen der Leistungsübersicht.
Semantik-Röntgenbild
Der Browser baut aus HTML eine zweite Karte
CSS gestaltet die Oberfläche. Die Elemente darunter bestimmen, welche Struktur im Accessibility Tree ankommt und wie Menschen darin navigieren können.
Eine Leistungsübersicht, drei direkte Wege
Konzeptdarstellung: Vom sichtbaren Dokument zur programmatischen Struktur.
Unsere Leistungen im Überblick.
regionLeistungenheading · 2Leistungenlist · 2 Einträgezusammengehörige Leistungenlistitem · 1 von 2Beratungheading · 3link · Beratung ansehenlistitem · 2 von 2Schulungheading · 3link · Schulung ansehenÜberschriften
Leistungen → Beratung → Schulung
Listenkontext
zwei zusammengehörige Einträge
Linkliste
Beratung ansehen · Schulung ansehen
Nur gezeichnet: eine flache Textspur
div-SuppeKlassen und Klickskripte ändern die Pixel, liefern aber keine Überschriftenebene, Listenbeziehung oder native Linkfunktion.
Ausgezeichnet: Beziehungen bleiben erhalten
native Elementesectionenthälth2+ul↓lienthälth3+a href Native Elemente geben dem Browser Namen, Rollen, Ebenen und Beziehungen. Ein div bleibt passend für eine reine Gestaltungsbox.
Vorher: Optik ohne Dokumentstruktur
<div class="leistungen">
<div class="titel">Leistungen</div>
<div class="liste">
<div class="karte">
<div class="name">Beratung</div>
<div>Von der Analyse bis zur Abnahme.</div>
<div class="link">mehr</div>
</div>
<div class="karte">
<div class="name">Schulung</div>
<div>Ein Tag für Redaktion und Entwicklung.</div>
<div class="link">mehr</div>
</div>
</div>
</div>Nachher: vollständige Leistungsübersicht
<section aria-labelledby="leistungen-title">
<h2 id="leistungen-title">Leistungen</h2>
<p>Unsere Leistungen im Überblick.</p>
<ul>
<li>
<h3>Beratung</h3>
<p>Von der Analyse bis zur Abnahme.</p>
<a href="/beratung">Beratung ansehen</a>
</li>
<li>
<h3>Schulung</h3>
<p>Ein Tag für Redaktion und Entwicklung.</p>
<a href="/schulung">Schulung ansehen</a>
</li>
</ul>
</section>So prüfen Sie die Karte
- Öffnen Sie die Accessibility-Ansicht der Browser-Entwicklungswerkzeuge.
- Prüfen Sie Rollen, Namen und Überschriftenebenen an der Leistungsübersicht.
- Öffnen Sie die Überschriften- und Linkliste eines Vorleseprogramms.
- Gehen Sie mit Tab durch die Seite: Die beiden echten Links erhalten Fokus.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Der Leistungstitel ist nur groß gesetzt Regel p-as-heading
„Beratung“ steht als fetter Absatz über der Leistung. Ein h3 macht daraus eine Überschrift, die sich anspringen lässt.
Kritisch Ein Absatz steckt in der Leistungsliste Regel list
In der ul steht ein p neben den Einträgen. Der beschreibende Satz gehört vor die Liste, nicht hinein.
Kritisch Eine Leistung steht außerhalb der Liste Regel listitem
Der letzte Eintrag steht hinter dem schließenden ul-Tag. In der Liste zählt er mit, davor nicht.
Kritisch „mehr“ nennt kein Ziel Regel link-name
In der Linkliste eines Vorleseprogramms steht nur „mehr“. Der Linktext nennt die Leistung, zu der er führt.
Zum Mitnehmen
Die Leistungsübersicht, korrigiert
Ein Element getauscht, die Liste aufgeräumt, ein Linktext benannt.
Korrektur in 3 Schritten ansehen
Aus dem fetten Absatz wird eine Überschrift
Die Klasse bleibt, das Element wechselt. Erst als h3 taucht der Leistungstitel in der Überschriftenliste auf.
KorrekturvergleichSchritt 1 · HTML Vorher
<h2>Leistungen</h2> <p class="titel">Beratung</p> <p>Wir begleiten Sie von der Analyse bis zur Abnahme.</p>Nachher
<h2>Leistungen</h2> <h3 class="titel">Beratung</h3> <p>Wir begleiten Sie von der Analyse bis zur Abnahme.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Überschriftenliste eines Vorleseprogramms. „Beratung“ steht jetzt darin.
Die Liste aufräumen
Ein Absatz und ein verwaister Eintrag gehören nicht neben die li. Die Beschreibung steht davor, jede Leistung steht in der Liste.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul> <p>Unsere Leistungen im Überblick</p> <li>Beratung</li> </ul> <li>Schulung</li>Nachher
<p>Unsere Leistungen im Überblick</p> <ul> <li>Beratung</li> <li>Schulung</li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm kündigt jetzt „Liste mit zwei Einträgen“ an.
Das Ziel in den Linktext schreiben
Der Linktext steht für sich. Er nennt das Ziel auch dann, wenn der Satz davor nicht mitgelesen wird.
KorrekturvergleichSchritt 3 · HTML Vorher
<p>Beratung gewünscht? <a href="/beratung">mehr</a></p>Nachher
<p><a href="/beratung">Beratung buchen</a></p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag nennt sein Ziel.