Nicht jede Website und jedes Unternehmen hat einen hohen Anspruch an saubere barrierefreie Weblösungen. Wir legen im Sinne aller User sehr viel Wert auf Barrierefreiheit. Es gibt viele Checker und Systeme die diese Standards überprüfen. Ein guter und großer Service von Siteimprove wird hier vorgestellt.
Aufschlüsselung der Punktzahl: Ihre Zugänglichkeitsbewertung ist ein Maß dafür, wie gut Ihre Website bei den automatischen Siteimprove-Zugänglichkeitsprüfungen abschneidet. Unsere Prüfungen basieren auf den WCAG-Erfolgskriterien, die in die Konformitätsstufen A, AA oder AAA eingeteilt sind. Unten sehen Sie, wie gut Sie in jeder Kategorie abgeschnitten haben.
✅ Empfehlenswerte Plugins / Widgets
- accessiBe: Eine offizielle App im Webflow-App-Verzeichnis – sie verspricht “Web Accessibility made simple”, mit täglicher AI-Analyse und automatischen Anpassungen, basierend auf WCAG 2.1 Level AA. webflow.com+1
- Accessibility Enabler: Widget mit über 30 Tools (Kontrast-Modi, Bildschirmleserhilfen, Textanpassung etc.), welches sich laut Anbieter einfach in Webflow integrieren lässt. webflow.com
- Elfsight Accessibility Widget: Ein relativ leichtgewichtiger Ansatz, der sich einfach via Code-Snippet einbinden lässt, mit Fokus auf Barrierefreiheitsmodi und Widget-Anzeige. Elfsight+1
- All in One Accessibility: Ein Widget, das international viele Standards – u. a. EAA (Europe) und EN 301 549 – abdeckt. webflow.com
- Accesstive: Plattform mit Widget, Monitoring und AI-Audit speziell für Webflow, mit Hinweis auf einfache Integration über Script-Einfügung. accesstive.com
🛠 Hinweise zur Nutzung und Umsetzung
- Installation: Die meisten Widgets verlangen nur das Einfügen eines JavaScript-Codes im Bereich „Footer Code“ Ihres Webflow-Projekts (Projekteinstellungen → Custom Code) und anschliessendes Veröffentlichen. Beispiel: „Paste the code in the Footer Code section before closing
</body> tag“. accesstive.com+1 - Design-Integration: Achten Sie darauf, dass das Widget visuell zu Ihrer Markenidentität passt (z. B. Farben, Stil) – insbesondere wenn Ihre Zielgruppe global ist bzw. hohe Markenanforderungen bestehen.
- Weitere Maßnahmen nötig: Wichtig: Ein Widget allein macht Ihre Website nicht vollständig konform mit allen Anforderungen (z. B. WCAG 2.1 AA, EAA, EN 301 549). Sie müssen zusätzlich Gestaltung, semantische Struktur, Tastaturnutzung, Focus-Styles usw. verbessern. Reddit+1
- Monitoring & Nachpflege: Wählen Sie ein System, das regelmässige Audits, Berichtserstellung oder Monitoring bietet – Barrierefreiheit ist ein laufender Prozess, keine einmalige Aktion.
- Rechtliches & Dokumentation: Wenn Ihre Website für Europa relevant ist, sollten Sie eine Barrierefreiheitserklärung implementieren, dokumentieren, wo ggf. Ausnahmen bestehen und Rückmeldemechanismen für Nutzende bieten.
🎯 Empfehlung für Ihren Firmenkontext
Für Ihre Firma ist folgendes Vorgehen empfohlen:
- Grund-Audit: Führen Sie zunächst ein internes Audit durch (z. B. Webflow Audit Panel: „Accessible elements in Webflow“). help.webflow.com+1
- Widget-Integration: Wählen Sie z. B. accessiBe oder All in One Accessibility und integrieren Sie das Widget in Ihre Webflow-Site.
- Technische Optimierung: Überarbeiten Sie Bereiche wie Bild-Alt-Texte, Heading-Struktur, Tastaturbedienbarkeit, Fokuszustände, Farbkontraste.
- Dokumentation: Erstellen Sie eine Barrierefreiheitserklärung auf der Website (z. B. „Unsere Website erfüllt …“), mit Rückmeldemöglichkeit für Nutzer.
- Monitoring & Reporting: Legen Sie fest, wie regelmässig Sie Zugriff auf Berichtswerte haben (z. B. monatlich/vierteljährlich) und Verantwortlichkeiten für Nachbesserung definieren.
- Skalierung: Achten Sie darauf, dass neue Seiten/Sprachen automatisch im Widget mit erfasst werden bzw. nachbarrierefrei gestaltet werden, damit Ihre globale Website konsistent bleibt.
1. Grundprinzipien der Barrierefreiheit
- Inhalte sollen für alle Menschen zugänglich sein, unabhängig von Alter, Beeinträchtigung oder Endgerät.
- Die Gemeindewebsite orientiert sich an den WCAG 2.1-Richtlinien (Level AA).
- Verständlichkeit, Struktur und Zugänglichkeit stehen im Mittelpunkt.
2. Textgestaltung
- Klare Sprache: kurze Sätze, aktive Formulierungen, einfache Begriffe.
- Absätze: nicht zu lang, thematisch klar gegliedert.
- Überschriftenhierarchie: H1 für Seitentitel, H2 für Hauptabschnitte, H3 für Unterpunkte.
- Listen: Aufzählungen für klare Struktur verwenden.
- Kontraste: Textfarbe und Hintergrund müssen hohen Kontrast bieten (z. B. dunkler Text auf hellem Hintergrund).
3. Bilder und Grafiken
- Alternativtexte (Alt-Texte): Beschreiben den Inhalt des Bildes präzise.
- Beispiel: „Blick auf den Marktplatz Andelsbuch bei Sonnenschein“.
- Keine Texte nur in Bildern: Wichtige Informationen müssen als Text verfügbar sein.
- Infografiken: Zusammenfassende Beschreibung unterhalb der Grafik ergänzen.
4. Videos und Multimedia
- Untertitel: Alle Videos mit Untertiteln versehen.
- Transkripte: Für längere Inhalte ein Text-Transkript bereitstellen.
- Audiodeskription: Optional, für wichtige visuelle Informationen.
5. Links und Navigation
- Beschreibende Linktexte: „Hier klicken“ vermeiden, stattdessen z. B. „Bürgermeisterbrief herunterladen“.
- Tabulator-Navigation: Inhalte müssen über Tastatur erreichbar sein.
- Sprungmarken: Für schnelle Navigation zwischen Hauptbereichen.
6. Tabellen
- Einfache Tabellen: Klare Überschriften in der ersten Zeile.
- Zusammenfassungen: Kurze Beschreibung über Zweck und Inhalt der Tabelle.
7. Formulare
- Beschriftungen (Labels): Jede Eingabe muss beschriftet sein.
- Fehlermeldungen: Klar formuliert, wo der Fehler liegt und wie man ihn behebt.
- Tab-Reihenfolge: Logisch und nachvollziehbar.
8. Prüfen vor Veröffentlichung
- Automatische Tools: WAVE, Accessibility Insights oder Siteimprove zur Kontrolle nutzen.
- Manuelle Prüfung: Seiten mit Screenreader und Tastatur testen.
- Lesbarkeit: Inhalte sollten von Personen mit unterschiedlichem Sprach- und Bildungsniveau verstanden werden.
9. Verantwortlichkeiten
- Jeder Redakteurin prüft die eigenen Inhalte auf Barrierefreiheit.
- Eine Koordinatorin für digitale Barrierefreiheit überwacht Einhaltung der Richtlinien.
Weitere Infos:
✅ Empfehlenswerte Plugins / Widgets
- accessiBe: Eine offizielle App im Webflow-App-Verzeichnis – sie verspricht “Web Accessibility made simple”, mit täglicher AI-Analyse und automatischen Anpassungen, basierend auf WCAG 2.1 Level AA. webflow.com+1
- Accessibility Enabler: Widget mit über 30 Tools (Kontrast-Modi, Bildschirmleserhilfen, Textanpassung etc.), welches sich laut Anbieter einfach in Webflow integrieren lässt. webflow.com
- Elfsight Accessibility Widget: Ein relativ leichtgewichtiger Ansatz, der sich einfach via Code-Snippet einbinden lässt, mit Fokus auf Barrierefreiheitsmodi und Widget-Anzeige. Elfsight+1
- All in One Accessibility: Ein Widget, das international viele Standards – u. a. EAA (Europe) und EN 301 549 – abdeckt. webflow.com
- Accesstive: Plattform mit Widget, Monitoring und AI-Audit speziell für Webflow, mit Hinweis auf einfache Integration über Script-Einfügung. accesstive.com
🛠 Hinweise zur Nutzung und Umsetzung
- Installation: Die meisten Widgets verlangen nur das Einfügen eines JavaScript-Codes im Bereich „Footer Code“ Ihres Webflow-Projekts (Projekteinstellungen → Custom Code) und anschliessendes Veröffentlichen. Beispiel: „Paste the code in the Footer Code section before closing
</body> tag“. accesstive.com+1 - Design-Integration: Achten Sie darauf, dass das Widget visuell zu Ihrer Markenidentität passt (z. B. Farben, Stil) – insbesondere wenn Ihre Zielgruppe global ist bzw. hohe Markenanforderungen bestehen.
- Weitere Maßnahmen nötig: Wichtig: Ein Widget allein macht Ihre Website nicht vollständig konform mit allen Anforderungen (z. B. WCAG 2.1 AA, EAA, EN 301 549). Sie müssen zusätzlich Gestaltung, semantische Struktur, Tastaturnutzung, Focus-Styles usw. verbessern. Reddit+1
- Monitoring & Nachpflege: Wählen Sie ein System, das regelmässige Audits, Berichtserstellung oder Monitoring bietet – Barrierefreiheit ist ein laufender Prozess, keine einmalige Aktion.
- Rechtliches & Dokumentation: Wenn Ihre Website für Europa relevant ist, sollten Sie eine Barrierefreiheitserklärung implementieren, dokumentieren, wo ggf. Ausnahmen bestehen und Rückmeldemechanismen für Nutzende bieten.
🎯 Empfehlung für Ihren Firmenkontext
Für Ihre Firma ist folgendes Vorgehen empfohlen:
- Grund-Audit: Führen Sie zunächst ein internes Audit durch (z. B. Webflow Audit Panel: „Accessible elements in Webflow“). help.webflow.com+1
- Widget-Integration: Wählen Sie z. B. accessiBe oder All in One Accessibility und integrieren Sie das Widget in Ihre Webflow-Site.
- Technische Optimierung: Überarbeiten Sie Bereiche wie Bild-Alt-Texte, Heading-Struktur, Tastaturbedienbarkeit, Fokuszustände, Farbkontraste.
- Dokumentation: Erstellen Sie eine Barrierefreiheitserklärung auf der Website (z. B. „Unsere Website erfüllt …“), mit Rückmeldemöglichkeit für Nutzer.
- Monitoring & Reporting: Legen Sie fest, wie regelmässig Sie Zugriff auf Berichtswerte haben (z. B. monatlich/vierteljährlich) und Verantwortlichkeiten für Nachbesserung definieren.
- Skalierung: Achten Sie darauf, dass neue Seiten/Sprachen automatisch im Widget mit erfasst werden bzw. nachbarrierefrei gestaltet werden, damit Ihre globale Website konsistent bleibt.
1. Grundprinzipien der Barrierefreiheit
- Inhalte sollen für alle Menschen zugänglich sein, unabhängig von Alter, Beeinträchtigung oder Endgerät.
- Die Gemeindewebsite orientiert sich an den WCAG 2.1-Richtlinien (Level AA).
- Verständlichkeit, Struktur und Zugänglichkeit stehen im Mittelpunkt.
2. Textgestaltung
- Klare Sprache: kurze Sätze, aktive Formulierungen, einfache Begriffe.
- Absätze: nicht zu lang, thematisch klar gegliedert.
- Überschriftenhierarchie: H1 für Seitentitel, H2 für Hauptabschnitte, H3 für Unterpunkte.
- Listen: Aufzählungen für klare Struktur verwenden.
- Kontraste: Textfarbe und Hintergrund müssen hohen Kontrast bieten (z. B. dunkler Text auf hellem Hintergrund).
3. Bilder und Grafiken
- Alternativtexte (Alt-Texte): Beschreiben den Inhalt des Bildes präzise.
- Beispiel: „Blick auf den Marktplatz Andelsbuch bei Sonnenschein“.
- Keine Texte nur in Bildern: Wichtige Informationen müssen als Text verfügbar sein.
- Infografiken: Zusammenfassende Beschreibung unterhalb der Grafik ergänzen.
4. Videos und Multimedia
- Untertitel: Alle Videos mit Untertiteln versehen.
- Transkripte: Für längere Inhalte ein Text-Transkript bereitstellen.
- Audiodeskription: Optional, für wichtige visuelle Informationen.
5. Links und Navigation
- Beschreibende Linktexte: „Hier klicken“ vermeiden, stattdessen z. B. „Bürgermeisterbrief herunterladen“.
- Tabulator-Navigation: Inhalte müssen über Tastatur erreichbar sein.
- Sprungmarken: Für schnelle Navigation zwischen Hauptbereichen.
6. Tabellen
- Einfache Tabellen: Klare Überschriften in der ersten Zeile.
- Zusammenfassungen: Kurze Beschreibung über Zweck und Inhalt der Tabelle.
7. Formulare
- Beschriftungen (Labels): Jede Eingabe muss beschriftet sein.
- Fehlermeldungen: Klar formuliert, wo der Fehler liegt und wie man ihn behebt.
- Tab-Reihenfolge: Logisch und nachvollziehbar.
8. Prüfen vor Veröffentlichung
- Automatische Tools: WAVE, Accessibility Insights oder Siteimprove zur Kontrolle nutzen.
- Manuelle Prüfung: Seiten mit Screenreader und Tastatur testen.
- Lesbarkeit: Inhalte sollten von Personen mit unterschiedlichem Sprach- und Bildungsniveau verstanden werden.
9. Verantwortlichkeiten
- Jeder Redakteurin prüft die eigenen Inhalte auf Barrierefreiheit.
- Eine Koordinatorin für digitale Barrierefreiheit überwacht Einhaltung der Richtlinien.
Weitere Infos:
Download PDF
