Website barrierefrei? Checkliste für die bevorstehende Gesetzesänderung

Kunde:
Auftrag:
Auf einer Tastatur sind drei Buttons hervorgehoben, die statt Buchstaben Icons zum Thema barrierefreie Website enthalten, darunter eine Person im Rollstuhl, um das Thema Körperliche Einschränkungen zu visualisieren, ein Ohr mit Schallwellen, um Akustische Einschränkungen abzubilden und eine Person mit Blindenstock, was für Visuelle Einschränkungen steht

Website barrierefrei? Checkliste für die bevorstehende Gesetzesänderung

Ab 2025 treten die neuen Regelungen des Barrierefreiheitsstärkungsgesetzes in Kraft. Damit wird eine barrierefreie Website für viele deutsche Unternehmen zur Pflicht. Hier eine Liste, mit der Sie prüfen können, ob Ihre Seite bereits den neuen gesetzlichen Vorgaben entspricht.

10-Punkte-Checkliste barrierfreie Website

  1. HTML-Struktur
    Der HTML-Quelltext ist logisch strukturiert, standardkonform und fehlerfrei. HTML-Elemente werden entsprechend ihrer Funktion semantisch korrekt eingesetzt (z. B. Listen, Zitate, Tabellen).
  2. Überschriftenstruktur
    Überschriften sind korrekt strukturiert und verwenden die passenden HTML-Elemente (h1, h2, h3 …). Die Hierarchie der Überschriften ist korrekt angeordnet und unterstützt die Navigation durch den Inhalt.
  3. Farben und Kontraste
    Informationen werden nicht ausschließlich durch Farben vermittelt. Das Kontrastverhältnis von Text zu Hintergrundfarbe beträgt mindestens 4,5 : 1. Bei großer Schrift (ab 18pt oder 14pt fett) beträgt das Kontrastverhältnis mindestens 3 : 1.
  4. Alternativtexte für Bilder
    Relevante Bilder sind mit ALT-Texten versehen, die den Inhalt treffend beschreiben. Dekorative Bilder haben entweder ein leeres ALT-Attribut oder sind per CSS als Hintergrund eingebunden.
  5. Skalierbarkeit
    Inhalte bleiben funktional und lesbar, wenn sie um 200% vergrößert oder auf eine Breite von 320 Pixeln reduziert werden.
  6. Formulare und Eingabehilfen
    Formularfelder sind mit aussagekräftigen Labels versehen und richtig verknüpft. Auf grafische Captchas wird verzichtet.
  7. Tastaturbedienbarkeit
    Alle Funktionen und Navigationselemente sind in vollem Umfang mit der Tastatur bedienbar. Der Tastaturfokus ist logisch und sichtbar.
  8. Lesbarkeit und Typografie
    Die Zeilenlänge beträgt maximal 80 Zeichen. Der Zeilenabstand beträgt mindestens 150% innerhalb von Absätzen.
  9. Sprachattribute
    Die Sprache der gesamten Seite ist korrekt im <html lang="">-Attribut definiert. Auch bei fremdsprachigen Zitaten wird die Sprache im lang-Attribut angegeben.
  10. Multimedia-Inhalte
    Für Videos und Audio-Inhalte sind Untertitel oder Transkripte verfügbar. Automatisch startende Inhalte (z.B. Videos oder Animationen) können im Vorfeld geblockt werden.

Achtung: Diese Liste bildet die Barrierefreiheits-Level A und AA ab, was in den meisten Fällen ausreichend ist. Wenn sie im Sozial- oder Gesundheitswesen tätig sind, oder sich Ihre Website direkt an Menschen mit körperlichen Einschränkungen richtet, sollten sie auch die strengere Vorgabe AAA beachten!

Eine barrierefreie Website ist immer die richtige Entscheidung!

Für 30% der Internetnutzer:innen ist eine barrierefreie Website hilfreich, für ganze 10% ist sie sogar erforderlich. Für alle Menschen, besonders für die Betreiber:innen der Website, ist sie besser. Denn mehr Barrierefreiheit bedeutet immer auch mehr Nutzer:innen durch bessere Zugänglichkeit und eine gestärkte SEO.

Wenn Sie Unterstützung beim Abbau von Web-Barrieren benötigen, erstelle ich Ihnen gerne kostenfrei eine Übersicht aller Barrieren auf Ihrer Website, und ein Angebot zur Behebung dieser.

Mehr:

Das Webdesign des Footers für die Unterseite 'Kreation' zeigt links eine Headline, Subheadline und CTA, sowie rechts ein Foto von einer Druckmaschine bei der Arbeit, ganz unten ist ein Copyright-Vermerk, sowie Verlinkungen zu Datenschutzerklärung und Impressum angehängt
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Schlegel + Schmidt

UI / UX Design Corporate Design Medical Marketing
Drei Broschüren auf einer grünen Tischplatte, auf dem Cover sind eine Frau, ein Kind und die Aufschrift 'Statusbericht 2016 zur Energiewende'
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Statusbericht Energiewende

Editorial Design Infografik Printlayout
Demonstration eines responsiven Webdesigns für die Mobilfunk Brand EDEKASmart in einem Mobiltelefon, einem Tablet und einem Laptop
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

EDEKA smart

Branding Packaging UI / UX Design Corporate Design Printlayout
Zwei Speisekarte des Café Momo, eine offen und eine zugeklappt, sie haben eine Holz-Rückseite und eine deutlich schmalere Holz Vorderseite, auf die das Signet graviert ist, darin liegen die drei Karten für Specials, Getränke und Speisen in verschiedenen Formaten, die Getränkekarte hat einen weißen Hintergrund, die anderen beiden einen schwarzen Hintergrund, das Design der aufgeklappten Getränkeseite ist sehr minimalistisch
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Momo

Corporate Design Co-Branding Geschäftsausstattung Print Design
In einem Laptop, einem Mobiltelefon und einem Tablet ist die Website von Backslash Seven zu sehen, Laptop und Tablet zeigen einen Showcase aus dem Bereich Veranstaltungen, auf dem Telefon sind die aktuellen Stellenanzeigen zu sehen
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Backslash Seven

Corporate Design UI / UX Design Fotoshooting Geschäftsausstattung
Brettspiel Design für Fast Floorward, mehrere sechseckige Spielbrett-Elemente sind zu einem Spielbrett zusammengesetzt, sie sind mit Festival typischen Ortsangaben wie 'Bar' oder 'Camp' versehen und enthalten abstrakte CGI, Icons und einen weißen Rahmen, oben links ist ein Stück rote Hintergrundfläche mit weißer Körnung zu sehen
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Fast Floorward

Gamedesign CGI Printdesign UI / UX Design Video Editing Layout
Digitales Healthcare Marketing für Takeda, hier gezeigt anhand des Headers auf der Unterseite für Ärzte und HCPs, darin enthalten sind ein Foto, eine Headline und Sprungmarker zu 'FAQs', 'Tipps' und 'Services', den drei Bereichen der Unterseite
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

GSAV Hämophilie

User Experience Design Webdesign Healthcare Marketing
Festivaltickets und Umschläge mit Informationen, die Vorderseite der Tickets ist mit einer kurvigen, weißen Grafik über dem Gesicht eines Vogels bedruckt, die Rückseite enthält Wortmarke, QR Code und Informationen, der Innenteil des Umschlages enthält das Datum und Informationen zur Veranstaltung, der Außenteil ist mit einem Muster und der Wortmarke versehen, das Farbschema besteht aus rosa, blau und türkis
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

entropie festival

Visual Identity Printdesign Social Media UI / UX Design Kampagnen
Design für Albumcover und CD der Band Lanie's Willow, auf dem Cover ist eine weiße Blume in einem Kreis mit blauem Aquarell-Hintergrund zu sehen, darunter Name der Band und Titel des Albums, die CD selbst trägt ein Mandala aus floralen Ornamenten in grün auf blau
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Albumcover Artworks

Cover Artworks Album Inlays Print Design
Vier Screens aus der App Entwicklung für OneZero, gezeigt in Mobiltelefonen auf grünem Grund, ganz links der Bereich mit Daten und Statistiken, rechts davon der Chat, dann der Login Bereich und ganz rechts die Einstellungsseite
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

OneZero

App Entwicklung UI / UX Design Visual Identity
Alle Artikel