Barrierefreiheit im Web: Grundlagen und relevante Standards!

Knowledge-Base • Barrierefreiheit • Barrierefreiheit im Web: Grundlagen und relevante Standards!
Lesezeit ca: 17 min

Digitale Barrierefreiheit (engl. Accessibility) von Webseiten wird durch den European Accessibility Act (EAA) ab dem 28. Juni 2025 für viele Unternehmen in der EU verpflichtend. Dies ist nicht nur eine gesetzliche Anforderung, sondern auch die Chance, alle Menschen unabhängig von ihren Fähigkeiten oder Einschränkungen bestmöglich zu erreichen.

Der EAA verpflichtet dazu, digitale Produkte und Dienstleistungen, einschließlich Websites und Apps, barrierefrei zu gestalten. Doch wie stellst du sicher, dass deine Webseite diesen Anforderungen entspricht? Diese Übersicht zeigt dir die zentralen Grundlagen und relevanten Standards, um eine inklusive und zugängliche Webseite zu erstellen.

Standards für barrierefreie Webinhalte:
Die WCAG

Die Web Content Accessibility Guidelines (WCAG), aktuell in Version 2.1 (Version 2.2 ist bereits verfügbar, aber 2.1 ist oft noch die Referenz für Gesetzgebungen), definieren den internationalen Standard für barrierefreie Webinhalte. Sie werden von der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) entwickelt. Die Richtlinien helfen dabei, Webinhalte für Menschen mit unterschiedlichen Fähigkeiten zugänglich zu machen. Die WCAG basiert auf vier fundamentalen Prinzipien:

  1. Wahrnehmbar:
    Inhalte und Bedienelemente müssen so präsentiert werden, dass Nutzer sie wahrnehmen können (z. B. durch Alternativtexte für Bilder, Untertitel für Videos, ausreichende Farbkontraste).
  2. Bedienbar:
    Komponenten der Benutzeroberfläche und die Navigation müssen bedienbar sein (z. B. volle Tastaturbedienbarkeit, genügend Zeit für Interaktionen, Vermeidung von Inhalten, die Anfälle auslösen könnten).
  3. Verständlich:
    Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein (z. B. klare Sprache, vorhersehbare Funktionalität, Hilfe bei der Fehlereingabe).
  4. Robust:
    Inhalte müssen robust genug sein, damit sie von einer Vielzahl von Benutzeragenten, einschließlich assistierender Technologien (wie Screenreadern), zuverlässig interpretiert werden können.

Wenn Webseiten und digitale Werkzeuge nach diesen Prinzipien gestaltet und programmiert sind, können sie von Menschen mit Behinderungen oft problemlos genutzt werden. Leider enthalten viele aktuelle Angebote noch Barrieren, die die Nutzung erschweren oder unmöglich machen.

Ein barrierefreies Web bringt Vorteile für alle: Einzelpersonen erhalten gleichberechtigten Zugang zu Informationen und Diensten, Unternehmen erweitern ihre Reichweite und die Gesellschaft wird inklusiver. Internationale Standards wie die WCAG definieren klar die Anforderungen hierfür. Der EAA bezieht sich häufig auf Konformitätsstufen der WCAG (meist Level AA) als Maßstab.

Was sind die Grundlagen der Barrierefreiheit im Web?

Das Web wurde mit dem Grundgedanken entworfen, für alle Menschen zu funktionieren – unabhängig von ihrer Hardware, Software, Sprache, ihrem Standort oder ihren individuellen Fähigkeiten. Eine barrierefreie Webseite zeichnet sich unter anderem durch Folgendes aus:

Klare Navigation

Eine intuitive Navigation ist entscheidend. Die veraltete „Drei-Klick-Regel“ ist weniger wichtig als eine logisch strukturierte und leicht nachvollziehbare Menüführung.

Technisch muss sichergestellt sein, dass Screenreader die Navigation verstehen. Dazu gehört die korrekte Auszeichnung von Menüs (z. B. mit <nav>) und die Kommunikation des Zustands interaktiver Elemente mithilfe von ARIA-Attributen. Beispielsweise sollte bei einem Menüpunkt mit Untermenü angezeigt werden, ob das Untermenü aktuell sichtbar (expandiert) ist (aria-expanded="true") oder nicht (aria-expanded="false").

Ein aria-controls-Attribut kann das Menüelement mit dem zugehörigen Untermenü verknüpfen. Eine klare Beschriftung des Navigationsbereichs (z. B. mittels aria-labelledby oder aria-label) hilft Screenreader-Nutzern bei der Orientierung.

Beispiel einer einfachen Navigationsstruktur mit ARIA für ein aufklappbares Untermenü:

<nav aria-labelledby="mainMenuHeading">
  <!-- Optional: Überschrift für Struktur, ggf. visuell versteckt -->
  <h2 id="mainMenuHeading" class="visually-hidden">Hauptnavigation</h2>  
  <ul>
    <li>
      <!-- Knopf wäre hier semantisch besser, wenn nur zum Aufklappen -->
      <a href="#" aria-expanded="false" aria-controls="submenu1">  
          Menüpunkt 1 (mit Untermenü)
      </a>
      <!-- 'hidden' initial verwenden -->
      <ul id="submenu1" hidden> 
        <li><a href="#">Unterpunkt 1.1</a></li>
        <li><a href="#">Unterpunkt 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Menüpunkt 2</a></li>
  </ul>
</nav>

Hinweis:
Für reine Aufklapp-Elemente ohne direkten Link ist ein <button> oft semantisch korrekter als ein <a>

HTML-Semantik einhalten, insbesondere bei Überschriften

Überschriften (<h1> bis <h6>) strukturieren den Inhalt logisch und hierarchisch. Halte die Reihenfolge ein (auf eine <h2> folgt eine <h3> oder eine weitere <h2>, aber keine <h4>). Überschriften sind für die Gliederung da, nicht für rein optische Effekte. Nutze CSS für visuelle Formatierungen. Eine korrekte Überschriftenstruktur ist essenziell für Screenreader-Nutzer zur Navigation und für Suchmaschinen zum Verständnis der Seiteninhalte.

Beispiel einer korrekten Überschriftenhierarchie:

<section aria-labelledby="servicesHeading">
  <h2 id="servicesHeading">Unsere Dienstleistungen</h2>
  <p>Ein kurzer Überblick...</p>

  <article aria-labelledby="webdesignHeading">
    <h3 id="webdesignHeading">Webdesign</h3>
    <p>Wir erstellen moderne Webseiten...</p>

    <h4 id="responsiveHeading">Responsive Design</h4>
    <p>Unsere Designs passen sich an...</p>

    <h4 id="seoHeading">SEO-Optimierung</h4>
    <p>Wir sorgen für gute Auffindbarkeit...</p>
  </article>

  <article aria-labelledby="developmentHeading">
    <h3 id="developmentHeading">Webentwicklung</h3>
    <p>Von maßgeschneiderten Funktionen...</p>
  </article>
</section>

Unterstützung von Screenreadern (Semantik & ARIA)

Semantisches HTML (korrekte Nutzung von <nav>, <main>, <article>, <aside>, Überschriften, Listen etc.) bildet die Grundlage. Es gibt der Seite eine klare Struktur, die Screenreader interpretieren können.

ARIA (Accessible Rich Internet Applications)-Attribute ergänzen HTML, wo dessen Semantik nicht ausreicht, um komplexe Widgets (wie Menüs, Tabs, Slider) oder dynamische Zustandsänderungen (wie aria-expanded) verständlich zu machen. Setze ARIA überlegt ein: Falsch verwendetes ARIA kann mehr schaden als nutzen. Oft ist korrektes HTML ausreichend.

Buttons und Links korrekt verwenden

Verwende das semantisch korrekte Element. Beide müssen klar beschriftet, visuell unterscheidbar und per Tastatur erreichbar und bedienbar sein. Enter aktiviert Links und Buttons, Leertaste aktiviert ebenfalls Buttons.

  • Links (<a>) dienen der Navigation zu einer anderen Seite oder Ressource.
  • Buttons (<button>) lösen eine Aktion auf der aktuellen Seite aus (z. B. Formular senden, Menü öffnen/schließen).

Barrierefreie Formulare

Um Formulare barrierefrei zu gestaltet und Screenreader-Benutzer Kontext zu geben, müssen die Eingabefeldern mit Labels verknüpft werden. Platzhalter dienen nur als Ergänzung oder Design Element, ersetzen aber keine Labels. Wenn im Design keine sichtbaren Labels vorgesehen sind, müssen diese trotzdem im DOM vorhanden sein.

  • Jedes Eingabefeld (<input>, <textarea>, <select>) benötigt ein zugeordnetes <label>-Element (Verknüpfung über for- und id-Attribute).
  • Platzhalter (placeholder) sind kein Ersatz für Labels! Sie verschwinden oft bei der Eingabe und sind nicht immer für Screenreader zugänglich.
  • Wenn Labels aus Designgründen nicht sichtbar sein sollen, müssen sie visuell versteckt (z. B. per CSS), aber im DOM für Screenreader verfügbar bleiben.
  • Fehlermeldungen müssen klar formuliert und programmatisch mit dem fehlerhaften Feld verknüpft werden (z. B. via aria-describedby oder aria-errormessage). Setze aria-invalid="true" am Eingabefeld, wenn ein Fehler vorliegt.

Beispiel für ein E-Mail-Feld mit Label und verknüpfter Fehlermeldung:

<div>
  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" name="email" required aria-describedby="emailError" aria-invalid="false">
  <!-- Fehlermeldung initial versteckt -->
  <span id="emailError" class="error-message" style="display: none;">
    Bitte geben Sie eine gültige E-Mail-Adresse ein.
  </span>
</div>

<!-- JavaScript würde bei Fehler aria-invalid="true" setzen und die Fehlermeldung einblenden -->

Farben und Kontraste

Gute Lesbarkeit erfordert ausreichenden Kontrast zwischen Textfarbe und Hintergrundfarbe. Die WCAG 2.1 Level AA fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (oder fette Schrift unter bestimmten Größen). Nutze Online-Tools wie den «Contrast Checker» von WebAIM oder eingebaute Browser-Werkzeuge (WCAG Color contrast checker: für Chrome oder WCAG Contrast checker für Firefox), um die Farbkontraste deiner Webseite zu überprüfen.

Wähle zudem gut lesbare Schriftarten, detailierte Infos dazu findest du in: Variable Fonts: Ladezeiten reduzieren & Web Performance verbessern . Verlasse dich nicht allein auf Farbe, um Informationen zu vermitteln (z. B. bei Fehlermeldungen auch ein Icon oder Text verwenden).

Alternativtexte für Bilder

Jedes informative Bild benötigt ein aussagekräftiges alt-Attribut, das den Inhalt oder die Funktion des Bildes beschreibt. Rein dekorative Bilder, die keinen inhaltlichen Mehrwert bieten, sollten ein leeres alt-Attribut (alt="") erhalten oder besser als CSS-Hintergrundbild eingebunden werden, damit sie von Screenreadern ignoriert werden.

Videos mit Untertiteln (und ggf. Transkripten)

Eingebettete Videos sollten Untertitel für Menschen mit Hörbeeinträchtigungen anbieten. Idealerweise stellt man zusätzlich Transkripte (Textversion des Audioinhalts) zur Verfügung.

Tipp:
Lade deine Videos auf youtube.com hoch und bette diese auf deiner Webseite ein. YouTube versucht, aus hochgeladenen Videos automatisch Untertitel und ein Transkript zu generieren, doch die Genauigkeit ist nicht immer gewährleistet und hängt maßgeblich von der Audioqualität ab. Für eine zuverlässige Barrierefreiheit müssen Creator die Ergebnisse oft prüfen und bearbeiten oder eigene Dateien bereitstellen.

Unterstütze die Tastaturnavigation

Die Unterstützung der Tastaturnavigation ist essenziell für die Barrierefreiheit deiner Webseite. Besucher, die keine Maus verwenden können, sollten alle interaktiven Elemente (Links, Buttons, Formularfelder etc.) allein mit der Tastatur erreichen und bedienen können.

  • Fokusreihenfolge:
    Die Reihenfolge, in der Elemente mit der Tab-Taste angesprungen werden, muss logisch und nachvollziehbar sein (entspricht meist der visuellen Reihenfolge).
  • Fokus sichtbar machen:
    Das aktuell fokussierte Element muss deutlich visuell hervorgehoben sein (z. B. durch einen Rahmen/Outline). Der Standard-Browser-Fokus ist oft nicht ausreichend sichtbar. Verwende :focus-visible in CSS für eine benutzerfreundliche Fokushervorhebung, die meist nur bei Tastaturnavigation erscheint.
/* Zeigt einen deutlichen Umriss nur bei Tastaturfokus */
*:focus-visible {
  /* Farbe und Stil anpassen */
  outline: 3px solid blue; 
  /* Abstand zum Element */
  outline-offset: 2px;
  /* Alternative Stile */
  box-shadow: 0 0 0 2px white, 0 0 0 5px blue;
}

Grundlegende Tastaturbefehle zum Testen

  • Tab: Zum nächsten interaktiven Element springen.
  • Shift + Tab: Zum vorherigen interaktiven Element springen.
  • Enter: Link aktivieren oder Button auslösen.
  • Leertaste: Button auslösen, Checkbox/Radiobutton umschalten, Seite nach unten scrollen.
  • Pfeiltasten: Oft zur Navigation innerhalb von Widgets (Radiobuttons, Menüs, Slider).

Um deine Webseite ausführlich zu testen, gibt es spezielle Tools und Methoden. Im Artikel „Barrierefreiheit, wie überprüfe ich meine Webseite?“ findest du weitere Informationen dazu.

Verständliche Inhalte: Klare Sprache und Struktur

Das dritte WCAG-Prinzip «Verständlich» betont, dass Informationen und die Bedienung der Benutzeroberfläche nachvollziehbar sein müssen. Dies erreichst du vor allem durch klare Sprache und eine logische Struktur.

Klare Sprache verwenden

  • Formuliere Inhalte so einfach und klar wie möglich. Vermeide unnötigen Fachjargon, komplexe Satzkonstruktionen oder übermäßig formale Sprache.
  • Wenn Fachbegriffe oder Abkürzungen unvermeidlich sind, erkläre sie bei der ersten Nennung.
  • Schreibe in kurzen, prägnanten Sätzen und nutze bevorzugt die aktive Sprache.
  • Gliedere längere Texte in kurze Absätze mit klaren Kernaussagen.
  • Berücksichtige deine Zielgruppe, aber strebe eine möglichst breite Verständlichkeit an (oft wird ein Niveau empfohlen, das keiner speziellen Vorbildung bedarf).

Logische Struktur schaffen

  • Wie bereits bei der Semantik erwähnt, ist die korrekte und hierarchische Nutzung von Überschriften (<h1>-<h6>) entscheidend, um Inhalte logisch zu gliedern und Nutzern (insbesondere Screenreader-Nutzern) eine Orientierung zu geben.
  • Setze Listen (<ul> für ungeordnete, <ol> für geordnete) ein, um Aufzählungen oder schrittweise Anleitungen klar darzustellen.
  • Nutze semantische HTML-Elemente (<main>, <nav>, <article>, <footer> etc.), um verschiedene Bereiche deiner Seite klar voneinander abzugrenzen (sogenannte Landmarks).
  • Sorge für Konsistenz bei Layout, Navigationselementen und der Benennung von Funktionen auf deiner gesamten Website. Wenn Elemente an verschiedenen Stellen gleich aussehen und funktionieren, ist die Nutzung vorhersehbar und leichter verständlich.

Fazit

Indem du auf klare Sprache und eine durchdachte Struktur achtest, erleichterst du nicht nur Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten den Zugang, sondern verbesserst die Nutzererfahrung für alle Besucher deiner Webseite. Inhalte werden schneller erfasst und die Navigation wird intuitiver.

Expand Your Knowledge