Klarzugang

This English version is a preview. Legal and guide content is in German.

Anleitungen für Eigenes HTML / andere

Barrierefreiheitserklärung im Footer verlinken

WCAG · leicht · etwa 20 Minuten · Stand 08.11.2026

Worum es geht

Eine Barrierefreiheitserklärung beschreibt, wie zugänglich dein Shop ist, wo es noch Einschränkungen gibt und wie man dich bei Problemen erreicht. Das BFSG verlangt Informationen nach Anlage 3. Was genau hineingehört, erklären wir auf der Seite BFSG: Barrierefreiheitserklärung. Diese Anleitung kümmert sich um den technischen Teil: Die Seite muss leicht zu finden sein. Das W3C empfiehlt, die Erklärung von gut sichtbaren Stellen aus zu verlinken, etwa aus dem Footer, und dafür überall denselben Linknamen zu verwenden.

Wen es betrifft

  • Menschen mit Behinderungen, die wissen wollen, ob dein Shop für sie nutzbar ist, oder die dir ein Problem melden möchten.
  • Screenreader-Nutzende, die über die Linkliste oder die Footer-Navigation nach einem Begriff wie "Barrierefreiheit" suchen.
  • Alle, die dich bei einer Barriere kontaktieren wollen und dafür einen klaren Weg brauchen.

So behebst du es

  1. Erklärung als eigene HTML-Seite anlegen. Mit unserem Generator für Barrierefreiheitserklärungen erstellst du einen Entwurf, den du anpasst und als normale Seite in deinem Shop veröffentlichst, zum Beispiel unter /barrierefreiheit. Eine HTML-Seite ist für alle leichter zugänglich als ein PDF.

  2. Im Footer verlinken, auf jeder Seite. Der Linktext enthält das Wort "Barrierefreiheit", damit man ihn findet und versteht, wohin er führt.

    Schlecht:

    <footer>
      <a href="/b-info">Info</a>
      <a href="/b-info"><img src="rollstuhl.svg"></a>
    </footer>
    

    Gut:

    <footer>
      <nav aria-label="Rechtliches und Service">
        <ul>
          <li><a href="/impressum">Impressum</a></li>
          <li><a href="/datenschutz">Datenschutz</a></li>
          <li><a href="/agb">AGB</a></li>
          <li><a href="/barrierefreiheit">Barrierefreiheit</a></li>
        </ul>
      </nav>
    </footer>
    

    Auch "Erklärung zur Barrierefreiheit" ist ein guter Linktext. Ein Symbol allein ist nicht eindeutig und braucht mindestens einen Text.

  3. Gleicher Ort, gleicher Name. Setze den Link überall an dieselbe Stelle und benenne ihn überall gleich, wie es das W3C empfiehlt. So erkennen Menschen ihn wieder.

  4. Die Erklärungsseite selbst zugänglich bauen. Gib ihr eine eindeutige h1, gliedere sie mit Überschriften, setze lang="de" und einen aussagekräftigen Seitentitel.

    <!DOCTYPE html>
    <html lang="de">
    <head>
      <meta charset="utf-8">
      <title>Erklärung zur Barrierefreiheit, Mein Shop</title>
    </head>
    <body>
      <main>
        <h1>Erklärung zur Barrierefreiheit</h1>
        <h2>Stand der Barrierefreiheit</h2>
        <p>...</p>
        <h2>Bekannte Einschränkungen</h2>
        <p>...</p>
        <h2>Feedback und Kontakt</h2>
        <p>Du stößt auf eine Barriere? Schreib uns an
          <a href="mailto:barrierefreiheit@example.com">barrierefreiheit@example.com</a>.
        </p>
      </main>
    </body>
    </html>
    
  5. Kontaktweg angeben, der selbst zugänglich ist. Das W3C nennt Kontaktinformationen für den Fall, dass jemand auf Probleme stößt, als festen Bestandteil einer Erklärung. Eine E-Mail-Adresse als Link ist der einfachste Weg. Wenn du ein Kontaktformular verlinkst, muss auch dieses barrierefrei bedienbar sein.

  6. Datum pflegen. Notiere, wann die Erklärung erstellt oder zuletzt geprüft wurde, und aktualisiere sie, wenn du Barrieren behebst oder neue Funktionen einbaust.

So prüfst du es

  1. Von jeder Seitenart aus suchen: Öffne Startseite, Kategorie, Produkt, Warenkorb und Checkout. Ist der Link im Footer überall vorhanden und gleich benannt?
  2. Tastatur: Springe mit Tab bis in den Footer. Ist der Link erreichbar und hat er einen sichtbaren Fokus?
  3. Screenreader: Öffne in NVDA mit Einfügen + F7 oder in VoiceOver mit VO + U die Linkliste und tippe "Barr". Taucht der Link auf?
  4. axe DevTools und WAVE prüfen die Erklärungsseite wie jede andere Seite. Sie erkennen nicht, ob die Erklärung vorhanden ist. Das prüfst du selbst.
  5. Inhalt gegenlesen: Stimmt die Erklärung mit dem aktuellen Stand deines Shops überein?

Mehr dazu

Seite erneut prüfen · Kontrast-Prüfer