In diesem gesamten Tutorial ist dir immer wieder ein Thema begegnet, ohne dass wir es bisher beim Namen genannt haben: Barrierefreiheit (englisch "accessibility", oft abgekürzt "a11y"). Zeit, das zusammenzufassen.

Was ist Barrierefreiheit?

Barrierefreiheit bedeutet: eine Webseite so zu bauen, dass sie von allen Menschen benutzt werden kann - auch von Menschen, die zum Beispiel:

• blind sind oder schlecht sehen und einen Screenreader benutzen, der die Seite vorliest
• motorisch eingeschränkt sind und keine Maus benutzen können, sondern nur die Tastatur
• eine kognitive Einschränkung haben und komplizierte, unklare Strukturen schwerer verstehen
• temporär eine "Einschränkung" haben - zum Beispiel wenn das Handy in der prallen Sonne kaum lesbar ist, oder wenn man mit gebrochenem Arm nur eine Hand benutzen kann

Was du in diesem Tutorial schon alles richtig gemacht hast

Das Schöne: Du hast Barrierefreiheit schon die ganze Zeit über mitgelernt, weil semantisches, sauberes HTML fast automatisch barrierefrei ist. Ein Überblick, was du schon alles richtig gemacht hast:

• Kapitel 6: Überschriften-Hierarchie (h1-h6) statt beliebiger Größenwahl - Screenreader-Nutzer können damit direkt zwischen Abschnitten springen.
• Kapitel 17: alt-Text bei jedem Bild - unverzichtbar für blinde Nutzer.
• Kapitel 28: <label> korrekt mit for/id verknüpft - hilft allen, die nicht genau auf ein winziges Kästchen klicken können.
• Block 7: semantische Struktur mit <nav>, <main> usw. - Screenreader-Nutzer können damit direkt zu "der Navigation" oder "dem Hauptinhalt" springen, ohne sich alles vorlesen zu lassen.

Tastatur-Bedienbarkeit: ein schneller Test

Ein einfacher, aber sehr aufschlussreicher Test: Lege deine Maus zur Seite und versuche, deine Webseite nur mit der Tab-Taste zu bedienen (und Enter zum Auslösen). Springt der Fokus sinnvoll von Link zu Link, von Formularfeld zu Formularfeld? Bei sauberem, semantischem HTML (so wie du es gebaut hast) funktioniert das automatisch, ganz ohne dass du dich extra darum kümmern musstest.

Gute Link-Texte und alt-Texte

Zwei ganz praktische Regeln, die du dir für die Zukunft merken solltest:

• Vermeide Linktexte wie "hier klicken" - ein Screenreader-Nutzer, der sich alle Links auf einer Seite auflisten lässt, hört dann nur "hier klicken, hier klicken, hier klicken" ohne zu wissen, wohin. Besser: "Meine Lieblingsspieler ansehen" statt "hier klicken".
• Ein alt-Text sollte beschreiben, was auf dem Bild zu sehen ist und warum es relevant ist - nicht einfach "Bild" oder der Dateiname.

<!-- Schlecht -->
<a href="spieler.html">hier klicken</a>

<!-- Gut -->
<a href="spieler.html">Meine Lieblingsspieler ansehen</a>