Ein Gastbeitrag von Ingo Steinke, nachhaltiger Webentwickler aus Berlin.
Barrierefreiheit und Nachhaltigkeit in Webdesign und Webentwicklung haben einiges gemeinsam: sie werden oft zu Unrecht unterschätzt, sie verbessern die Nutzererfahrung (Usability), bringen damit oft auch wirtschaftliche Verbesserungen, also mehr Geld aufs Konto, und werden von Suchmaschinen und deren Algorithmen belohnt.
Was bedeutet nachhaltige und barrierefreie Webentwicklung?
Ausführliche Empfehlungen zur Umsetzung und Verifizierung nachhaltiger Webentwicklung finden sich in den Web Sustainability Guidelines: sauber, effizient, offen, ehrlich, regenerativ und resilient sollen Websites sein. Die sich daraus ergebenden Handlungsempfehlungen überschneiden sich teilweise mit den Empfehlungen für Barrierefreiheit und Benutzerfreundlichkeit, die im Barrierefreiheitsstärkungsgesetz (BFSG) und den zugrundeliegenden Web-Barrierefreiheitrichtlinien (WCAG) detailliert spezifiziert sind.
Ich konzentriere mich in diesem Artikel auf Punkte, die wir als Webentwickler und Webdesigner praktisch umsetzen können, selbst wenn Nachhaltigkeit keine Priorität unserer Auftraggeber ist. Dazu zählt Green Hosting, also möglichst effizienter und fossilfreier Serverbetrieb. Möglichst geringe Datenmengen, und Verzicht auf unnötige Berechnungen steigern die ökologische Nachhaltigkeit zusätzlich. Einfach verständliche und umsetzbare Aspekte der Barrierefreiheit sind unter anderem die Nutzbarkeit ohne Mausnavigation, vorlesbare Texte, ausreichend starke Farbkontraste, sowie ein maßvoller Umgang mit Animation und bewegten Bildern. Außerdem muss der wesentliche Inhalt einer Website auch ohne moderne High-End-Geräte nutzbar sein.
Wie kann ich Nachhaltigkeit und Barrierefreiheit im Web konkret umsetzen?
Wenn wir Barrierefreiheit und Nachhaltigkeit von Anfang an berücksichtigen, ersparen wir uns und unseren Kunden aufwändige und kostspielige nachträgliche Anpassungen.
Lesbarkeit, Schriftarten und Vektorgrafiken
Text sollten wir möglichst niemals als Grafik, sondern immer mit Schriftarten umsetzen. Dadurch kann der Text vergrößert, verkleinert, vorgelesen und von Suchmaschinen und KI-Systemen verarbeitet werden.
Im Sinne des Zwei-Sinne-Prinzips auf lesbare und vorlesbare Texte zu setzen, muss nicht bedeuten, auf Bilder zu verzichten. Aber wir können Bilder erst bei Bedarf nachladen (Lazy Loading) und somit Energie und Speicherplatz sparen, und für den Fall, dass sie noch nicht geladen sind oder jemand grundsätzlich keine Bilder sehen kann, sollten wir alle relevanten Bilder sinnvoll beschriften.
Wenn wir Künstliche Intelligenz (KI) zum Erstellen von Bildbeschriftungen einsetzen, sollten wir prüfen, wie relevant der erstellte Text ist, ob es beispielsweise völlig nebensächlich ist, dass die abgebildete Person eine rote Brille trägt.
Visuelle Klarheit und Verständlichkeit können durch gut gezeichnete Vektorgrafiken verstärkt werden, die ebenfalls stufenlos vergrößerbar sind, wenig Speicherplatz verbrauchen und nicht durch ablenkende Details verwirren.
Außerdem sollten wir die Bildgrößen, also Breite und Höhe, angeben, um Layout Shift (Verschiebung des Layouts) auf Webseiten zu verhindern, wodurch wir auch Rechenleistung sparen und die Usability verbessern, wenn keine Sprünge das Lesen erschweren oder versehentlich auf falsche Links geklickt wird.
Bei Bitmap-Grafikformaten (JPG, PNG, WEBP, AVIF) können Source-Informationen (einfache srcset-Attribute oder komplexe Source-Elemente) sicherstellen, dass nur die nötigen Bilddateien geladen werden.
Animationen: bewegte Bilder behutsam einbauen
Bewegte Bilder, auch als „GIFs“ bekannt, sind beliebte Stimmungsmacher, aber sie können auch nerven und empfindliche Menschen am Lesen der illustrierten Texte hindern. Barrierefreie Webseiten nutzen Animationen nur dann, wenn keine gegenteilige Präferenz gesetzt wurde (Reduced Motion), halten sie spätestens nach dem dritten Durchlauf automatisch an, und bieten zusätzlich eine Möglichkeit, die Bewegung jederzeit zu stoppen oder auszublenden („Pause, Stop, Hide“-Prinzip).
Videos korrekt beschriften und nicht ungefragt abspielen
Ebenso kommt der Verzicht auf unnötige Videos bzw. auf deren vermeidbares automatisches Abspielen (Autoplay) unseren Nutzern und der ökologischen Effizienz unserer Website gleichermaßen zugute.
Closed Captions sind für Video, was Alt-Attribute für Bilder sind: sie beschreiben Multimedia-Inhalte in Worten und können unabhängig vom Originalmedium übersetzt und alternativ angeboten werden. Somit brauchen wir keine unterschiedlichen Videodateien und sparen auch hier Speicherplatz und übertragene Datenmengen.
Mehr Informationen zu Videos und Untertiteln gibt es im Artikel Wie nutze ich Untertitel für mein Video richtig?
Farbkontrast, Funktionalität, Resilienz und Robustheit
Robustheit ist ein Grundprinzip und Erfolgsgeheimnis des World Wide Web und wird auch in den WCAG so genannt, während in den Web Sustainability Guidelines von Resilienz die Rede ist. Vereinfacht gesagt, sehen HTML, CSS, und pragmatisch programmierte Webseiten über unkritische Probleme hinweg, anstatt gleich eine Fehlermeldung anzuzeigen. Das erleichtert es auch Nutzern mit alten, defekten oder ungewöhnlichen Geräten, Web-Angebote zu nutzen, ohne dass diese ausdrücklich für ihr konkretes Endgerät entwickelt wurden.
Auch Farbkontraste — ausreichend stark, aber nicht zu krass (siehe: Barrierefreie Farben gibt es nicht) und alles, was hilft, Webseiten ohne oder mit möglichst wenig Hilfsmitteln und Herumprobieren hinein- und herauszoomen zu können, erleichtert die Nutzung nicht nur für Menschen mit körperlichen oder geistigen Behinderungen, sondern auch in alltäglichen Situationen wie einer ruckelnden Busfahrt im gleißenden Sonnenlicht.
Wie kann ich die Nachhaltigkeit und Barrierefreiheit von Webseiten messen?
Eine CO2-neutrale Website lässt sich technisch gesehen nicht beweisen, aber wir können das CO2-Äquivalent (CO2e) schätzen. Für eine vollständige Prüfung der Barrierefreiheit sind erfahrene menschliche Prüfer gefragt, aber automatische Messungen sind zumindest für einen ersten Eindruck hilfreich.
Folgende Tools können kostenlos genutzt werden:
Sowie – speziell für Barrierefreiheit:
Idealerweise sollten wir jeweils alle relevanten Seitentypen (Startseite, Blogartikel, Shop-Kategorien, Suchergebnisseiten, usw.) zeitnah, und nicht erst nach Abschluss eines Projekts, verifizieren und die angezeigten Verbesserungsvorschläge aufmerksam und kritisch prüfen, um Verschlimmbesserungen zu vermeiden.
Fazit
Barrierefreie und nachhaltige Webentwicklung ergänzen sich. Viele Maßnahmen nutzen beiden Zielen gleichermaßen. Diese Ziele sind kein Selbstzweck, sondern dienen dazu, unser Angebot möglichst vielen Menschen unkompliziert zugänglich zu machen. Davon profitieren am Ende alle – auch wirtschaftlich.