Perfekte 100 Punkte in Lichtgeschwindigkeit! Web-Accessibility in einer schnellen Umgebung, und Lighthouse feiert mit einem Feuerwerk!

Barrierefreiheit auf die Spitze treiben!

„Wir haben Frontend-Experten der Spitzenklasse und Markup-Profis, und mit der UI eines Marketing-Automation-Tools kennen wir uns auch aus. Barrierefreiheit schaffen wir doch locker!“ Mit dieser naiven Denkweise startete das Accessibility-Projekt von Liberogic – tatsächlich wurde es der Beginn eines harten Kampfes. Das hohe Ziel einer vollständigen Konformität mit WCAG 2.2 führte zu jahrelangen Lernrunden und endlosen Diskussionen. Ehrlich gesagt mussten wir schmerzhaft erkennen, dass wir das Thema unterschätzt hatten.

Zurückblickend auf die frühe Phase des Projekts vor einigen Jahren, in der wir Barrierefreiheit erlernten: Der Weg begann mit grundlegenden Fragen wie
„Was ist der Unterschied zwischen WCAG und JIS X 8341-3:2016?“
„WCAG 2.0 und JIS X 8341-3:2016 sind dasselbe!“
Es war ein langer, langer Weg.
„Ist dieses Erfolgskriterium so zu verstehen?“
„Nein, das ist der Maßstab von der anderen Seite.“
Durch endlose Diskussionen und Korrekturen konnten wir schließlich eine Struktur aufbauen, mit der wir die Konformitätsstufe AA nach WCAG 2.2 anstreben können.

Zeit, unsere eigene Website neu zu gestalten!

„Passt unsere Website eigentlich noch zu unserem Geschäft?“
Mit diesem Gedanken begann der Relaunch unserer eigenen Website.
„Wenn schon, dann richtig: Barrierefreiheit, SEO, alles auf einmal!“
Dieser Wunsch wurde, wie sollte es anders sein, von unseren eigentlich vielbeschäftigten, aber (vermutlich) begeisterten Teammitgliedern umgesetzt.

„Diese Farbe hat ein unzureichendes Kontrastverhältnis!“
„Aber design-technisch sieht sie doch gut aus …“
„Können wir das nicht innerhalb der Regeln anpassen?“
So ging es hin und her, ein ständiges Ausprobieren zwischen Design und Barrierefreiheit.
Im Markup arbeiteten wir uns gelassen durch eine gnadenlose Checkliste mit Testpunkten.

Endlich fertig!
Auch wenn wir deutlich später als ursprünglich geplant waren, spürten wir einen klaren Fortschritt in der technischen Weiterentwicklung.

100 Punkte mit Lighthouse erreicht! Und auch PageSpeed Insights bewertet uns hervorragend!

Dass die Website von Liberogic, die mit Astro, microCMS und Cloudflare gebaut ist, in Lighthouse hohe Punktzahlen erzielt, war von vornherein eingeplant. Auch bei der Barrierefreiheit ist sie absolut top! Der Accessibility-Test von Lighthouse basiert auf dem zuverlässigen axe-core, weshalb sich das Engagement für die WCAG-Konformität recht direkt in der Bewertung widerspiegelt.

Bei der Performance kamen wir anfangs nur schwer voran, da die Seite viele Bilder enthält und verschiedene dynamische Elemente nutzt. Durch hartnäckiges Feintuning – etwa die Optimierung der Ladeweise von Webfonts, die Überarbeitung von Bildkompression und Formaten sowie die Anpassung der Ladepriorisierung von Ressourcen – kam schließlich der Moment, auf den wir gewartet hatten!

＼ 100 Punkte! ／

Alle Kategorien der Desktop-Version von Lighthouse haben die volle Punktzahl erreicht! Und das Gerücht stimmt tatsächlich: "Aha! Wenn man in Lighthouse 100 Punkte in allen Kategorien erreicht, feiert Google einen mit einem Feuerwerk!"

"Echt jetzt?! Die alte Seite kam kaum über 80 bis 90 Punkte hinaus. Astro hat sicher auch seinen Teil dazu beigetragen, aber das ist wirklich beeindruckend!"

Auch PageSpeed Insights, das ebenfalls von Google bereitgestellte Tool zur Messung der Website-Performance, hat selbstverständlich 100 Punkte erreicht.

Allerdings gibt es bei PageSpeed Insights keinerlei besondere Inszenierung (kein Feuerwerk). Da wir mal auf 99 und dann wieder auf 100 Punkte kamen, wünschen wir uns von Google eine festliche Zusatzanimation. 🎇

Übrigens schwanken die Werte von Lighthouse und PageSpeed Insights je nach Netzwerkbedingungen, Serverstatus und Browserzustand zum Zeitpunkt der Messung. Auch wenn wir 100 Punkte erreicht haben, lässt sich dieser Wert nicht immer dauerhaft halten – das sollte man im Hinterkopf behalten.

Auf mobilen Geräten 100 Punkte in der Performance zu erreichen, ist wohl ein Ding der Unmöglichkeit... So sieht es aus. (↑ Der Screenshot stammt von damals, wurde aber vergleichsweise kürzlich aufgenommen.)

Das wahre Ziel liegt jenseits der Punktzahl

„Moment mal, aber ist das nicht selbstverständlich, wenn man es aus Sicht der Nutzer betrachtet...?“

Ich denke, dass das Ergebnis, bei dem wir nicht dem Score nachjagen, sondern konsequent für alle Menschen gestalten, die die Website tatsächlich nutzen, zur Bestbewertung geführt hat. „Score 100“ ist nur ein Zwischenziel. Das eigentliche Ziel ist es, eine Website zu bauen, die für alle angenehm und leicht zu bedienen ist!!

Derzeit implementieren wir für die Machbarkeitsprüfung im Projektalltag verschiedene experimentelle Funktionen, weshalb sich der Lighthouse-Score im Vergleich zu damals nach unten verändert hat. Ich rufe zwar unbedarft immer wieder „Warum, warum...?“, aber es versteht sich von selbst, dass für alle die Machbarkeitsprüfung wichtiger ist als mein Eigensinn.

So geht unsere unermüdliche Forschung eben weiter.