Accessibility und Inklusion

In dieser Lerneinheit tauchst du in die Grundlagen der digitalen Barrierefreiheit ein und erfährst, wie Software für alle Menschen zugänglich gestaltet werden kann. Du lernst die wichtigsten Standards und technischen Anforderungen für barrierefreie Anwendungen kennen und verstehst, warum Accessibility bei der Entwicklung von Anfang an berücksichtigt werden muss. Die erlernten Prinzipien und Best Practices kannst du direkt in deinen Entwicklungsprojekten umsetzen, um Anwendungen zu schaffen, die von allen Nutzern uneingeschränkt verwendet werden können.

Einführung

Stell dir vor, du entwickelst eine großartige App mit modernem Design und innovativen Features. Doch dann realisierst du: Ein Teil deiner Nutzer kann deine App gar nicht bedienen. Screenreader-Nutzer finden keine Alt-Texte, Tastatur-Navigation funktioniert nicht, und Farbkontraste sind zu schwach für Menschen mit Seheinschränkungen.

Barrieren vs. Zugänglichkeit: Ohne Barrierefreiheit sind digitale Produkte für viele Menschen unzugänglich — Bildrechte: Ausbildung-in-der-IT.de (KI-unterstützt)

Wenn digitale Produkte Barrieren aufbauen, schließen sie Menschen aus und verstoßen gegen rechtliche Vorgaben.

Barrierefreiheit (auch Accessibility oder Zugänglichkeit genannt) stellt sicher, dass Software für alle Menschen nutzbar ist. Du lernst die Standards, Techniken und Best Practices kennen, um von Anfang an inklusive Anwendungen zu entwickeln.

In dieser Lerneinheit lernst du, wie du mit Standards wie WCAG 2.2 und BITV 2.0 arbeitest, welche assistiven Technologien existieren und wie du barrierefreien Code schreibst.

Lernziele

Nach dieser Lerneinheit kannst du:

• Die Bedeutung von Barrierefreiheit (Accessibility) erklären und begründen, warum sie wichtig ist
• Die Standards WCAG 2.2 und BITV 2.0 benennen und ihre Anforderungen beschreiben
• Assistive Technologien wie Screenreader und Vergrößerungssoftware erklären
• Universal Design und Inclusive Design unterscheiden und korrekt einordnen
• Barrierefreien HTML-Code mit semantischen Elementen, Alt-Texten und ARIA-Labels schreiben

Überleitung

Um zu verstehen, wie du Barrieren in deinen Anwendungen vermeidest, schauen wir uns zunächst an, was Barrierefreiheit genau bedeutet und warum sie so wichtig ist.

Danach lernst du die wichtigsten internationalen und deutschen Standards kennen, die dir konkrete Anforderungen für barrierefreie Software geben.

Was ist Barrierefreiheit?

Barrierefreiheit (oder Accessibility) bedeutet, dass digitale Produkte von allen Menschen genutzt werden können, unabhängig von körperlichen oder kognitiven Einschränkungen. Ziel ist es, niemanden auszuschließen.

Warum ist Barrierefreiheit wichtig?

• Inklusion und Gleichberechtigung: Jeder Mensch hat das Recht auf Zugang zu digitalen Informationen.
• Rechtliche Verpflichtung: In vielen Ländern gibt es Gesetze, die Barrierefreiheit vorschreiben (z.B. in Deutschland für öffentliche Stellen).
• Größere Zielgruppe: Barrierefreie Software erreicht mehr Menschen, einschließlich älterer Nutzer und Personen mit temporären Einschränkungen.
• Bessere Usability: Klare Strukturen und lesbare Inhalte verbessern die Nutzererfahrung für alle.

Der WCAG 2.2 Standard

Die Web Content Accessibility Guidelines (WCAG) sind der international anerkannte Standard für barrierefreie Webinhalte. Sie werden vom World Wide Web Consortium (W3C) entwickelt.

Die aktuelle Version ist WCAG 2.2 (veröffentlicht im Oktober 2023). Sie erweitert WCAG 2.1 um 9 neue Erfolgskriterien, die vor allem Menschen mit kognitiven Einschränkungen und mobile Nutzer unterstützen.

Die WCAG unterteilt sich in drei Konformitätslevel:

Level	Bedeutung
Level A	Minimale Anforderungen (z.B. Alt-Texte für Bilder)
Level AA	Empfohlen für die meisten Websites (z.B. Farbkontraste 4.5:1)
Level AAA	Strengste Anforderungen (z.B. Gebärdensprache für Videos)

Die vier Grundprinzipien der WCAG:

• Wahrnehmbar: Informationen müssen so dargestellt werden, dass Nutzer sie wahrnehmen können (z.B. Alt-Texte, Untertitel).
• Bedienbar: Benutzeroberflächen müssen bedienbar sein (z.B. Tastatur-Navigation).
• Verständlich: Informationen und Bedienung müssen verständlich sein (z.B. klare Sprache).
• Robust: Inhalte müssen von verschiedenen Hilfstechnologien interpretiert werden können (z.B. semantisches HTML).

BITV 2.0 in Deutschland

Die Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0 gilt für öffentliche Stellen in Deutschland. Sie setzt die EU-Richtlinie für die Zugänglichkeit von Websites und mobilen Anwendungen um.

Wichtig: Die BITV 2.0 verweist auf die harmonisierte europäische Norm EN 301 549 (aktuelle Version: V3.2.1 seit 2021). Diese Norm definiert die technischen Anforderungen an barrierefreie Informationstechnik und enthält die WCAG 2.1 Level AA als Kernbestandteil.

Die BITV verlangt:

• Konformität mit den WCAG 2.1 Level AA Anforderungen (über EN 301 549)
• Eine Erklärung zur Barrierefreiheit auf der Website, die Auskunft über den Grad der Barrierefreiheit gibt
• Kontaktmöglichkeiten für Feedback zur Barrierefreiheit

WCAG vs. BITV: Unterschiede und Gemeinsamkeiten

Beide Standards verfolgen dasselbe Ziel: Barrierefreie digitale Inhalte. Es gibt jedoch wichtige Unterschiede:

Kriterium	WCAG 2.2	BITV 2.0
Geltungsbereich	International	Deutschland
Anwendungsbereich	Alle Webinhalte	Öffentliche Stellen in Deutschland
Rechtsverbindlichkeit	Empfehlung	Gesetzliche Pflicht (für öffentliche Stellen)
Technische Basis	W3C-Standard	Basiert auf EN 301 549 (enthält WCAG 2.1 Level AA)
Zusätzliche Anforderungen	Keine	Erklärung zur Barrierefreiheit + Feedback-Mechanismus

Gemeinsamkeiten:

• Beide basieren auf denselben vier Prinzipien (Wahrnehmbar, Bedienbar, Verständlich, Robust)
• Beide fordern Level AA als Mindeststandard
• Beide zielen auf Inklusion und Zugänglichkeit ab

Assistive Technologie: Screenreader

Ein Screenreader ist eine Software, die den Inhalt des Bildschirms in Sprache umwandelt. Dies ist besonders hilfreich für sehbehinderte oder blinde Nutzer.

Wie funktioniert ein Screenreader?

Der Screenreader liest den auf dem Bildschirm angezeigten Text laut vor und bietet zusätzliche Navigationsoptionen. Du kannst zwischen Überschriften, Links und anderen Strukturelementen springen.

Beliebte Screenreader:

• JAWS (Job Access With Speech) - Professioneller Screenreader für Windows
• NVDA (NonVisual Desktop Access) - Kostenloser Open-Source-Screenreader für Windows
• VoiceOver - Integriert in Apple-Geräte (macOS, iOS)

Design-Überlegung: Verwende semantisches HTML, damit Screenreader die Struktur deiner Website korrekt interpretieren können.

Assistive Technologie: Vergrößerungssoftware

Vergrößerungssoftware hilft Nutzern mit eingeschränktem Sehvermögen, indem sie Bildschirminhalte vergrößert darstellt. Die Software kann entweder den gesamten Bildschirm oder nur einen Teilbereich vergrößern.

Wie funktioniert Vergrößerungssoftware?

Die Software vergrößert den Inhalt des Computerbildschirms, sodass Texte, Bilder und GUI-Elemente leichter zu erkennen sind.

Beliebte Vergrößerungssoftware:

• ZoomText - Professionelle Lösung für Windows mit Text-zu-Sprache
• MAGic - Screen Magnification Software für Windows
• Windows Lupe - Integriert in Windows (kostenlos)

Design-Überlegung: Stelle sicher, dass deine Layouts auch bei hohen Zoom-Stufen (200-400%) noch funktionieren und lesbar bleiben.

Weitere Assistive Technologien

Neben Screenreadern und Vergrößerungssoftware gibt es weitere wichtige assistive Technologien:

Spracheingabe:

• Ermöglicht die Steuerung des Computers durch gesprochene Befehle
• Beispiele: Dragon NaturallySpeaking, Windows Spracherkennung
• Hilft Menschen mit motorischen Einschränkungen oder bei Schreibproblemen

Braillezeilen:

• Wandeln Text in Braille-Schrift um - ein Tastsystem aus sechs erhabenen Punkten, das blinde Menschen mit den Fingern “lesen” können
• Werden über USB oder Bluetooth an den Computer angeschlossen
• Besonders wichtig für taub-blinde Menschen, die weder hören noch sehen können

Spezialtastaturen und Mausalternativen:

• Große Tastaturen mit weniger, dafür größeren Tasten
• Trackballs (stationäre Maus mit großer Kugel)
• Eye-Tracking-Systeme (Steuerung durch Augenbewegungen)
• Unterstützen Menschen mit motorischen Einschränkungen

Design-Prinzip für Entwickler:

• Stelle sicher, dass deine Anwendung auch ohne Maus bedienbar ist (Tastatur-Navigation)
• Biete Tastaturkürzel für häufige Aktionen an
• Teste deine Anwendung mit verschiedenen assistiven Technologien

⏳ Lädt Dataview-Inhalt...

Universal Design (auch: Design for All)

Universal Design (auch bekannt als Design for All) ist ein Gestaltungsansatz, der darauf abzielt, eine einzige Lösung zu schaffen, die für alle Menschen funktioniert - ohne Anpassungen oder Spezialversionen.

Wichtig zu wissen:

• Die Begriffe “Universal Design” und “Design for All” sind Synonyme
• “Universal Design” ist der internationale Begriff (USA, weltweit)
• “Design for All” ist die europäische Bezeichnung (EU-Raum)
• Es handelt sich um dasselbe Konzept mit derselben Philosophie

Kernprinzip:

• Eine Lösung wird so gestaltet, dass sie von vornherein für möglichst viele Menschen nutzbar ist
• Unabhängig von Alter, Fähigkeiten oder Einschränkungen
• Keine nachträglichen Anpassungen oder Spezialversionen nötig
• Das Ziel: “One size fits all” - wenn es gut gemacht ist

Beispiel:

• Ein öffentliches Transportsystem mit niedrigen Einstiegen und breiten Türen
• Funktioniert für Rollstuhlfahrer, Eltern mit Kinderwagen und ältere Menschen gleichermaßen
• Klare Ansagen helfen Menschen mit Sehbehinderungen
• Visuelle Anzeigen helfen Menschen mit Hörbehinderungen
• Niemand braucht zusätzliche Hilfe oder Spezialeinrichtungen

Inclusive Design

Inclusive Design (inklusives Design) ist ein anderer Ansatz als Universal Design. Statt einer einzigen Lösung für alle setzt Inclusive Design auf Anpassungsfähigkeit und multiple Lösungen für unterschiedliche Bedürfnisse.

Kernprinzip: Produkte werden so gestaltet, dass sie flexibel sind und sich an verschiedene Nutzerbedürfnisse anpassen können. Es wird akzeptiert, dass nicht eine Lösung für alle passt.

Hauptmerkmale:

• Flexibilität in der Nutzung: Verschiedene Wege, um dasselbe Ziel zu erreichen
• Vielfalt einbeziehen: Nutzer mit unterschiedlichen Fähigkeiten werden aktiv in den Designprozess einbezogen
• Individuelle Anpassungen: Das Design erlaubt Personalisierung und Konfiguration

Beispiel: Eine Website mit Accessibility-Optionen, bei der Nutzer zwischen verschiedenen Darstellungsmodi wählen können: Hoher Kontrast, große Schrift, vereinfachtes Layout, Screenreader-optimiert.

Universal Design vs. Inclusive Design

Der zentrale Unterschied liegt in der Philosophie:

Aspekt	Universal Design / Design for All	Inclusive Design
Ziel	Eine Lösung für alle	Multiple Lösungen für verschiedene Bedürfnisse
Ansatz	Von vornherein universal nutzbar	Flexibel und anpassbar
Anpassung	Idealerweise nicht nötig	Personalisierung erwünscht
Beispiel	Öffentlicher Aufzug (für alle gleich nutzbar)	Website mit verschiedenen Darstellungsmodi
Philosophie	”One size fits all” (wenn gut gemacht)	“Vielfalt der Bedürfnisse anerkennen”

Gemeinsamkeiten:

• Beide zielen auf Barrierefreiheit und Inklusion ab
• Beide berücksichtigen Nutzervielfalt im Designprozess
• Beide wollen niemanden ausschließen

In der Praxis kombinierst du oft beide Ansätze: Baue universell nutzbare Grundfunktionen, aber biete zusätzlich Anpassungsoptionen an.

Praktische Implementierung: Semantisches HTML

Barrierefreier Code beginnt mit semantischen HTML-Elementen. Sie helfen Screenreadern, die Struktur deiner Website zu verstehen.

Gutes Beispiel (semantische Struktur):

<nav>
  <ul>
    <li><a href="/home">Startseite</a></li>
    <li><a href="/about">Über uns</a></li>
  </ul>
</nav>
 
<main>
  <article>
    <h1>Hauptüberschrift</h1>
    <p>Inhalt hier...</p>
  </article>
</main>

Schlechtes Beispiel (keine Semantik):

<div id="navigation">
  <span onclick="navigate()">Startseite</span>
</div>

Erklärung

Semantische Elemente wie <nav>, <main>, <article> und <h1> geben der Struktur Bedeutung. Screenreader können Nutzer direkt zur Navigation springen lassen. <div> und <span> haben keine semantische Bedeutung - Screenreader wissen nicht, was sie darstellen.

Praktische Implementierung: Alt-Texte und ARIA

Alt-Texte beschreiben Bilder für Nutzer, die sie nicht sehen können. ARIA-Labels erweitern die Barrierefreiheit für komplexe Komponenten.

Gutes Beispiel (beschreibender Alt-Text):

<img src="chart.png"
     alt="Balkendiagramm: Screenreader-Nutzung 2024 - NVDA 40%, JAWS 35%, VoiceOver 25%">

Schlechtes Beispiel (generischer Alt-Text):

<img src="chart.png" alt="Bild">

Gutes Beispiel (ARIA-Label für Button):

<button aria-label="Menü schließen" aria-expanded="true">
  <span aria-hidden="true">×</span>
</button>

Erklärung

Alt-Texte sollten beschreibend sein: Erkläre, was auf dem Bild zu sehen ist und welche Information es vermittelt. ARIA-Labels (aria-label, aria-expanded) geben Screenreadern zusätzliche Informationen. Das aria-hidden="true" Attribut versteckt dekorative Elemente vor Screenreadern.

Praktische Implementierung: Tastaturnavigation

Alle interaktiven Elemente müssen mit der Tastatur bedienbar sein. Viele Nutzer können keine Maus verwenden.

Gutes Beispiel (tastatur-bedienbar):

<button tabindex="0" onclick="openMenu()">Menü öffnen</button>
 
<a href="#content" tabindex="0">Zum Inhalt springen</a>

Schlechtes Beispiel (nur mit Maus bedienbar):

<div onclick="openMenu()">Menü öffnen</div>

Erklärung

Das tabindex Attribut macht Elemente fokussierbar. tabindex="0" fügt das Element in die natürliche Tab-Reihenfolge ein.

Buttons und Links sind standardmäßig tastaturzugänglich. <div>-Elemente mit onclick sind es nicht - vermeide diese Konstruktion.

Skip-to-content Links helfen Tastatur-Nutzern, direkt zum Hauptinhalt zu springen, ohne durch die gesamte Navigation zu tabben.

⏳ Lädt Dataview-Inhalt...

Zusammenfassung und Ausblick

Zusammenfassung:

Standards für digitale Barrierefreiheit

Du hast die wichtigsten Standards kennengelernt:

• WCAG 2.2 (Oktober 2023) ist der internationale Standard mit drei Konformitätsstufen (Level A, AA, AAA) und vier Grundprinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust
• BITV 2.0 ist die deutsche Verordnung für öffentliche Stellen und verweist auf EN 301 549 (V3.2.1), die WCAG 2.1 Level AA als Kernbestandteil enthält
• Beide Standards fordern Level AA als Mindestanforderung

Assistive Technologien

Menschen mit Behinderungen nutzen verschiedene Hilfstechnologien:

• Screenreader (JAWS, NVDA, VoiceOver) wandeln Bildschirminhalte in Sprache um
• Vergrößerungssoftware (ZoomText, MAGic, Windows Lupe) vergrößert Bildschirminhalte
• Braillezeilen wandeln Text in tastbare Braille-Schrift um
• Spracheingabe ermöglicht Computersteuerung durch gesprochene Befehle
• Spezialtastaturen und Eye-Tracking unterstützen bei motorischen Einschränkungen

Design-Philosophien

Du hast zwei Design-Ansätze kennengelernt:

• Universal Design (auch Design for All) - diese Begriffe sind Synonyme. Ziel: Eine Lösung für alle Menschen
• Inclusive Design setzt auf Flexibilität und multiple Lösungen für unterschiedliche Bedürfnisse
• In der Praxis kombinierst du beide Ansätze

Barrierefreier Code

Du hast gelernt, wie du Barrierefreiheit im Code umsetzt:

• Semantisches HTML mit <nav>, <main>, <article> statt <div>
• Beschreibende Alt-Texte statt generischer Texte
• ARIA-Labels für komplexe Komponenten
• Tastaturnavigation mit tabindex und Skip-Links

Ausblick:

In der nächsten Lerneinheit lernst du, wie du Benutzerschnittstellen für verschiedene Plattformen gestaltest - von Desktop über Mobile bis zu Wearables. Die Accessibility-Prinzipien spielen dabei eine zentrale Rolle.

---