Alles paletti: Ist deine Website valide, barrierefrei, sicher und schnell?

Webentwicklung wird zunehmend komplexer. Neben korrekter Auszeichnung von HTML und CSS gibt es zahlreiche weitere Faktoren, die zwar nicht zwingend das korrekte Aussehen einer Website beeinflussen, aber dennoch auf den Erfolg einer Website Einfluss haben. Dazu gehört eine barrierefreie Darstellung der Inhalte, sowie eine schnelle Erreichbarkeit. Das alles selbst im Blick zu haben, ist schwierig. Daher gibt es zahlreiche Tools, die dir dabei helfen, zu dem Werturteil „Alles paletti“ zu gelangen.

Klassische Validatoren für HTML und CSS

Als allererstes solltest du natürlich sicherstellen, dass dein HTML- und CSS-Quelltext richtig ausgezeichnet ist. Das W3C bietet hier einen Validator an, der deinen HTML-Quelltext auf Fehler durchsucht und Warnungen sowie Verbesserungsvorschläge ausgibt. Neben Einhaltung der Syntax gibt es weitere Faktoren, die bei HTML beziehungsweise HTML5 eingehalten werden sollten.

W3C-Validator für HTML

Gerade bei HTML5 spielt die Semantik eine große Rolle. Du solltest also darauf achten, dass deine Website sich an die semantischen Regeln von HTML5 hält. Dazu gehört etwa, dass Überschriften richtig gesetzt werden. So sollte jedes „<article>“-Element immer eine Überschrift beinhalten. Mehrere „<h1>“-Überschriften sollten vermieden werden. Der W3C-Validator macht dich auf diese Dinge aufmerksam.

Auch für CSS gibt es einen entsprechenden Validator, der dich auf Auszeichnungsfehler hinweist. Leider interpretiert dieser Vendor-Prefixe als Fehler, weshalb ein tatsächlich valider CSS-Quelltext praktisch wenig sinnvoll ist.

Barrierefreiheit prüfen

Zunehmend wichtiger wird der Aspekt der Barrierefreiheit bei der Webentwicklung. Dies stellt Webdesigner und -entwickler vor große Herausforderungen. Denn für Menschen mit Sehbehinderungen muss eine Website besondere Merkmale erfüllen, damit diese mit Screenreadern erfasst werden kann. Dazu gehört, dass Inhalte, die mit dem Auge einfach erfasst werden können, so ausgezeichnet sind, dass Screenreader etwa Navigationselemente und Randbereiche einer Website gut interpretieren können.

Der HTML_CodeSniffer zeigt, wie es um die Barrierefreiheit deiner Website steht

Der HTML_CodeSniffer hilft dir dabei, kritische Elemente in deinem Quelltext zu finden und gibt dir Hinweise, inwiefern diese nicht barrierefrei sind. Dabei berücksichtigt das Tool mehrere Standards, die ein unterschiedliches Maß an Barrierefreiheit vorsehen.

Sichere Websites bevorzugt

Auch der Sicherheitsaspekt wird in der Webentwicklung immer wichtiger. So hat Google bereits damit angefangen, Websites, die per SSL verschlüsselt sind, in Suchergebnissen besser zu bewerten. Gerade wenn persönliche Daten übertragen werden – vor allem bei sozialen Netzwerken und Online-Shops ist das der Fall – solltest du sicherstellen, dass diese verschlüsselt werden.

Der SSL-Report verrät, wie sicher deine Website ist

Mit dem SSL-Report von Qualys SSL Labs bekommst du einen schnellen Überblick, ob deine Website per SSL verschlüsselt ist und welche weiteren Faktoren ein mögliches Sicherheitsrisiko sein können.

Die Website securityheaders.io gibt dir Auskunft darüber, welche sogenannten Security-Headers gesetzt sind. Gerade in Kombination mit HTTPS können hier zusätzliche Sicherheitsschranken gesetzt werden, die zum Beispiel dafür sorgen, dass eine sichere Verbindung zu einer Domain auch beibehalten wird und nicht versehentlich zu einer unsicheren Verbindung gewechselt wird. Securityheaders.io haben wir schon ausführlicher vorgestellt.

Schnelligkeit ebenfalls wichtig

Trotz Breitbandausbau solltest du immer darauf achten, ob deine Website auch schnell geladen wird. Gerade beim mobilen Internet ist es dank geringerer Bandbreiten und gedeckelter Datenvolumina wichtig, die zu übertragenden Daten gering zu halten.

Die Google PageSpeed Insights helfen dir dabei, herauszufinden, wo es Optimierungsmöglichkeiten bezüglich der Ladezeiten bei deiner Website gibt. So weist dich der Dienst etwa darauf hin, ob die Dateigröße von Bildern durch bessere Komprimierung reduziert werden kann und ob deine JavaScript- und CSS-Dateien das Rendering der Seite blockieren.

GTmetrix gibt ausführliche Informationen zur Geschwindigkeit deiner Website

Eine Alternative zu Googles Dienst ist GTmetrix. Er funktioniert ganz ähnlich und gibt dir als prozentualen Wert an, wie schnell deine Website ist und wie viel Optimierungspotenzial vorhanden ist. Dabei werden über 25 Parameter geprüft, die relevant für die Geschwindigkeit sind und bei Bedarf optimiert werden können.

Mobiltauglichkeit testen

Zuguterletzt – wo wir schon beim mobilen Internet waren – spielt natürlich auch die Frage eine Rolle, wie gut eine Website auf Mobilgeräten funktioniert. Auch hier hat Google ein spezielles Tool, welches dich darüber informiert, ob deine Website „mobile friendly“ ist. Der Test auf Optimierung für Mobilgeräte gibt kurz und knapp wieder, ob es Optimierungsbedarf gibt.

Ist das Weblayout responsiv? Sind Links und Buttons groß genug und haben sie einen ausreichend großen Abstand zueinander? Ist die Schrift gut lesbar? All diese Faktoren werden bei dem Test berücksichtigt.

mobiReady zeigt, wie „mobile friendly“ deine Website ist

Auch die Seite mobiReady testet deine Website auf Mobilfreundlichkeit. Dabei wird diese auf einem Desktop sowie drei Smartphones simuliert. Als Ergebnis erhältst du einen Score, der deine Website mit den 1.000 weltweit größten Websites vergleicht. Außerdem erhältst du auch hier eine Reihe von Hinweisen, woran es hakt und wo du etwas verbessern kannst.

Fazit: Alles paletti!

Wer alles richtig machen will, hat bei der Gestaltung und Umsetzung viel Arbeit vor sich. Alle Tests zu bestehen, dürfte schwierig bis unmöglich sein – gerade bei gestalterisch aufwändigen und inhaltlich komplexen Websites. Aber die hier vorgestellten Dienste sind ein guter Anhaltspunkt, um Schwachstellen festzustellen und zumindest grobe Fehler auszumerzen, beziehungsweise zu vermeiden.

(dpe)