Animierte Typografie: "Webdesign auf den Punkt gebracht".
Animierte Typografie: "Webdesign auf den Punkt gebracht".

Barrierefreiheit und Nachhaltigkeit im Webdesign

Welche Möglichkeiten bieten sich im Webdesign, Barrierefreiheit mit Nachhaltigkeit zu verbinden? Mit dieser Frage beschäftige ich mich im folgenden Beitrag. An Hand meines Website Themes für Contao veranschauliche ich praktische Herangehensweisen an das Thema.

Im Zuge meiner Entwicklungsarbeit am Theme stellte sich heraus, dass minimale Erweiterungen der Funktionalität schnell zu einem exponentiellen Anstieg der Komplexität führen können. Ein höherer Komplexitätsgrad bringt zwangsläufig einen größeren Ressourcenverbrauch mit sich. Dieser wiederum wirkt sich negativ auf die Nachhaltigkeit aus.

Aus diesen Erfahrungen lässt sich folgendes Prinzip für die Entwicklungsarbeit ableiten: Mit dem Streben nach einfachen Lösungen kann eine optimale Balance zwischen Funktionsumfang und Ressourcenverbrauch erzielt werden. Darüber hinaus hat die Entwicklungsarbeit gezeigt, dass Barrierefreiheit und Nachhaltigkeit zusätzliche Anforderungen an die Flexibilität eines Seitenlayouts stellen.

  1. Funktionen einbinden, welche die Barrierefreiheit im Webdesign verbessern
  2. Funktionen des Browsers und des Betriebssystems nutzen
  3. Effiziente Entwicklung von Funktionen, welche die Barrierefreiheit im Webdesign verbessern
  4. Barrierefreiheit und Nachhaltigkeit auf Autor*innen und Entwickler*innen-Seite sicherstellen
  5. Die richtige Herangehensweise an den Themenkomplex Barrierefreiheit und Nachhaltigkeit
  6. Gestalterische Freiheit im Webdesign mit Barrierefreiheit und Nachhaltigkeit vereinbaren
  7. Wie es weitergehen kann

hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Digitale Barrierefreiheit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".

Ich freue mich auf unsere Zusammenarbeit.

Portrait von Webdesigner Ralf-Alexis Ruf, abgebildet auf einem Smartphone.
Animation: Stilisierte Orange mit winkendem Blatt, auf der das Wort "hej" steht.

1. Funktionen einbinden, welche die Barrierefreiheit im Webdesign verbessern

Um Nachhaltigkeit zu gewährleisten, sollte Barrierefreiheit vollumfänglich integriert werden. Eine ebenso große Rolle spielt die Effizienz. Es gilt, zusätzlichen Code auf das notwendige Maß zu reduzieren. Der Ressourcenverbrauch wird hierdurch verringert. Meine Vorgabe lautete: Stelle Funktionen, welche die Barrierefreiheit verbessern, "nativ" bereit. "Nativ" bedeutet, auf umfangreiche DOM-Manipulation und ARIA-Attribute zu verzichten. HTML selbst bietet viele semantische Elemente. Diese können - so wie sie sind - genutzt werden. Mit <details> und <summary> ist es zum Beispiel möglich, ein Akkordeon mit wenig Code zu erstellen. Screenreader können solche HTML-Tags und deren Funktionalität leicht verstehen und wiedergeben. Der Einsatz von JavaScript und ARIA kann minimiert werden. Fallback-Lösungen bei deaktiviertem JavaScript entfallen. Dieses Vorgehen ist effizient und trägt zur Nachhaltigkeit bei.

Auge, durchgestrichen mit diagonaler Linie, symbolisch dargestellt.

2. Funktionen des Browsers und des Betriebssystems nutzen

Es gibt verschiedene Funktionen, welche die Barrierefreiheit verbessern. Sie sind in Browsern und Betriebssystemen integriert. Genannt seien der Browser-Zoom, die Einstellung der Schriftgrößen und Kontrast-Designs. Diese sollten einbezogen werden, um zusätzlichen Aufwand zu vermeiden und dem Prinzip der Nachhaltigkeit zu folgen. Eine wichtige Rolle spielt die Art und Weise, wie das Website-Template technisch umgesetzt wird. Es sollte robust und flexibel gestaltet sein, um angemessen auf Einstellungen des Browsers und des Betriebssystems reagieren zu können. Ein Klassiker ist das Hamburger-Menü-Icon, das oft ausschließlich auf CSS basiert. Bei aktiviertem Kontrast-Design führt diese Art der Umsetzung dazu, dass das Icon unsichtbar wird. Deshalb empfehle ich, das Icon als SVG-Code, der als Data-URL kodiert ist, im CSS einzubetten. Alternativ kann das Icon als inline-SVG im HTML eingebunden werden. Bei beiden Varianten wird ein zusätzlicher HTTP-Request vermieden. Die Vorgaben der Nachhaltigkeit sind erfüllt.

Ohr, durchgestrichen mit diagonalem Balken, symbolisch.

3. Effiziente Entwicklung von Funktionen, welche die Barrierefreiheit im Webdesign verbessern

Die Entwicklung und das Testing von Funktionen, welche die Barrierefreiheit verbessern, stellen eine komplexe Aufgabe dar. Fast alle von mir verwendeten Tools erfüllen die Anforderungen nur teilweise. Mein Toolset umfasst Browser Addons und Plugins für Entwicklungstools. Daneben nutze ich Bookmarklets, Online- und kleine Desktop-Programme. Bei der Analyse der Farbkontraste habe ich festgestellt, dass Contrast Checker mit integrierten Color-Pickern am besten funktionieren. Mit diesen ist es möglich, die Farbwerte so zu messen, wie sie auf der Nutzungsoberfläche erscheinen. Allerdings ist ein solches Messverfahren zeitaufwändig. Hier würde ich mir die Unterstützung durch Bildbearbeitungsprogramme wünschen. Bildbearbeitungsprogramme halten alle Werte für die jeweiligen Kontrastverhältnisse automatisch bereit und müssten sie nur visuell aufbereiten. Auf diese Weise könnte ich Screenshots von einer Website direkt analysieren lassen. Ausgegeben würde eine Art Heatmap mit AAA-, AA-, und A-Level.

Eine andere Möglichkeit für das Testen der Farbkontraste stellt der Firefox Browser bereit. Zu finden ist diese Testfunktion in den Werkzeugen für Webentwickler. Dort gibt es einen Reiter "Barrierefreiheit". Sie prüft das gesamte Seitenlayout und gibt eine interaktive Liste mit gefundenen Problemen aus.

In Sachen Farbkontrastprüfung hat die in Firefox integrierten Testfunktion für Barrierefreiheit einen entscheidenden Vorteil: Sie liefert wesentlich zuverlässigere Ergebnisse als andere Contrast Checker.

Ein Beispiel:

  1. Ein Farbverlauf als Hintergrund in einem umschließenden div-Tag
  2. Textfarbe in einem innen liegenden div-Tag mit transparentem Hintergrund

Im Gegensatz zu anderen Contrast Checkern erfasst die Firefox Testfunktion für Barrierefreiheit diese Konstellation einwandfrei. Zudem analysiert sie die Luminanz eines Farbverlaufs unter Berücksichtigung der Textfarbe in den "innersten" HTML-Tags dieser Konstellation.

Kopf im Profil mit Gehirn, symbolisch dargestellt.

4. Barrierefreiheit und Nachhaltigkeit auf Autor*innen und Entwickler*innen-Seite sicherstellen

Barrierefreiheit sollte nicht nur für Nutzer*innen, sondern auch für Autor*innen und Entwickler*innen gewährleistet sein. Hierbei geht es um zwei unterschiedliche Arten von Barrierefreiheit:

  1. Hilfstools für die Barrierefreiheit müssten barrierefrei in die Entwicklungs- und Testumgebung eingebunden sein. Optimal wäre eine automatische Validierung der Barrierefreiheit. Beides trüge zu einem effizienten Workflow bei. Neben der code-basierten Validierung müsste die visuelle Darstellung im Browser überprüft werden.
  2. Eine barrierefrei gestaltete Bedienoberfläche eines CMS Backends stellt sicher, dass auch Autor*innen mit Behinderung in der Lage sind, diese zu bedienen. Die Entwicklung einer barrierefreien Bedienoberfläche stellt für sich genommen ein umfangreiches und anspruchsvolles Projekt dar.

Das oben beschriebene gilt auch für Hilfstools, welche die Nachhaltigkeit bewerten. Hierbei geht es um die Ermittlung passender Bildformate, optimale Bildkomprimierung, CSS-Bereinigung und SVG-Optimierung. Um beste Ergebnisse zu erzielen, müsste die Ermittlung KI-gestützt erfolgen. Beim Thema Optimierung geht es um viele kleine Stellschrauben. Nur in Summe sind diese in der Lage, ein optimales Ergebnis in Sachen Nachhaltigkeit zu erzielen. Schließlich ist ein barrierefrei integriertes Backend auch gut für die Nachhaltigkeit, indem es den Aufwand auf Produktionsseite reduziert.

Aufgeschlagenes Buch, Hand mit Daumen nach oben, symbolisch.

5. Die richtige Herangehensweise an den Themenkomplex Barrierefreiheit und Nachhaltigkeit

Es ist wichtig, einen umfassenden und durchdachten Ansatz zu entwickeln, um Barrierefreiheit und Nachhaltigkeit zu integrieren.

Ich sondiere zunächst, welche Anforderungen Benutzer*innen an einzelne Bedien- und Inhaltselemente einer Website stellen. Daran anschließend stellt sich die Frage, inwiefern diese Anforderungen von den zur Verfügung stehenden Komponenten erfüllt werden können: Ist der Webserver, der Webbrowser, die Website oder das Betriebssystem am besten geeignet? Mit welcher der vier Komponenten lässt sich der Aufwand gering halten?

Ich möchte dies an Hand der Anforderung "Formularvalidierung" verdeutlichen: Beim Contao CMS ist eine serverseitige Formularvalidierung als Standardfunktion enthalten. Die serverseitige Formularvalidierung erfolgt nach Klick auf den Senden-Button. Dies hat folgende Vorteile: Alle Eingaben werden gebündelt und sicher validiert. Die Ausgabe der Fehlermeldungen erfolgt ebenfalls gebündelt. JavaScript sorgt dafür, dass die Fehlermeldungen fokussierbar und somit für Screenreader zugänglich sind. Dies ist mit geringem Aufwand möglich. Dementsprechend habe ich bewusst auf eine zusätzliche clientseitige Formularvalidierung verzichtet.

Diesem Lösungsansatz könnte entgegenstehen, dass die fehlende clientseitige Formularvalidierung den Bedienkomfort einschränkt. Möglicherweise wirkt sich dieser Lösungsansatz auch negativ auf die Nachhaltigkeit aus. Dies wäre der Fall, wenn das Formular mehrfach fehlerhaft ausgefüllt und gesendet wird. Auf der anderen Seite geht mit dem zusätzlichen Bedienkomfort wiederum ein Zuwachs an Komplexität einher. Hier gilt es, die Vor- und Nachteile abzuwägen. Im Hinblick auf die Nachhaltigkeit bleibt zu bewerten, ob der Komplexitätszuwachs oder die mögliche Häufung von Serveranfragen schwerer wiegt.

Zwei Hände, jeweils mit Daumen und Zeigefinger ein "O" formend.

6. Gestalterische Freiheit im Webdesign mit Barrierefreiheit und Nachhaltigkeit vereinbaren

Die Anforderungen der Barrierefreiheit und der Nachhaltigkeit im Verbund schränken die gestalterische Freiheit ein. Die Spielräume werden enger. Das war zumindest meine Erfahrung. Beschränkungen schaffen allerdings auch Raum für neuartige Lösungen. Beschränkungen können uns herausfordern, in besonderem Maße kreativ zu werden. Wir sollten Barrierefreiheit und Nachhaltigkeit im Webdesign daher als Verbündete und nicht als Gegner betrachten. Sie unterstützen uns dabei, Nutzungsgewohnheiten zu überdenken. Die Nachhaltigkeit und insbesondere die Barrierefreiheit haben mir neue Horizonte eröffnet.

Sechs Kreise, einer davon gefüllt, darunter das Wort "Braille".

7. Wie es weitergehen kann

Der Ansatz, Barrierefreiheit mit Nachhaltigkeit zu verbinden, hat dich überzeugt? Du überlegst, deine Website ebenfalls barrierefrei und nachhaltig gestalten zu lassen? Dann lass uns ins Gespräch kommen.

Sowohl bei der Überarbeitung deiner bestehenden Website als auch bei der Gestaltung einer neuen Website kann ich dich unterstützen. Für eine mögliche Überarbeitung bietet sich zunächst ein Audit der Barrierefreiheit an. So kannst du den Aufwand für einen Relaunch deiner Website besser einschätzen. Vielleicht möchtest du die Verbesserungsvorschläge des Audits dann selbst umsetzen. Diese und andere Überlegungen können wir am besten in einem persönlichen Gespräch anstellen.

Ja, ich möchte ein Gespräch