Warum Accessibility und Performance zusammen besser sind als allein
Schon mal versucht, mit einem Screenreader oder nur mit der Tastatur im Internet zu surfen? Ohne Maus? Nein? Marcy Sutton macht sich tagein, tagaus Gedanken darüber, wie man genau das einfacher — und schneller machen kann.
Der erste Satz sitzt:
„Mein Name ist Marcy Sutton und ich werde euch heute zeigen, was ihr tun könnt, damit eure Seiten auch wirklich schnell laden und nicht nur so tun als ob.” — Marcy Sutton
Die in Seattle lebende Senior Front End Ingenieurin spricht gerne und oft bei öffentlichen Veranstaltungen über ihr Steckenpferd — Web Accessibility. So auch bei der Generate Conference in New York.
Doch diesmal geht es ihr nicht nur um um Barrierefreiheit im Web. Es geht um die Performance aus der Sicht von Accessibility. Denn Accessibility unterstützt nicht nur Menschen mit Beeinträchtigungen, sondern gestaltet Websites für jeden User klarer und macht sie schneller und einfacher zu bedienen. Wie also können wir solche Seiten gestalten?
Accessibility — ein Crashkurs
Accessibility bedeutet, das Web für alle User zugänglich und bedienbar zu machen.
„Die Kraft des Webs liegt in seiner Universalität. Zugang für jeden, unabhängig von körperlichen oder mentalen Einschränkungen ist ein essentieller Teil davon.” — Tim Berners-Lee, Gründer des WWW
In öffentlichen Einrichtungen erwarten wir Barrierefreiheit. Das sollte auch für das Word Wide Web gelten. Hier ein paar Beispiele:
- Ein blinder Mensch soll mittels Screenreader genauso auf Amazon Artikel kaufen können, wie ich es tue.
- Ein tauber Mensch braucht bei Webvideos korrekt (!!!) übersetzte Untertitel.
- Jemand, der die Maus nicht bedienen kann, weil er gelähmt ist oder vielleicht einfach gerade ein Kind auf dem Arm hält, soll mit dem Keyboard navigieren können.
Accessibility betrifft jeden. Wir alle profitieren von benutzerfreundlichen Websites, die möglichst viele Wege der Bedienung zulassen.
Screenreader-Gestotter & Performance-Killer
Was passiert, wenn ein Screenreader auf eine Seite wie CNN trifft? Marcy zeigt es bei Minute 2:00:
Wir alle sind von langsamen Websites genervt. Aber User, die erst darauf warten müssen, dass der Screenreader Inhalte lädt und dann vorliest, trifft es nochmal härter. Performance und Accessibility gehen daher Hand in Hand.
Wenn die eigene Website beim Performancetest versagt, kann das zum Beispiel folgende Gründe haben:
- Viel Content. Die Seite ist grundsätzlich groß und beinhaltet viele Videos und Bilder, die nicht für das Web optimiert sind (was zum Beispiel Dateigröße betrifft).
- Falsche Priorisierung. Die wichtigsten Funktionen, wie zum Beispiel die Eingabefelder für den Login, werden nicht zuerst geladen, weil diese im Quellcode der Website nicht priorisiert sind. Der User bleibt stecken, bevor er überhaupt angefangen hat.
„Als ich mich über langsames WiFi im Hotel bei Tumblr einloggen wollte, lud die Seite zuerst nicht etwa das Login-Feld, sondern ein GIF, das sich über die ganze Seite erstreckte. Die Prioritäten waren da etwas schräg.” — Marcy Sutton
- Javascript — überall. „Auf jeder Website gibt es Kernfunktionen (siehe Tumblr), die nicht auf Javascript angewiesen sind, sondern auch mit HTML funktionieren. Trotzdem wird oft Javascript verwendet, wo es gar nicht nötig ist. Das braucht zusätzliche Zeit”, sagt Marcy Sutton.
- Zu viel Customizing. Muss die Website denn wirklich drei verschiedene Schriftarten zeigen? Muss der Button tatsächlich fünfeckig sein und braucht das Dialogfeld unbedingt eine blaue Schattierung? Marcy Sutton erklärt: „Alles, was Designer anpassen oder außergewöhnlich gestalten, verursacht zusätzliche Ladezeit. Und diese Dinge auch so anzupassen, dass sie auch wirklich auf jeder Plattform funktionieren, macht alles noch komplizierter.”
Accessibility & Performance — so geht’s
Zum Schluss fünf Tipps für die eigene Accessibility-Performance-Mission:
- Zeige Empathie. Marcy Sutton: „Versuche mal, dich auf der Website zu bewegen und dabei nur die Tastatur zu benutzen. Jedes mal, wenn du scheiterst, hast du einen Punkt gefunden, an dem du arbeiten kannst.”
- Bleibe simpel und priorisiere. Wie viele Klicks oder Tastenanschläge braucht es, damit ein User eine Aufgabe erledigen kann? Je simpler der Aufbau der Website, desto mehr Barrierefreiheit.
- Nutze Browser Defaults. Die Browser-Standardeinstellungen für Design sind Freunde, keine Feinde. Sie sparen Ladezeit.
- Informiere dich über Universal Rendering. AirBnB macht es vor. Die wichtigsten Funktionen der Website laufen auch ohne Java Script. Der Server spielt zuerst den HTML-Code aus, der User bekommt eine „Sparversion” der Website, mit den wichtigsten Funktionen. Sobald der Rechner des Users Java Script geladen hat, bekommt die Website ein Upgrade, was Design und zusätzliche Funktionen betrifft. Das ist vor allem bei langsamer Verbindung oder deaktiviertem Java Script sinnvoll. Ergebnis: Der User kann schneller agieren und muss nicht warten, bis die komplette Website geladen ist.
- Schau dir Marcy Suttons Vortrag an. Sie kann das alles viel besser erklären als ich. Wirklich.
„Was ich an Accessibility so liebe, ist, dass du wirklich helfen kannst. Du kannst helfen, das Web zu einem bessseren Ort zu machen, wenn du nur ein bisschen Empathie zeigst.“ — Marcy Sutton
Mehr dazu:
- Marcy Suttons Homepage
- Marcy Sutton auf Twitter
- Marcy Sutton auf Github
- Accessibility Wins — kuratiert von Marcy Sutton (Englisch)
- The A11Y Project — A community driven effort to make accessibility easier (Englisch)
- W3.org — Introduction to Web Accessibility (Englisch)
- Axe Chrome Extension — Accessibility Testing Tool für Chrome Browser
- Video: Was ist eigentlich Javascript?
