Wichtige Begriffe und Konzepte (Glossar)

Inhaltsverzeichnis

Einleitung

Digitale Barrierefreiheit ist ein vielschichtiges Thema, das zahlreiche Fachbegriffe und Konzepte umfasst. Diese Terminologie bildet die Grundlage für das Verständnis, die Umsetzung und die Bewertung barrierefreier digitaler Inhalte. Unternehmen, Entwickler und Organisationen, die sich mit digitaler Inklusion befassen, müssen mit diesen Begriffen vertraut sein, um digitale Angebote für alle Menschen zugänglich zu machen.

In diesem Glossar werden zentrale Begriffe der digitalen Barrierefreiheit umfassend erläutert. Dabei liegt der Fokus darauf, die einzelnen Konzepte nicht nur zu definieren, sondern sie in ihrem praktischen Anwendungsbereich zu kontextualisieren.


1. Web Content Accessibility Guidelines (WCAG)

Die WCAG sind der internationale Standard für barrierefreie Webinhalte. Diese Richtlinien wurden vom World Wide Web Consortium (W3C) entwickelt und bieten konkrete Vorgaben, um Websites, mobile Anwendungen und digitale Inhalte für Menschen mit Behinderungen zugänglich zu machen.

Die WCAG bestehen aus vier grundlegenden Prinzipien:

  • Wahrnehmbarkeit: Digitale Inhalte müssen so gestaltet sein, dass sie für alle Nutzer erfassbar sind. Dies beinhaltet Alternativtexte für Bilder, hohe Farbkontraste und die Möglichkeit, Inhalte in verschiedenen Formen darzustellen.

  • Bedienbarkeit: Websites und Anwendungen müssen ohne Einschränkungen navigierbar sein. Dies bedeutet unter anderem, dass alle Funktionen über die Tastatur erreichbar sind und klare Fokus-Indikatoren für interaktive Elemente vorhanden sind.

  • Verständlichkeit: Informationen müssen leicht erfassbar sein. Eine einfache Sprache, vorhersehbare Navigation und erklärende Hilfen tragen dazu bei, dass digitale Angebote intuitiv nutzbar sind.

  • Robustheit: Inhalte müssen mit einer Vielzahl von Endgeräten und Assistenztechnologien kompatibel sein, um langfristig zugänglich zu bleiben.


2. Assistive Technologien

Assistive Technologien sind technische Hilfsmittel, die Menschen mit Behinderungen die Nutzung digitaler Inhalte erleichtern. Sie umfassen eine Vielzahl von Geräten und Softwarelösungen, die den Zugang zum Internet und digitalen Anwendungen ermöglichen.

Zu den wichtigsten assistiven Technologien zählen:

  • Screenreader: Programme, die Bildschirmtexte in gesprochene Sprache oder Brailleschrift umwandeln. Sie ermöglichen blinden und sehbehinderten Menschen das Lesen von Webinhalten.

  • Braillezeilen: Geräte, die digitale Inhalte als taktile Schrift in Braille-Zeichen darstellen, um sie für Menschen mit Sehbehinderungen erfassbar zu machen.

  • Sprachsteuerung: Systeme wie Apple Siri, Google Assistant oder Amazon Alexa, die es Nutzern ermöglichen, digitale Inhalte durch Sprachbefehle zu steuern.

  • Augensteuerungssysteme: Technologien, die es Menschen mit motorischen Einschränkungen erlauben, durch Augenbewegungen zu navigieren und Eingaben zu tätigen.


3. Alternative Texte (Alt-Texte)

Alternative Texte sind Beschreibungen, die in den HTML-Code von Bildern eingebettet werden, um den Inhalt für blinde oder sehbehinderte Nutzer zugänglich zu machen. Screenreader lesen diese Texte vor, um die Bedeutung von visuellen Elementen zu vermitteln.

Ein gut geschriebener Alternativtext sollte prägnant und informativ sein. Statt „Bild eines Hundes“ wäre beispielsweise „Ein golden retriever sitzt auf einer grünen Wiese“ eine deutlich nützlichere Beschreibung. Wichtig ist, dass rein dekorative Bilder mit einem leeren Alt-Attribut versehen werden, damit sie von Screenreadern ignoriert werden können.


4. Tastaturnavigation

Viele Menschen mit motorischen Einschränkungen sind auf die Nutzung der Tastatur angewiesen, da sie keine Maus bedienen können. Barrierefreie Websites müssen sicherstellen, dass alle interaktiven Elemente – darunter Links, Formulare und Buttons – vollständig mit der Tastatur erreichbar sind.

Ein zentrales Konzept der Tastaturnavigation ist die Tab-Reihenfolge. Diese bestimmt, in welcher Reihenfolge Elemente auf einer Webseite per Tabulator-Taste angesteuert werden. Eine logische Reihenfolge verbessert die Benutzerfreundlichkeit und ermöglicht eine effiziente Navigation ohne überflüssige Sprünge.


5. Farbkontraste und visuelle Zugänglichkeit

Menschen mit Sehschwächen oder Farbenblindheit benötigen ein hohes Maß an Kontrast zwischen Text und Hintergrund, um Inhalte problemlos lesen zu können. Die WCAG geben klare Mindestanforderungen vor: Ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für große Schrift wird als notwendig erachtet.

Ein weiteres wichtiges Prinzip ist die Vermeidung von alleiniger Farbkommunikation. Informationen sollten nicht nur durch Farben vermittelt werden, sondern auch durch Symbole oder Text, um Menschen mit Farbsehschwächen eine alternative Wahrnehmung zu ermöglichen.


6. Barrierefreie Formulare

Formulare gehören zu den zentralen Interaktionselementen vieler Websites und Anwendungen. Um sie barrierefrei zu gestalten, sind folgende Aspekte entscheidend:

  • Eindeutige Labels: Jedes Eingabefeld muss eine klare Beschriftung haben, die es Nutzern ermöglicht, den Zweck des Feldes zu verstehen.

  • Fehlermeldungen mit konkreten Anweisungen: Nutzer müssen klare Hinweise erhalten, wenn eine Eingabe fehlschlägt, und Anweisungen zur Korrektur sollten einfach verständlich sein.

  • Ausreichende Zeitlimits: Nutzer mit motorischen Einschränkungen oder kognitiven Beeinträchtigungen benötigen mehr Zeit zum Ausfüllen von Formularen. Flexible Zeitlimits verhindern, dass Eingaben verloren gehen.


7. Captcha und barrierefreie Sicherheitsabfragen

Viele Webseiten verwenden Captchas, um automatisierte Bots von echten Nutzern zu unterscheiden. Standard-Captchas mit verzerrtem Text sind für blinde Menschen oder Menschen mit Dyslexie jedoch oft unlösbar. Barrierefreie Alternativen sind:

  • Audio-Captchas, die stattdessen akustische Herausforderungen bereitstellen.

  • Einfache Rechenaufgaben, die auch ohne visuelle Wahrnehmung gelöst werden können.

  • Barrierefreie Verifizierungsmethoden, wie die Bestätigung per E-Mail oder SMS.


8. Responsives und adaptives Design

Ein wichtiger Aspekt der digitalen Barrierefreiheit ist die Anpassungsfähigkeit digitaler Inhalte an verschiedene Geräte und Bildschirmgrößen. Während responsives Design sicherstellt, dass sich Inhalte dynamisch an unterschiedliche Bildschirmgrößen anpassen, geht adaptives Design noch weiter, indem es spezifische Layouts für unterschiedliche Gerätetypen bereitstellt.

Für barrierefreie Webseiten bedeutet dies, dass Schriftgrößen flexibel skalierbar sein müssen und Inhalte auch bei hoher Zoomstufe noch gut lesbar bleiben sollten. Zudem sollten alle Funktionen sowohl auf Desktop- als auch auf mobilen Geräten uneingeschränkt nutzbar sein.

 

Informative Ratgeber und redaktionelle Artikel rund um digitale Barrierefreiheit

Weitere Artikel entdecken

Ein Mann prüft am Computer mithilfe digitaler Tools wie WAVE, axe und Lighthouse, ob die Website barrierefrei gestaltet ist.

Automatisiertes Barrierefreiheits-Testing mit axe, WAVE & Lighthouse

Automatisiertes Barrierefreiheits-Testing mit axe, WAVE und Lighthouse bringt Accessibility-Prüfungen direkt in euren Dev-Prozess: Von der lokalen Code-Extension über Pre-Commit-Hooks bis zur CI/CD-Pipeline sorgen diese Tools für schnelle, skalierbare Audits nach WCAG-Standards. axe glänzt mit tiefgehenden Regelsets für semantisches HTML und ARIA, WAVE liefert visuelles Feedback auf der Seite, und Lighthouse bietet zusätzlich Performance- und SEO-Checks. Durch frühzeitige Fehlererkennung in Pull-Requests und nächtliche Full-Site-Scans lassen sich Regressionen vermeiden und alle Releases revisionssicher dokumentieren.

Für reibungslose Abläufe empfiehlt es sich, automatische Builds bei kritischen Violations abbrechen zu lassen, Tickets via Bot zu erzeugen und KPI-gedriebene Dashboards zu pflegen. das IFDB – Institut für digitale Barrierefreiheit unterstützt euch dabei mit zertifizierten Audits, maßgeschneiderten Schulungen und Managed Monitoring, damit eure Produkte dauerhaft 100 % gesetzeskonform und inklusiv bleiben.

Weiterelesen
Frau sitzt an einem Schreibtisch und gestaltet am Computer ein modernes Webdesign mit Fokus auf Farben und Kontraste. Das Bild symbolisiert barrierefreies Design und visuelle Lesbarkeit für inklusive digitale Inhalte

Designrichtlinien für Inklusion – Farben, Kontraste & visuelle Lesbarkeit

Damit alle Nutzer per Tastatur klar erkennen, welches Element gerade aktiv ist, solltest du für Links und Buttons deutliche Fokusrahmen definieren – zum Beispiel einen 3 Pixel breiten, kontrastreichen Rand mit ausreichend Abstand zum umgebenden Inhalt. Achte darauf, dass dieser Rahmen stets gut sichtbar bleibt und nicht zu dünn oder farblich zu unauffällig ausfällt.

Für aufklappbare Untermenüs sind ARIA-Attribute unverzichtbar: Mit aria-expanded signalisierst du, ob das Submenü geöffnet ist, und über aria-controls verknüpfst du den auslösenden Button mit dem entsprechenden Menü. Zusätzlich zeigt aria-haspopup an, dass eine weitere Ebene folgt. So verstehen Screenreader zuverlässig, wann Nutzer auf ein Dropdown stoßen und in welchem Zustand es sich befindet.

Auch die mobile Navigation lässt sich barrierefrei umsetzen: Ein einfacher Hamburger-Button trägt aria-expanded=“false“ und aria-controls=“mobile-menu“ und toggelt beim Klick das versteckte

Weiterelesen
Ein diverses Team sitzt gemeinsam vor einem Bildschirm und betrachtet motiviert Inhalte am Monitor. Die Szene steht exemplarisch für eine barrierefreie Zusammenarbeit in modernen Unternehmen, in denen digitale Teilhabe, Teamarbeit und inklusive Arbeitskultur gefördert werden.

Navigation barrierefrei gestalten – Was eine zugängliche Menüführung ausmacht

Damit alle Nutzer per Tastatur klar erkennen, welches Element gerade aktiv ist, solltest du für Links und Buttons deutliche Fokusrahmen definieren – zum Beispiel einen 3 Pixel breiten, kontrastreichen Rand mit ausreichend Abstand zum umgebenden Inhalt. Achte darauf, dass dieser Rahmen stets gut sichtbar bleibt und nicht zu dünn oder farblich zu unauffällig ausfällt.

Für aufklappbare Untermenüs sind ARIA-Attribute unverzichtbar: Mit aria-expanded signalisierst du, ob das Submenü geöffnet ist, und über aria-controls verknüpfst du den auslösenden Button mit dem entsprechenden Menü. Zusätzlich zeigt aria-haspopup an, dass eine weitere Ebene folgt. So verstehen Screenreader zuverlässig, wann Nutzer auf ein Dropdown stoßen und in welchem Zustand es sich befindet.

Auch die mobile Navigation lässt sich barrierefrei umsetzen: Ein einfacher Hamburger-Button trägt aria-expanded=“false“ und aria-controls=“mobile-menu“ und toggelt beim Klick das versteckte

Weiterelesen
Kontaktieren sie uns!

Mit der IFDB haben Sie einen starken Partner an Ihrer Seite, wenn es um die Barrierefreiheit digitaler Angebote geht.

Wir stehen Ihnen gerne für alle Fragen zur Verfügung – auch telefonisch.

Vorteile der Access Ready Zertifizierung nach EU 2019/882:

Was sind die nächsten Schritte?

1

Wir prüfen Ihr digitales Angebot auf digitale Barrierefreiheit.

2

Terminvereinbarung für kostenfreie & unverbdindliche Erstberatung.

3

Zertifizierung des digitalen Auftritts. Gesetzeskonsform & barrierefrei

Kostenloser Compliance Check & Erstgespräch!