Nachhaltige Websites: Mach Deinen Online-Auftritt ressourcenschonend und barrierefrei

Das große Thema Nachhaltigkeit lässt sich in diese 3 Bereiche aufteilen:

  • ökonomische Nachhaltigkeit
  • ökologische Nachhaltigkeit
  • soziale Nachhaltigkeit

Unser Nachhaltigkeitsschwerpunkt mit dem yes-to-less-Siegel liegt auf verant­wortungs­­vollem Handeln nach Umwelt­­aspekten – also auf der ökolo­gischen Nach­haltigkeit. Wenn Du Dich darüber hinaus mit Deiner Website beschäftigst, um Deinen fairen Fuß­abdruck zu erhöhen, ist das die Gelegenheit, neben den ökolo­­gischen auch die sozialen Aspekte für Deinen Webauftritt zu berücksichtigen: eine barriere­freie beziehungs­weise barriere­arme Gestaltung. Mit Barriere­freiheit zeigst Du Deine Haltung zu sozialer Verant­wortung. Und öko­nomisch ist das nebenbei auch! Denn ohne Bewusst­sein für online Barrieren schließt Du viele Deiner potenziellen Kundinnen, Leserinnen und Nutzer­innen aus.

Das Wichtigste zur Barriere­freiheit von Web­sites zusammen­gefasst

Eine barriere­freie Website ermöglicht allen Menschen – unab­hängig von ihren individu­ellen Einschrän­kungen – den Zugang zu Deinen Inhalten. Damit förderst Du die gesell­schaftliche Teil­habe und steigerst gleich­zeitig die Chancen­gleichheit.

Nutzerfreundlich und schnell auffindbar

Eine barrierefreie Website verbessert die Nutzer­freundlich­keit und steigert Dein SEO-Ranking. Das W3C hat einen umfassenden Maßnahmen­katalog zur Gestaltung und Entwicklung barriere­freier Websites (WCAG) mit diesen 4 Prinzipien der Barriere­freiheit entwickelt:

  • Wahrnehmbar
  • Bedienbar
  • Verständlich
  • Robust

Deine 3 Schritte zur barriere­freien Web­site

Schritt 1: Prüfen. Tools wie Google PageSpeed Insights und WAVE helfen Dir, Schwach­stellen schnell zu erkennen.

Schritt 2: Anpassen. Nutze klare Strukturen, gute Kontraste und maschinen­lesbare Formate, um Deine Website für alle zugänglich zu machen.

Schritt 3: Testen. Versuche, Deine Website ausschließlich mit der Tastatur zu navigieren und beobachte mögliche Hindernisse.

Wow! Mit diesen Maßnahmen machst Du Deine Website nicht nur barriere­frei, sondern gestaltest sie nach­haltiger und benutzer­freundlicher für alle.

Was bedeutet eine barriere­freie Web­site?

Eine barriere­freie Website ist für alle Nutzenden verständlich und einfach zu bedienen, selbst wenn eine besuchende Person erhebliche Einschrän­kungen beim Sehen, Hören oder in ihrer Bewegung hat. Das Word Wide Web Consortium (W3C) hat für mehr Barriere­freiheit in der Online-Welt die Web Content Accessibility Guidlines (WCAG) entwickelt – einen umfassenden Maßnahmen­katalog zur Gestaltung und Entwick­lung barriere­freier Websites.

Der Katalog beschreibt 4 Prinzipien, die eine Website erfüllen muss, um als barriere­frei zu gelten. Jedes Prinzip wird mit spezifischen Richt­linien konkretisiert, und zu jeder Richtlinie gibt es klare Erfolgs­kriterien, die als Maß­stab zur Bewertung der Barriere­freiheit einer Website dienen.

Die 4 Prinzipien der Barrierefreiheit

Wahrnehmbar – Inhalte zugänglich gestalten

Die Inhalte einer Website sollen leicht zu erfassen sein. Dafür müssen ausreichend Kontraste und skalierbare Schrift­größen geboten werden, damit alle Lesenden die Darstellung nach Bedarf anpassen können. Für Bilder, Videos und Audio­dateien sollten geeignete Text­alternativen ergänzt werden, um auch Menschen mit visuellen Einschrän­kungen den Zugang zu allen Informationen zu ermöglichen.

Farbpaletten von ColorSafe sind barrierefreie Farbkombinationen nach WCAG-Standard

Bedienbar – einfache und flexible Navigation

Das Navigieren durch die gesamte Seite muss einfach sein. Menschen sollen die Seite nicht nur mit der Maus, sondern auch über die Tastatur problemlos bedienen können. Klar verständliche Menü­punkte und aussage­starke Bezeichnungen erleichtern die Orientierung. Darüber hinaus helfen zusätzliche Funktionen wie eine Such­leiste, Filter­optionen, eine Menü­leiste oder eine Sitemap, das gewünschte Ziel auf verschiedenen Wegen zu erreichen.

Verständlich – klare und nachvollziehbare Inhalte

Eine barriere­freie Website zeichnet sich auch durch die Verständ­lichkeit ihrer Inhalte und Funktionen aus. Das betrifft sowohl die Sprache als auch die Hand­habung der Seite. Prägnante Texte sowie eindeutige Fehler­meldungen und gut beschriftete Eingabe­felder helfen den nutzenden Personen, sich sicher auf der Seite zu bewegen.

Robust – auf allen Geräten und mit Hilfsmitteln nutzbar

Die Website muss auf verschiedenen Geräten anzuwenden sein und auch von Hilfs­software wie Screen­readern korrekt verarbeitet werden können. Nur so können Website-Betreibende sicher­stellen, dass ihre Inhalte unabhängig vom verwendeten Gerät oder speziellen Hilfs­mitteln für alle Menschen zugänglich bleiben.

Einige der Maßnahmen, um die Prinzipien der Barriere­freiheit zu erfüllen, senken gleichzeitig den Ressourcen­verbrauch und fördern die ökologische Nachhaltig­keit. Umsetzungs­beispiele dafür sind:

  • Lass Videos nicht automatisch, sondern nur auf aktive Anforderung starten. Das spart Energie und reduziert außerdem unnötige Ablenkungen.
  • Nutze den Dunkelmodus bei Websites, um den Strom­verbrauch auf bestimmten
    Dis­plays zu reduzieren. Das verbessert den Kontrast für bessere Lesbar­keit und schont Deine Augen.
  • Halte den Code Deiner Website klar und nutze wenige Skripte. Hilfsprogramme können ihn so leichter interpretieren und insgesamt müssen weniger Daten geladen werden.
  • Verwende nur 2 bis 3 Schriftarten, um die Website insgesamt übersichtlicher zu gestalten und die Ladezeit zu optimieren.

Mit diesen ressourcen­schonenden und barriere­armen Maß­nahmen steigerst Du automatisch Nutzungs­freundlich­keit und Auf­find­bar­keit Deiner Website.

Viele Kriterien wirken sich auf die Bewertung von Such­maschinen positiv aus. Dazu gehören zum Beispiel:

  • Strukturierte Inhalte mit ein­deutigen Über­schriften, Zwischen­überschriften und
    Absätzen erleichtern die Orientierung.
  • Links mit beschreibenden Texten, die eindeutig auf den Inhalt schließen lassen.
  • Alternativen für Nicht-Text-Inhalte wie Bilder oder Videos.
  • Verschiedene Navi­gations­wege wie interne Verlinkungen und Alter­nativen wie ein Menü oder Inhalts­verzeichnis, um zu einem bestimmten Ziel zu gelangen.

Vorteile einer barrierefreien Website

Gesellschaftliche Teilhabe und Chancengleichheit

Mit einer barriere­freien Website gehst Du über die gesetzliche Pflicht hinaus und übernimmst Verant­wortung dafür, dass alle Menschen – unabhängig von ihren körperlichen Ein­schränkungen oder technischen Möglich­keiten – Zugang zu Deinen Inhalten haben. Du stellst sicher, dass keine Person von Barrieren in der digitalen Welt aus­geschlossen wird. Damit ermöglichst Du gesell­schaftliche Teil­habe und stärkst die Chancen­gleichheit. Bedenke: Jede aus­geschlossene Person könnte Deine nächste Kundin sein!

Barrierefreiheit in Zahlen

Die Zahl der aus­geschlossenen Nutzenden ist höher als viele denken. In Deutschland sind knapp 10 Prozent der Bevölkerung schwer­behindert. 7,8 Millionen Menschen stehen damit vor dieser digitalen Heraus­forderung. Dazu kommen Menschen mit Seh­schwäche und ältere Personen, die klare Beschriftungen und kontrast­reiche Schriften zu schätzen wissen. Zudem freuen sich temporär eingeschränkte User mit gebrochenem Arm über eine einhändige Bedienung Deiner barriere­armen Website.

Statistisches Bundesamt (Destatis) 2024: Schwerbehinderte Menschen nach Alter

Mehr Nutzerfreundlichkeit und SEO

Mit einer barriere­freien Website verbesserst Du den Zugang zu Deinen Inhalten für eine große Anzahl von Menschen. Darüber hinaus profitieren alle Nutzenden von einer gut zu bedienenden Website. Einige der Maß­nahmen sind außerdem typische Maß­nahmen der Suchmaschinen­optimierung (SEO). Damit erhöhst Du Deine Chancen, auf Google und anderen Such­maschinen besser gefunden zu werden und mehr Interessierte auf Deine Website zu ziehen.

Wie wird Deine Website barrierefrei?

Tools

Google legt zunehmend Wert auf Barriere­freiheit, was sich im Tool PageSpeed Insights zeigt: Neben Ladezeit, SEO-Kriterien und Best-Practice-Tipps bewertet es auch die Barriere­freiheit Deiner Website. Wir geben Dir einen ersten Über­blick. Sende einfach die URL Deiner Website an und lass dir von uns konkrete Empfehlungen für ein paar Optimierungs­maßnahmen geben.

Leistungsberichte von Tool-Anbietern helfen beim Optimieren der eigenen barrierefreien Website

Ein weiteres hilfreiches Tool ist WAVE (englisch­sprachig), das Dir Fehler und Ver­besserungs­vorschläge aufzeigt.

Testen

Neben Tools hilft es, die Website selbst einmal nur mit der Tastatur zu testen. Sind
alle Elemente zugänglich? Stelle Deinen Website-Besuchenden einfache Auf­gaben wie: „Melde dich zum News­letter an“ und beobachte, wie sie sich zurecht­finden und ob Hinder­nisse auftreten.

Basics

Beginne mit den Grund­lagen für Barriere­freiheit, wie guten Kontrasten und gut strukturierten, maschinen­lesbaren Inhalten. Aufwendiger wird es bei inter­aktiven Elementen wie einem Bestell­prozess – doch die Kern­funktionen sollten für alle Besuchenden auf verschiedenen Wegen zugänglich sein.

Vorlagen

Ergänze Deine barriere­freie Website mit einer Erklärung zur Barriere­freiheit. Damit kannst Du Deine Leser­schaft über Bedien­elemente informieren, die möglicherweise noch nicht barriere­frei sind. Ein Muster für die Erklärung dient Dir unter­stützend als Leit­faden.

Mit diesen Maß­nahmen stärkst Du nicht nur die Nutzungs­freundlich­keit und das Ranking Deiner Website, sondern zeigst auch Verant­wortung für nachhaltiges und inklusives Handeln – ein echter Gewinn für Deine Leserschaft.

Rona Linke

– Webseiten · SEO · Programmierung –

In meinem Unternehmen, der Netzum Sorglos Software GmbH, erstellen wir seit gut 12 Jahren Websites. Beim Thema ökologisch nachhaltige Websites geht es vor allem um eine Reduzierung von CO2-Emissionen, die durch eine Website verursacht werden. Mit sauberem Code, geringen Einsatz von Skripten und passenden Bildern halten wir den Datentransfer gering, was auch zu schnelleren Ladezeiten führt.