Barrierefrei und zugänglich Websites, die **alle** **erreichen** und **einfach funktionieren** ![Webdesigner Adi Heutschi](https://www.adiheutschi.ch/images/layout/adiheutschi-webdesign-round-24-80.png) Adi Heutschi *Web-Projekte – seit 1997 – Konzeption, Umsetzung & Betreuung* [ Unverbindlich anfragen ](#kontakt) [ Unverbindlich anfragen ](#kontakt) ![Webdesigner Adi Heutschi](https://www.adiheutschi.ch/images/layout/adiheutschi-webdesign-round-24-80.png)### Adi Heutschi *Web-Projekte – seit 1997 – Konzeption, Umsetzung & Betreuung* [### Ausgezeichnet ![](https://www.adiheutschi.ch/images/layout/5stars-rating.png)Basierend auf **73** Bewertungen ![logo google fullcolor 284x93px](https://www.adiheutschi.ch/images/layout/logo-google-fullcolor-284x93px.svg) ](https://search.google.com/local/reviews?placeid=ChIJf7pX1InTkUcR3ei6AB-zcsI) > Barrierefreiheit ist auch in der Schweiz ein Thema. ![Symbole Barrierefreiheit](https://www.adiheutschi.ch/images/barrierefrei/barrierefreie-webseiten-wcag.svg) [### Google Bewertungen ![Google Bewertung](https://www.adiheutschi.ch/media/yootheme/cache/25/5stars-rating-25c8448b.png?src=images/layout/5stars-rating.png&thumbnail=200,39,&hash=2627d6d7) ](https://search.google.com/local/reviews?placeid=ChIJf7pX1InTkUcR3ei6AB-zcsI) ## Barrierefreie Webseiten für Unternehmen, Organisationen und öffentliche Einrichtungen Barrierefreie **Websites** stellen sicher, dass digitale Inhalte **für alle Menschen** zugänglich sind. Klare Strukturen, gute Lesbarkeit und eine einfache Bedienung bilden die Grundlage. Ich unterstütze Sie dabei, Ihre Website verständlich, technisch sauber und ohne Hürden umzusetzen. ![Illustration, Laptop mit klarer Website, Person mit Kopfhörer, Symbole für Sehen, Tastatur und Audio für barrierefreie Nutzung](https://www.adiheutschi.ch/images/barrierefrei/barrierefrei-und-zugaengliche-Webseiten.jpg) **Seit 2025** gelten in der **Schweiz** Vorgaben zur **Barrierefreiheit** gemäss [Behindertengleichstellungsgesetz](https://www.fedlex.admin.ch/eli/cc/2003/667/de) ### Öffentliche Einrichtungen **Öffentliche Einrichtungen** **müssen** ihre Websites **zugänglich gestalten**. Ziel ist ein gleichberechtigter Zugang zu digitalen Informationen und Dienstleistungen für Menschen mit Einschränkungen. Die Pflicht betrifft zuerst den öffentlichen Sektor. Das Thema gewinnt auch für Unternehmen und Agenturen an Bedeutung. ### Private Unternehmen Für **private Unternehmen** besteht **keine** generelle **Verpflichtung**. Barrierefreies Webdesign verbessert die Benutzerführung und zeigt Verantwortung gegenüber einer vielfältigen Gesellschaft. ### Was eine barrierearme Website ausmacht: - Inhalte sind klar strukturiert - Texte sind gut lesbar - Kontraste sind ausreichend - Navigation funktioniert auch ohne Maus - Bilder sind mit Alternativtexten ergänzt - Formulare sind verständlich aufgebaut Diese Punkte verbessern nicht nur die Zugänglichkeit. Sie verbessern auch die Benutzerführung und die Auffindbarkeit in Suchmaschinen. In der Praxis sind viele Websites unnötig kompliziert. Inhalte sind schwer auffindbar. Strukturen sind unklar. Das kostet Zeit und führt zu Absprüngen. ### Ich unterstütze Sie dabei, Ihre Website klar, verständlich und zugänglich umzusetzen. Was Sie konkret erhalten: - Analyse Ihrer bestehenden Website - Konkrete Empfehlungen zur Verbesserung - Saubere technische Umsetzung nach WCAG-Standards - Optimierte Struktur und Navigation - Inhalte, die einfach gepflegt werden können Das Ziel ist eine Website, die funktioniert. Ohne Umwege. Für alle. [Persönliche Beratung starten!](#kontakt) ## Welche Standards gelten für barrierefreie Webseiten? Für die Umsetzung wird definiert, welches **Niveau** erreicht werden soll. Die **WCAG** unterscheiden drei Stufen: **A, AA** und **AAA**. Mit jeder Stufe steigen die Anforderungen. Der Aufwand nimmt entsprechend zu. Level A Deckt die grundlegenden Anforderungen ab. Level AA Gilt in der Praxis als **internationaler empfohlener Standard**. Diese Stufe umfasst in der aktuellen Version rund 50 Erfolgskriterien und wird bei öffentlichen Websites meist erwartet. Level AAA Stellt die höchsten Anforderungen. Hier geht es stärker um Inhalte, zum Beispiel zusätzliche Angebote wie Leichte Sprache oder erweiterte Medienzugänglichkeit. Für die meisten Websites ist **WCAG Level AA** das sinnvolle **Ziel**. Es bietet eine gute Balance zwischen Aufwand und Nutzen und sorgt für eine klar zugängliche Website. ## Was beinhaltet WCAG Level AA? WCAG Level AA definiert konkrete Anforderungen, damit Websites gut nutzbar sind. Es baut auf Level A auf und ergänzt wichtige Kriterien für Lesbarkeit, Bedienung und Verständnis. **Die wichtigsten Punkte:** ![](https://www.adiheutschi.ch/images/barrierefrei/001.svg)## Navigation und Bedienung - vollständige Bedienung per Tastatur - sichtbarer Fokus bei Navigation - konsistente Navigation und Menüs - keine unerwarteten Sprünge oder Änderungen ![](https://www.adiheutschi.ch/images/barrierefrei/002.svg)## Kontrast und Lesbarkeit - ausreichender Farbkontrast zwischen Text und Hintergrund - Text bleibt lesbar bei Vergrösserung - keine rein visuellen Hinweise ohne Text ![](https://www.adiheutschi.ch/images/barrierefrei/003.svg)## Medien und Inhalte - Untertitel für Videos - keine Inhalte, die nur über Farbe verständlich sind ![](https://www.adiheutschi.ch/images/barrierefrei/004.svg)## Formulare und Interaktion - verständliche Beschriftungen - klare Fehlermeldungen - Hilfestellungen bei Eingaben ![](https://www.adiheutschi.ch/images/barrierefrei/005.svg)## Technik und Kompatibilität - sauberes HTML und semantische Struktur - funktioniert mit Screenreadern - kompatibel mit gängigen Browsern und Geräten ![](https://www.adiheutschi.ch/images/barrierefrei/006.svg)## Struktur und Inhalte - korrekte Überschriftenstruktur - sinnvolle Reihenfolge der Inhalte - Alternativtexte für Bilder - klare und verständliche Texte **Level AA ist der Standard für die Praxis.** Er sorgt für eine Website, die für die meisten Nutzer ohne Hürden funktioniert. ## Zugänglichkeit schafft Reichweite Für viele Firmen ist Barrierefreiheit noch kein Standard. Genau hier liegt Potenzial. Eine barrierearme Website sorgt dafür, dass Inhalte für alle zugänglich sind. Für Menschen mit Einschränkungen. Für ältere Nutzer. Für alle, die schnell ans Ziel kommen wollen. [ Analyse starten ](#kontakt) ![Chart mit steigender Reichweite](https://www.adiheutschi.ch/media/yootheme/cache/bd/pexels-photo-97080-bd96f7dc.jpeg?src=images/yootheme/pexels-photo-97080.jpeg&thumbnail=350,242,&hash=855294f3) ## Was ist der Unterschied zwischen Leichter Sprache und Einfacher Sprache? ### Leichte Sprache - feste Regeln - stark vereinfacht - kurze Sätze, oft nur eine Aussage - einfache Wörter, keine Fachbegriffe oft mit Bildern erklärt **Zielgruppe**: Menschen mit kognitiven Einschränkungen **Beispiel**: „Hier können Sie ein Formular ausfüllen.“ ### Einfache Sprache - keine festen Regeln - verständlich formuliert, aber normaler Text - kurze und klare Sätze - Fachbegriffe werden erklärt **Zielgruppe**: breite Bevölkerung **Beispiel:** „Füllen Sie das Formular aus. Bei Fragen helfen wir Ihnen.“ ## Weitere Beiträge zum Thema: Barrierefrei ![Barrierefreiheit betrifft jede Webseite](https://www.adiheutschi.ch/media/yootheme/cache/4c/barrierefrei-und-zugaengliche-Webseiten-4c9cc90c.jpg?src=images/barrierefrei/barrierefrei-und-zugaengliche-Webseiten.jpg&thumbnail=80,53,&hash=2457bb60) ### [Barrierefreiheit betrifft jede Webseite](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=774:barrierefreiheit-betrifft-jede-webseite&catid=27) [Mehr erfahren](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=774:barrierefreiheit-betrifft-jede-webseite&catid=27) ![Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps)](https://www.adiheutschi.ch/media/yootheme/cache/ab/barrierefreie-bilder-alt-texte-richtig-abeab24d.jpg?src=images/barrierefrei/barrierefreie-bilder-alt-texte-richtig.jpg&thumbnail=80,53,&hash=0605d654) ### [Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps)](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=773:barrierefreie-bilder-alt-texte-richtig-einsetzen-wcag-tipps&catid=27) [Mehr erfahren](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=773:barrierefreie-bilder-alt-texte-richtig-einsetzen-wcag-tipps&catid=27) ## Wichtige Links und Tools zum Thema Barrierefreie Webseiten ### Tools zur Prüfung der Barrierefreiheit Mit diesen Tools erhalten Sie einen schnellen Überblick über mögliche Schwachstellen Ihrer Website in Bezug auf Zugänglichkeit. - **WAVE (Accessibility Check)** Zeigt typische Probleme wie fehlende Alternativtexte oder fehlerhafte Überschriften direkt auf der Seite an. [wave.webaim.org](https://wave.webaim.org/) - **Google Lighthouse** Analysiert wichtige Grundlagen wie Kontraste, Schriftgrössen, Labels und Bedienbarkeit. [chrome.google.com](https://chrome.google.com/) - **Screenreader testen** Prüfen Sie, wie Ihre Website vorgelesen wird und ob Inhalte logisch aufgebaut sind. TalkBack (Android): [support.google.com](https://support.google.com/accessibility/) VoiceOver (iOS): [support.apple.com](https://support.apple.com/de-de/HT211899) - **Kontrast prüfen** Überprüft, ob Text und Hintergrund ausreichend unterscheidbar sind. [contrastchecker.com](https://contrastchecker.com/)[](https://iaap-dach.org/nachrichten.html) ### Weiterführende Informationen - **WCAG Richtlinien (Deutsch)** Überblick über die Anforderungen für barrierefreie Webinhalte. [aktion-mensch.de](https://www.aktion-mensch.de/inklusion/barrierefreiheit/web-content-accessibility-guidelines) - **Informationsportal zur Barrierefreiheit** Hinweise zu Anforderungen und Umsetzung im digitalen Bereich. [barrierefreiheit-dienstekonsolidierung.bund.de](https://www.barrierefreiheit-dienstekonsolidierung.bund.de/) - **IAAP D-A-CH** Fachverband mit aktuellen Beiträgen rund um Barrierefreiheit. [iaap-dach.org](https://iaap-dach.org/nachrichten.html) ### [Certified Administrator](https://certification.joomla.org/certified-user-directory/2020-09-14-05-10-40) [ ![Joomla Certified Administrator](https://www.adiheutschi.ch/media/yootheme/cache/7f/Certified_administrator_badge-7f7049ed.png?src=images/footer_logos/1/Certified_administrator_badge.png&thumbnail=177,50,&hash=f62aff90) ](https://certification.joomla.org/certified-user-directory/2020-09-14-05-10-40) ### joomlaverband ![Joomla Verband Schweiz Platin Mitglied](https://www.adiheutschi.ch/images/layout/logo/joomlaVerband_Mitglied-ah2.svg) ### [Designpreis JOtto](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=635&catid=27) [ ![Sieger J!Otto Award](https://www.adiheutschi.ch/media/yootheme/cache/a1/JOtto-Logo-bg-a1f15b92.png?src=images/footer_logos/1/JOtto-Logo-bg.png&thumbnail=98,50,&hash=af17baaa) ](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=635&catid=27) ### [Zertifizerter Experte](http://www.yootheme.com) [ ![Empfohlener Yootheme Expert](https://www.adiheutschi.ch/images/footer_logos/1/yootheme-logo.svg) ](http://www.yootheme.com) --- ## Webseiten-Check Kostenlose Ersteinschätzung Ihrer Website Ich werfe einen kurzen Blick auf Ihre Website und gebe Ihnen eine erste Einschätzung. ### Sie erfahren: - ob Handlungsbedarf besteht - wo erste Schwachstellen liegen Unverbindlich und kostenlos. Wenn Sie eine erste Einschätzung möchten, starten Sie kostenlos. Wenn Sie konkrete Empfehlungen brauchen, lohnt sich der detaillierte Website-Check. --- Detaillierter Website-Check ab CHF 120.- (exkl. 8.1% Mwst.) Wenn Sie es genauer wissen möchten: Ich analysiere Ihre Website und zeige Ihnen konkrete Schwachstellen und Verbesserungsmöglichkeiten. ### Sie erhalten: - klare Einschätzung Ihrer Website - konkrete Schwachstellen - direkt umsetzbare Empfehlungen Sie erhalten eine ehrliche Einschätzung, ob sich Optimierungen für Ihre Website lohnen. ### So läuft es ab: - Analyse Ihrer Website im Hintergrund - Ergebnis als kompakte Zusammenfassung per E-Mail - auf Wunsch kurze Besprechung per Telefon oder Video Webseiten-Check Bestellen *Anrede Ich möchte \* Kostenlose Ersteinschätzung Ihrer Website Detaillierter Website-Check zum Preis von CHF 120.– (exkl. 8.1 % MwSt). ## Häufige Fragen Barrierefreiheit FAQ [### Was bedeutet barrierefrei und zugänglich? ](#)Eine barrierefreie Website lässt sich von allen Menschen nutzen. Auch bei Einschränkungen. Inhalte sind klar strukturiert, gut lesbar und einfach bedienbar. [### Ist Barrierefreiheit in der Schweiz Pflicht? ](#)**Öffentliche Einrichtungen** wie Gemeinden oder Schulen **müssen** ihre Websites **zugänglich gestalten**. Grundlage ist das [Behindertengleichstellungsgesetz](https://www.fedlex.admin.ch/eli/cc/2003/667/de) Für **private Unternehmen** besteht **keine** generelle Pflicht. Barrierefreies Webdesign verbessert die Benutzerführung und zeigt Verantwortung gegenüber einer vielfältigen Gesellschaft. [### Für wen lohnt sich Barrierefreiheit? ](#)Für alle. Sie erreichen mehr Nutzer. Inhalte werden schneller verstanden. Die Nutzung wird einfacher. [### Welche Standards sind relevant? ](#)Massgebend sind die WCAG-Richtlinien des World Wide Web Consortium In der Praxis wird meist Level AA umgesetzt. [www.w3.org](https://www.w3.org/) [### Unterschied zwischen "leichte Sprache" und "einfache Sprache" ](#)### **Leichte Sprache** - feste Regeln - stark vereinfacht - kurze Sätze, oft nur eine Aussage - einfache Wörter, keine Fachbegriffe oft mit Bildern erklärt **Zielgruppe**: Menschen mit kognitiven Einschränkungen **Beispiel**: „Hier können Sie ein Formular ausfüllen.“ --- ### **Einfache Sprache** - keine festen Regeln - verständlich formuliert, aber normaler Text - kurze und klare Sätze - Fachbegriffe werden erklärt **Zielgruppe**: breite Bevölkerung **Beispiel:** „Füllen Sie das Formular aus. Bei Fragen helfen wir Ihnen.“ [### Was ist ein Alt-Text bei Bildern? ](#)Ein Alt-Text ist eine kurze Beschreibung eines Bildes. Er wird im HTML hinterlegt und von Screenreadern vorgelesen. So können auch Menschen mit Sehbehinderungen verstehen, was auf einem Bild zu sehen ist. **Wichtig ist:** Der Alt-Text beschreibt den Inhalt und den Zweck des Bildes im jeweiligen Kontext. Er ersetzt keinen Titel und keine Bildunterschrift. Ein fehlender oder falscher Alt-Text führt dazu, dass wichtige Informationen verloren gehen. **Im Beitrag:** - „**[Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps)](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=773&catid=27&Itemid=36)**“ finden Sie konkrete Beispiele und praktische Anleitungen für die Umsetzung. [### Verbessert Barrierefreiheit die Suchmaschinenoptimierung? ](#)Ja. Klare Struktur, sauberes HTML und verständliche Inhalte helfen Suchmaschinen beim Verstehen der Seite. [### Muss meine bestehende Website komplett neu gemacht werden? ](#)Nicht zwingend. Oft reicht eine gezielte Optimierung. In manchen Fällen ist ein Relaunch sinnvoll. [### Wie kann ich prüfen, ob meine Website barrierefrei ist? ](#)Automatische Tools geben erste Hinweise. Eine fundierte Prüfung erfolgt manuell. [### Was sind typische Probleme auf Websites? ](#)Schlechte Kontraste, fehlende Alt-Texte, unklare Navigation, unzugängliche Formulare oder Inhalte nur als PDF. [### Wie gehe ich das Thema an? ](#)Starten Sie mit einer Analyse. Danach werden die wichtigsten Punkte priorisiert und umgesetzt. Schritt für Schritt. [### Was bringt mir das konkret? ](#)Weniger Absprünge. Mehr Anfragen. Zufriedenere Nutzer. Eine Website, die funktioniert. [### Unterstützen Sie auch bei Texten und Bildern? ](#)**Ja.** Bei Bedarf unterstütze ich Sie gerne bei der Erstellung und Überarbeitung Ihrer **Texte**. Wenn es besonders professionell sein soll, kann ich auf Partner zurückgreifen, die auf Lektorate und redaktionelle Arbeiten spezialisiert sind. So entstehen präzise, gut lesbare und suchmaschinenfreundliche Inhalte. Für **Bilder** nutze ich in der Regel hochwertige Aufnahmen aus professionellen Bildportalen, die zum Stil und Inhalt Ihrer Website passen. Auf Wunsch können auch KI-generierte Bilder eingesetzt werden, um gezielte Motive oder Stimmungen zu schaffen. In meinem Netzwerk arbeite ich zudem mit erfahrenen Fotografen zusammen, die bei grösseren Projekten oder speziellen Anforderungen zum Einsatz kommen können. So entsteht ein stimmiges und authentisches Gesamtbild Ihrer Website. [### Können zusätzliche Funktionen später ergänzt werden? ](#)**Ja.** Das verwendete CMS-System ist flexibel aufgebaut und kann jederzeit erweitert werden. Neue Inhalte, zusätzliche Sprachen oder eigene Funktionen lassen sich ohne grossen Aufwand integrieren. Möglich sind zum Beispiel Newsbereiche, Eventkalender, Newsletter, Bildergalerien, Download-Bereiche, Formulare, Kunden- oder Mitgliederbereiche sowie Schnittstellen zu externen Diensten. Auch eigene Webapplikationen können dank der offenen Open-Source-Struktur integriert oder individuell entwickelt werden. Mehrsprachige Webseiten und spätere Designanpassungen sind ebenfalls problemlos umsetzbar. Die datenbankgestützte Struktur sorgt dafür, dass alle Inhalte bestehen bleiben, selbst wenn das Layout erneuert wird. So kann Ihre Website mit Ihrem Unternehmen mitwachsen. [### Was ist der Unterschied zwischen WCAG 2.1 und WCAG 2.2? ](#)WCAG 2.2 erweitert die bestehenden Anforderungen aus 2.1. Der **Fokus** liegt stärker auf **Bedienbarkeit** und **praktischer Nutzung.** ### Fokus sichtbar - klar erkennbarer Fokus bei Tastatur-Navigation - stärker als in 2.1 definiert ### Klickflächen - Mindestgrösse für Buttons und Links - verhindert Fehlklicks ### Drag & Drop Alternativen - Funktionen dürfen nicht nur per Drag & Drop funktionieren - Alternative Bedienung muss vorhanden sein ### Hilfe bei Formularen - wiederkehrende Eingaben einfacher nutzbar - z.B. Autofill oder gespeicherte Daten ### Konsistente Hilfe - Hilfe-Funktionen immer gleich platziert - besser auffindbar ### Authentifizierung - Login ohne unnötige Hürden - keine komplexen kognitiven Aufgaben erzwingen **Was sich nicht ändert** - Struktur, Semantik, Alt-Texte - Kontraste - Tastaturbedienung - Grundprinzipien **Kurz:** - WCAG 2.1 → solide Basis - WCAG 2.2 → bessere Usability