So funktioniert es
Semantisches HTML beschreibt die Bedeutung von Inhalten und Bedienelementen: Überschriften gliedern ein Dokument, Navigation enthält Wegweiser und ein Button führt eine Aktion aus. Solche Elemente liefern Verhalten, das Browser und Hilfsmittel bereits verstehen. Ein anklickbares div erhält nicht automatisch Tastaturbedienung, Fokusführung oder eine passende zugängliche Rolle.
Ein realistisches Beispiel
Eine Glossarkarte sollte ein Link sein, wenn sie eine Begriffs-URL öffnet. Ein Filter sollte ein Button oder ein beschriftetes Formularfeld sein, wenn er die aktuelle Liste verändert. Beide können gleich gestaltet sein und dennoch unterschiedliche Semantik behalten. Das macht ihren Zweck für Tastaturnutzer und Crawler klarer.
Was Sie prüfen können
Prüfen Sie Überschriftenfolge, Hauptbereich, Navigationsbeschriftungen und Elementtypen. Navigieren Sie mit Tab, aktivieren Sie Links und Buttons und achten Sie auf sichtbaren Fokus. Formularfelder brauchen eindeutige Beschriftungen, bedeutungsvolle Bilder passende Alternativen. Testen Sie ursprüngliches HTML und die durch Skripte ergänzte Oberfläche.
Grenzen und nächste Schritte
Semantische Elemente schaffen eine gute Grundlage, garantieren aber keine Barrierefreiheit. Kontrast, Fehler, Lesereihenfolge und individuelle Interaktionen benötigen weitere Tests. Verwenden Sie zunächst natives HTML und ergänzen Sie ARIA gezielt. Falsche Rollen oder Namen können ein funktionierendes Element schwerer verständlich machen.