Zwei Männer mit und ohne Behinderung unterhalten sich in einem Büro mit großen Fenstern. Im Hintergrund sitzt eine Frau mit langen blonden Haaren.

Barrierefreie Website

Alle erreichen

Haben Sie sich eigentlich schon einmal Gedanken um die Barrierefreiheit Ihrer Website gemacht? Barrierefreies Webdesign und die Zugänglichkeit Ihrer Inhalte unterstreichen Ihre Kompetenz in Kommunikation und Technik. Mit dem Fokus auf Usability und Accessibility machen Sie es allen Menschen möglich, Ihre Web-Angebote ohne Einschränkungen zu nutzen. Hier finden Sie Tipps und Informationen rund um Ihren barrierefreien Online-Auftritt:

Was bedeutet Barrierefreiheit im Web?

Eine Frau sitzt vor einem Computer. Ihre Hände liegen auf der Tastatur.

Das Internet ist im Grunde so gestaltet, dass es für alle Menschen zugänglich ist. Dabei spielt es keine Rolle, wo diese Menschen herkommen, welche Sprache sie sprechen, welche Technik sie verwenden oder welchen sozialen Hintergrund sie haben. Eine Website ist barrierefrei, wenn sich Einschränkungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen nicht negativ darauf auswirken, wie wir das Web nutzen.

Konkrete Barrieren sind zum Beispiel:

  • Menschen mit einer Sehbehinderung können Texte oder Formularfelder schlecht erkennen, wenn sie sich nur gering vom Hintergrund abheben.

  • Gehörlose und schwerhörige Menschen können Videos nicht nutzen, wenn sie keine Untertitel enthalten.

  • Blinde Menschen können Webseiten nicht richtig nutzen, wenn Bilder, Formulare und Buttons nicht textlich beschrieben sind.

5 Gründe für Ihre barrierefreie Website

  • Erreichen Sie mehr Kunden

    Wenn Sie Ihre Website barrierefrei gestalten, erreichen Sie eine breitere Zielgruppe und damit auch mehr potentielle Kunden. Barrierefreies Internet ist in einer Gesellschaft, die in rasantem Tempo immer älter und vielfältiger wird, die wichtigste Grundlage, um erfolgreich zu kommunizieren.

  • Machen Sie Ihre Kunden zufriedener

    Die Usability ist zentral für den Erfolg Ihrer Website. Denn erst eine gute Bedienbarkeit macht Ihre Inhalte zugänglich für alle und die Nutzer Ihres Web-Angebots zufriedener.

  • Erhöhen Sie Ihre Reichweite

    Suchmaschinen belohnen Barrierefreiheit im Web: Denn bei Google & Co. wird Ihr Online-Auftritt leichter gefunden, wenn dieser nutzerfreundlich und leicht zugänglich gestaltet ist.

  • Werden Sie zum Vorbild

    Gesetzliche Anforderungen an die Zugänglichkeit von Webseiten werden immer anspruchsvoller – investieren Sie in ein barrierefreies Angebot im Netz und zeigen Sie, wie erfolgreich Sie damit sind!

  • Treiben Sie digitale Teilhabe voran

    Mit Ihrem barrierefreien Online-Auftritt zeigen Sie, dass sich soziale Verantwortung und Wirtschaftlichkeit nicht widersprechen. Tragen Sie zu digitaler Teilhabe bei und erreichen Sie mit Ihren Inhalten Menschen mit und ohne Behinderung!

Stimmen aus der Praxis

Egal ob in der freien Wirtschaft, an öffentlichen Stellen oder in Agenturen: Barrierefreiheit spielt in Zukunft eine immer größere Rolle. Wir haben bei Entscheidungsträgern nachgefragt, die mit ihrer barrierefreien Website zu digitaler Teilhabe beitragen:

Ein Porträtfoto von Jörg Morsbach.

Barrierefreie Produkte und Dienstleistungen spielen für Wirtschaftsunternehmen künftig eine immer größere Rolle. Mit der Ratifizierung des European Accessibility Act geht es für Unternehmen mit der Barrierefreiheit nicht mehr nur um eine Nische, sondern zukünftig um einen generellen Marktzutritt, der ohne entsprechende Kennzeichnung in der EU gar nicht mehr möglich sein wird.

Jörg Morsbach, Geschäftsführer der Agentur anatom5

Seit es eine städtische Website gibt, haben wir uns bemüht, möglichst barrierearm zu sein. Denn: Die Stadtverwaltung ist für alle da. Jetzt gerade haben wir die völlig überarbeitete www.bonn.de ans Netz gegeben und diesen Aspekt weiter ausgebaut. Das sieht man auf den ersten Blick: Das Titel-Foto ist abgesoftet, um durch gute Kontraste die Lesbarkeit zu erhöhen. Erstmals gibt es auch Texte in Leichter Sprache, zunächst für die wichtigsten Services, in Zukunft werden es noch mehr. Barrierearmut ist kein Luxus, sondern eine Selbstverständlichkeit.

Monika Hörig, Pressesprecherin der Stadt Bonn

Porträtfoto von Monika Hörig.
Ein Porträtfoto von Brigitte Baisch.

Schwache Kontraste, Videos ohne Untertitel, zu kleine Schriften, auch im digitalen Bereich gilt es Hürden zu überwinden. Barrierefreies Webdesign war schon bei der Entwicklung von IGM@Daimler ein Thema. Als reine Text-Seite entwickelt und Hauptbereiche zusätzlich via ARIA-Label ausgezeichnet, können vor allem Browser für Blinde daraus automatisch ein Inhaltsverzeichnis generieren. Auch im Sinne von "Responsive Webdesign" passt sich die Seite an, vom kleinem Handy-Bildschirm bis zum großen Monitor. Barrierefreiheit, auch digital ist uns ein großes Anliegen.
 

Brigitte Baisch, Web-Auftritt Daimler@IG Metall

Barrierefreiheit im Netz nutzt allen

Viele Informationen und Dienstleistungen sind nur noch online zugänglich oder es erfordert viel Mühe, sie in anderer Form zu erhalten. Menschen mit Behinderung sind von der Teilhabe ausgeschlossen, wenn sie Informations- und Kommunikationsangebote nicht nutzen können. Hier erfahren Sie, wie relevant barrierefreie Websites für Ihre Nutzer ist:

Für 100% Ihrer Besucher ist sie hilfreich

Ein schwarzer Pfeil, der in mehreren Schritten einen Aufwärtstrend anzeigt.
  • Barrierefreiheit bedeutet hohe Benutzerfreundlichkeit.
  • Leichte und intuitive Bedienbarkeit hilft allen Kunden.
  • Mit hohen Kontrasten sind Ihre Texte immer gut lesbar – zum Beispiel auch auf dem Smartphone bei Sonnenlicht.
  • Einfache Texte sind leicht verständlich und Ihre Botschaften kommen an.

Für 30% ist sie notwendig

  • Barrierefreiheit hilft Menschen mit Sehschwäche.
  • Durch leichte Bedienbarkeit können Menschen mit motorischen Einschränkungen Ihre Website nutzen.
  • Einfache Texte sind für Nicht-Muttersprachler und Menschen mit geringer Lesekompetenz leicht verständlich.
  • Barrierefreiheit unterstützt Menschen mit Konzentrationsschwäche. Rund 750.000 Menschen in Deutschland sind davon betroffen.
Eine Grafik mit drei Kreisen, in denen Hände, eine Brille und ein Gehirn abgebildet sind.

Für 10% ist sie unerlässlich

Eine Grafik von einer Homepage, auf der die Symbole von fünf Personen abgebildet sind, eine der Personen ist nur mit gestrichelten Linien dargestellt und wird durch eine gestrichelte Linie mit einer Person außerhalb des Webfensters verbunden.
  • 7,5 Millionen Menschen in Deutschland haben eine anerkannte Schwerbehinderung.
  • Sie nutzen das Internet überdurchschnittlich intensiv und sind eine besonders relevante Gruppe von Online-Kunden.
  • Für ihren Zugang verwenden sie zum Beispiel reine Tastatursteuerung, Braille-Zeilen, Sprachausgabe oder Joysticks. Eine barrierefreie Website ist darauf abgestimmt.

Schnelltest für Ihre Website

Sie möchten herausfinden, wie barrierefrei Ihr Web-Auftritt derzeit ist? Das finden Sie ganz einfach mit unserem Schnelltest heraus!

Gute Lesbarkeit von Texten beruht unter anderem auf einem ausreichenden Kontrast zwischen Vorder- und Hintergrundfarbe. Für Texte in kleinen Schriftgrößen ist dies ganz besonders wichtig. Auch Farbfehlsichtigkeiten – wie die verbreitete Rot-Grün-Schwäche – sollten berücksichtigt werden. Hohe Kontraste helfen auch bei mobiler Nutzung, zum Beispiel bleiben Inhalte trotz direkter Sonneneinstrahlung im Freien erkennbar.

Schnelltest: Hier können Sie die Kontraste auf Ihrer Seite überprüfen.

Einige Nutzer haben Schwierigkeiten, kleine Links und Schaltflächen auszuwählen. Was mit einem Mauszeiger noch funktioniert, wird bei der Bedienung mit dem Finger auf einem Tablet oder mit dem Smartphone schnell zu einer Herausforderung.

Schnelltest: Sind alle Links und Schaltflächen für die mobile Nutzung optimiert?

Blinde Menschen sind darauf angewiesen, dass Bilder mit sogenannten Alternativtexten versehen sind. Eine Vorlese-Anwendung nutzt solche Bildbeschreibungen für eine Sprachausgabe des Inhalts. Auch Suchmaschinen werten diese Texte aus und beziehen sie in das Ranking ein.

Schnelltest: Lassen Sie sich hier die Struktur Ihrer Seite anzeigen.

Klicken Sie dafür auf der Ergebnisseite den Reiter "No Styles" an. Unter allen Bildern sollten nun die Alternativtexte (markiert durch "alt") zu sehen sein. Sind die Bildbeschreibungen überall vorhanden und sinnvoll formuliert?

Mit leicht verständlicher Sprache erreichen Sie jeden Nutzer. Besonders empfehlenswert sind: kurze Sätze, einfacher Satzbau und weitgehender Verzicht auf Fremdwörter.

Schnelltest: Erfüllen Ihre Texte diese Anforderungen?

Webseiten bestehen aus Strukturelementen, zum Beispiel aus einem Block für die Navigation und einem Block mit dem eigentlichen Seiteninhalt. Innerhalb dieser gibt es Überschriften, Fließtexte oder Listen. Barrierefreie Seiten besitzen semantische Auszeichnungen für solche Strukturen. Diese helfen Menschen mit Sehbehinderung, sich auf der Seite zu orientieren.

Schnelltest: Lassen Sie sich hier die Struktur Ihrer Seite anzeigen.

Klicken Sie dafür auf der Ergebnisseite den Reiter "No Styles" an. Nun können Sie die Markierungen der Überschriften gut erkennen (z.B. h1 = wichtigste Überschrift, h2, h3, etc.). Sind Ihre Überschriften sinnvoll ausgezeichnet?

Bitte beachten Sie, dass das Tool keine vollständige Qualitätskontrolle ersetzt und nicht gleichwertig mit einer gründlichen WCAG/BITV-Prüfung ist.

Formulare sind sehr wichtig: Nur über barrierefreie Formulare können alle Kunden mit Ihnen in Kontakt treten oder bei Ihnen online einkaufen.

Schnelltest: Klicken Sie bei Ihren Formularen auf die Beschriftung der Felder (zum Beispiel auf das Wort “Vorname”). Wenn der Mauszeiger in das Eingabefeld springt, besitzt das Feld das notwendige “Label”-Element und das Formular ist barrierefrei.

Hinweis: Dies sind nur ausgewählte, besonders wichtige Merkmale barrierefreier digitaler Angebote. Informieren Sie sich ausführlicher über das Umsetzen digitaler Barrierefreiheit.

Erfahren Sie mehr über Barrierefreiheit

Die EU-Richtlinie für barrierefreie Web-Angebote

Ein Ausschnitt aus einer Europa-Karte.

Seit September 2018 ist digitale Barrierefreiheit für öffentliche Stellen in Europa Pflicht. Was genau bedeutet das für Ihre Websites und Apps? Welchen Ansprüchen müssen Ihre Angebote in Zukunft gerecht werden?

Alles dazu in der aktuellen EU-Richtlinie

Mit BITV und WCAG für mehr Barrierefreiheit

Eine Person tippt an einem Laptop, neben dem Laptop liegt ein Smartphone.

Die Ansprüche an Web-Angebote werden mit den internationalen WCAG sowie der BITV immer anspruchsvoller. Prüfen Sie die aktuellen Anforderungen und passen Sie Ihren Web-Auftritt an!

Die WCAG in deutscher Sprache
Die WCAG in englischer Sprache
Die BITV 2.0

Mehr Teilhabe mit barrierefreien Videos

Ein Screenshot des barrierefreien Videoplayers, bei dem die Optionen Untertitel, Gebärdensprache und Audiodeskription weiß umkreist sind.

Sie möchten Videos so einbinden, dass alle etwas davon haben? Dann nutzen Sie den barrierefreien Videoplayer, mit dem Sie Untertitel, Audiodeskription und eine Übersetzung in Gebärdensprache einbinden können.

Mehr zum barrierefreien Videoplayer

Trendstudie zur digitalen Teilhabe

Ein Mann hält sich sein Smartphone ans Ohr.

Mehr Chancen als Risiken für die zukünftige Teilhabe von Menschen mit Behinderung: das ist das Ergebnis einer Studie, die die Aktion Mensch in Auftrag gegeben hat. Voraussetzung für die Teilhabe sind vor allem eine flächendeckend barrierefreie Infrastruktur sowie die kontinuierliche Einbeziehung von Menschen mit Behinderung.

Zur Studie digitale Teilhabe