Was ist barrierefreies Webdesign?

Du willst, dass deine Website für alle Nutzer*innen wertvoll ist. Stimmt doch, oder? Dann reicht es nicht, mit ein paar Headlines und fetter Schrift für mehr Struktur und Lesbarkeit zu sorgen. Das ist gut, aber nicht genug.

Barrierefreies Webdesign

Anforderungen und Aha-Momente (+ Checkliste!)

Wir zeigen dir, wie du deine Website barrierefrei gestaltest, warum «barrierearm» der bessere Ausdruck ist und wie du mit unserer praktischen Checkliste barrierefreies Webdesign easy umsetzen kannst – damit sie für alle Besucher*innen nutzbar ist.

Barrierefreiheit: Was heisst das grundsätzlich?

Menschen mit körperlichen oder geistigen Einschränkungen wollen ihr Leben ohne fremde Hilfe leben – können das aber noch viel zu oft nicht, weil Barrieren im Weg sind. Barrierefreiheit zielt darauf ab, die Umwelt so zu gestalten, dass diese Menschen ohne Hindernisse mit der Umgebung interagieren können.

Hast du sicher schon mal gehört. Inklusion, Teilhabe, faire Bedingungen für alle sind das Ziel, aber längst noch nicht erreicht. Gebäude und Gebrauchsgegenstände, Dienstleistungen und Design, Verkehrsmittel und vor allem auch das Internet: Überall wird der Zugang erschwert oder sogar unmöglich gemacht. Die angestrebte Inklusion, sie funktioniert nur mit Barrierefreiheit.

Das bedeutet, dass neben den Treppenstufen auch eine Rampe oder ein Aufzug ins Gebäude führt, dass Formulare auch in leichter Sprache verfügbar sind, Vorträge auch in Gebärdensprache übersetzt werden und Internetseiten so gestaltet sind, dass sie jede*r nutzen kann. Was vor allem Letzteres genau heisst? Sagen wir dir.

Wie geht Barrierefreiheit auf meiner Website?

Auch im Netz gibt es jede Menge Barrieren bei der Wahrnehmung, der Bedienung und dem Verständnis von Websites und deren Inhalten. Blinde Menschen zum Beispiel können rein textlich oder bildhaft dargestellte Inhalte nicht lesen und ohne Tonspur deine Website nicht nutzen. Sehbehinderte Menschen brauchen höhere Kontraste in den Farben, damit die Inhalte erkennbar sind. Was noch? Wir haben dir die wichtigsten Punkte zusammengestellt.

Barrierefreies Webdesign: Richtlinien zur Orientierung

Du selbst kannst und solltest in drei Bereichen deiner Website aktiv werden (bzw. dir Profis zur Seite holen, die dich dabei unterstützen – Violetta zum Beispiel).

  • Im Bereich Design: hast du jede Menge Möglichkeiten, um den Zugang zu deinem Webauftritt zu erleichtern. Beispielsweise die Farbauswahl – mit hohen Kontrasten und einstellbarer Schriftgrösse, um die Inhalte lesbar zu gestalten. Dazu findest du in der Checkliste unten noch mehr.
  • Im Bereich Inhalte: gibst du Menschen mit kognitiven Einschränkungen die Chance, deine Texte und Grafiken zu verstehen. Achte dabei auf Alternativtexte, Transkripte und leicht verständliche Sprache.
  • Im Bereich Technik: geht es vor allem um technische Hilfsmittel. Wenn wir barrierefreies Webdesign als Internetagentur professionell umsetzen wollen, führt an der Technik deiner Website kein Weg vorbei. Wir sorgen dafür, dass deine Inhalte inklusive aller Dokumente und Formulare mit technischen Hilfsmitteln wie Screen Readern erfasst und wiedergegeben werden können. Dazu nutzen wir als TYPO3 Agentur ein starkes CMS, das uns viele Features bietet, um deine Website barrierearm umzusetzen.

Als barrierefrei gilt deine Website übrigens nur dann, wenn sie alle drei Bereiche abdeckt, nicht nur einen davon. Apropos Richtlinien: Die Barrierefreiheit deiner Website gehört nicht in die Kategorie «Mach ich mal, wenn’s passt». Es gibt eine ganze Reihe an Gesetzen und Verordnungen, die hier zusammenkommen und die auch dein Unternehmen betreffen.

Person nutzt Braille-Zeile

EAA und BehiG: Zurücklehnen ist nicht

Der Europäische Rechtsakt zur Barrierefreiheit (European Accessibility Act, EAA) nennt zum Beispiel konkrete Vorgaben zur barrierefreien Gestaltung vor allem von digitalen Produkten und Dienstleistungen für Privatunternehmen. Ab 2025 müssen die EU-Mitgliedstaaten die Grundlagen des EAA anwenden, um die gleichberechtigte Teilhabe von Menschen mit Behinderungen – auch im digitalen Raum – zu gewährleisten. 

Und ja, auch wenn da Europa steht, kann dich das betreffen. Denn selbst wenn dein Unternehmenssitz in der Schweiz ist – bist du in Europa aktiv bist bzw. hast du Kund*innen in EU-Ländern, solltest du dich dringend um deine barrierefreie Website kümmern. Im Klartext: Auf im EU-Raum tätige Unternehmen kommen einklagbare Verpflichtungen zu. 

In der Schweiz regelt zudem das Eidgenössische Behindertengleichstellungsgesetz (BehiG) seit Inkrafttreten 2004 die Gleichstellung von Menschen mit Behinderung in der Schweiz. Darin werden übrigens bereits altersbedingte Einschränkungen genannt. 

Eine gute Orientierung für barrierefreies Webdesign geben die Web Content Accessibility Guidelines (WCAG) des World Wide Web Consortium (W3C). Die Guidelines helfen, die vier Prinzipien der EU für accessible Web Design, also barrierefreies Webdesign, umzusetzen.

Wer ganz sicher gehen will, kann die eigene Website auch testen und zertifizieren  lassen. «Zugang für alle», das Kompetenzzentrum in der Schweiz und im angrenzenden Ausland, setzt sich ein für barrierefreie Technologieerschliessung und -nutzung. Neben der fachlichen Beratung bietet das Zentrum ausserdem als unabhängige Zertifizierungsstelle für digitale Barrierefreiheit auch umfangreiches Accessibility Testing nach den WCAG sowie die Zertifizierung barrierefreier Websites und mobiler Apps. Dazu werden Kurse angeboten, wie sich Barrieren im Internet umgehen bzw. reduzieren lassen – interessant für alle, die ihren Content selbst verfassen und einpflegen.

Und was heisst barrierefreies Webdesign für dich?

Dass du aktiv werden musst – da führt kein Weg dran vorbei. Hol dir die Profis zur Seite: Violetta Digital Craft unterstützt dich dabei, die Anforderungen für barrierefreies Webdesign so umzusetzen, dass deine Website fit ist für den EAA, 2025 und darüber hinaus.

 Jetzt über barrierefreies Webdesign reden

Checkliste: Barrierefreie Website in 4 Schritten

Wenn du dir die Kriterien und Voraussetzungen anschaust, wird schnell klar: Komplette Barrierefreiheit ist schwer zu erreichen. Deshalb sprechen wir auch gern davon, deine Website barrierearm zu gestalten. So oder so: Jeder Schritt wirkt, und schon kleine Massnahmen helfen. Betrachte barrierefreies Webdesign als virtuelle Rampe in dein Unternehmen; mach den Zugang für alle Menschen möglich. Mit diesen 4 Schritten kannst du viel erreichen.

 Macht meine Website barrierefrei

Schritt 1: Design

  • Kontrast: hoch, aber nicht zu hoch (Achtung Flimmern!) zwischen Vorder- und Hintergrundfarbe
  • Farbwahl: Farbfehlsichtigkeiten wie Rot-Grün-Sehschwäche oder oder reine Grau-Wahrnehmung berücksichtigen
  • Struktur: logisch, einfach erkennbar und nachvollziehbar aufbauen 
  • Vergrösserung: auf fehlerfreie Darstellung auch bei 200 % Zoom achten
  • Links: klar erkennbar und mit aussagekräftigen Titeln versehen
  • Trennung: klar zwischen HTML (für Struktur und Inhalt) und CSS (für Form und Farben) unterscheiden

Schritt 2: Navigation

  • Klicken: Links, Schaltflächen, Buttons mit Device und Finger gut klickbar gestalten
  • Navigieren: darauf achten, dass Menüs mit und ohne Maus funktionieren
  • Ausfüllen: Formulare, Umfragen etc. per Tastatur bedienbar zur Verfügung stellen

Schritt 3: Texte

  • Sprache: leicht verständlich formulieren
  • Headlines: hierarchisch gliedern
  • Struktur: Informationen logisch und klar darstellen
  • Tabellen: fehlerfrei auch mobil darstellen, für Screen Reader nutzbar machen
  • Alternativtexte: Bilder sinnvoll, so umfassend wie nötig und so einfach wie möglich beschreiben

Schritt 4: Medien

  • Videos: mit Untertiteln bereitstellen, einfach abspielbar anbieten
  • Audios: mit Transkript bereitstellen
  • Bilder: mit Alternativtexten ausstatten, in ausreichender Auflösung bereitstellen
  • Dokumente: PDF-, Text- und Präsentationsdateien barrierefrei anbieten
  • bei allen Medien: Farbfehlsichtigkeiten berücksichtigen 

Wer kümmert sich um dein barrierefreies Webdesign? Internetagentur, Behindertenbeauftragte*r, du selbst? Lass dir helfen: Wir sind Profis und bringen dich auf den Weg Richtung Barrierefreiheit. Wir setzen die Voraussetzungen in Technik und Design und zeigen dir, worauf es jetzt und in Zukunft ankommt. Und wir checken deine Website regelmässig auf Barrierefreiheit, passen ggf. an neue Technologien an und aktualisieren, sobald es neue Regelungen gibt.

Warum ist Barrierefreiheit überhaupt so wichtig?

Weil sie allen hilft. Mit barrierefreiem Webdesign kannst du sicherstellen, dass Menschen mit verschiedenen Fähigkeiten und Bedürfnissen gleichberechtigt am digitalen Leben – und damit an deinem Angebot – teilhaben können. Barrierefreiheit nutzt direkt Betroffenen, Kindern, alten Menschen oder denen, die nur zeitweise in ihrer Mobilität eingeschränkt sind. Denen, die beim Lernen und Lesen Schwierigkeiten haben. Allen, die sich mehr Sichtbarkeit wünschen. Und damit auch dir ganz direkt.

Dein Vorteil: Barrierefreies Webdesign vereinfacht nicht nur den Zugang zu deinem Unternehmen im Netz, sondern erhöht auch deine Reichweite. Und wenn du soziale Verantwortung übernimmst, stärkst du nebenbei deine Reputation. Denn wer sich aktiv kümmert, wird gesehen und gern weiterempfohlen.

Indem du deine Website barrierefrei gestaltest, trägst du deinen Teil dazu bei, eine inklusive Gesellschaft zu fördern.

Unser Violetta-Tipp zum Schluss

Wir wären nicht Violetta, hätten wir nicht noch einen extra Tipp zum Schluss: Du kannst analoge Barrierefreiheit und barrierefreie Website clever kombinieren und zum Beispiel auf deiner Webpräsenz darauf hinweisen, wie barrierearm dein Büro bzw. deine Räumlichkeiten sind. Wo sind Treppen, gibt es Aufzug oder eine Rampe? (Übrigens, Rampen lassen sich sogar aus Klemmbausteinen bauen – wenn du willst, ist vieles möglich!)