Accessibility (kurz: a11y) bedeutet, dass Websites und Web-Anwendungen so gestaltet werden, dass sie von allen Menschen genutzt werden können.
Sehbehinderungen: Blindheit, Sehschwäche, Farbenblindheit
Business-Nutzen
Die WCAG definieren internationale Standards für barrierefreie Webinhalte in drei Konformitätsstufen: A, AA, AAA.
Wahrnehmbar: Informationen müssen so präsentiert werden, dass Nutzer sie wahrnehmen können.
Awareness, Code, Testing
Gut strukturiertes, valides, semantisches HTML bedeutet, dass der Aufbau der Seite mit den richtigen HTML-Tags ihre inhaltliche Bedeutung widerspiegelt – sodass Menschen, Maschinen und Hilfsmittel die Inhalte verstehen und sinnvoll nutzen können..Semantisches HTML
<header><h1>Willkommen</h1></header>
<main>
<section>
<h2>Unser Angebot</h2>
<p>Individuelle Beratung und Support …</p>
</section>
</main>
Ein guter Alternativtext (Alt-Text) beschreibt den Inhalt und Zweck eines Bildes klar, prägnant und kontextbezogen – für Menschen, die das Bild nicht sehen können (z. B. durch Screenreader oder bei deaktivierten Bildern im Browser).Textäquivalente
<img src="katze.jpg"
alt="Graue Katze schläft auf rotem Sofa">
ARIA (Accessible Rich Internet Applications) macht Inhalte für Screenreader zugänglich – aber nur, wenn HTML es nicht schon kann. Nutze ARIA, um Rollen, Zustände oder Beschriftungen zu ergänzen, nicht um fehlende Semantik zu ersetzen. Häufige Fehler vermeidenARIA - Wenn HTML nicht reich
<div role="tablist">
<button role="tab" aria-selected="true">Details</button>
<button role="tab" aria-selected="false">Bewertungen</button>
</div>
Farben und Kontraste
Kontrast-Anforderungen (WCAG)
Normaler Text: Mindestens 4.5:1
Großer Text: Mindestens 3:1
UI-Elemente: Mindestens 3:1
Nicht nur Farbe für wichtige Informationen nutzen
Graue Texte auf weißem Hintergrund prüfen
Tab-Taste: Zwischen interaktiven Elementen wechselnFokus und Tastatur-Navigation
Enter/Space: Buttons und Links aktivieren
Pfeiltasten: In Listen und Menüs navigieren
Escape: Dialoge und Overlays schließen/* Fokus sichtbar machen */
button:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
Danke für's Mitmachen