Ein A11Y-Erwachen

Entwerfen eines zugänglichen FT.com

Bevor ich 2017 der Financial Times beitrat, hatte die Website einen umfassenden Umbau durchlaufen, der zwei Jahre in Vorbereitung war. Die neue Version war ein Erfolg, superschnell und generell besser, aber all das Drängen und Erproben hatte ihren Tribut gefordert - die visuelle Sprache der Website hatte gelitten und das Zugänglichkeitsspiel war weg.

Zugänglichkeit für das Web oder „a11y“ (eine Art Abkürzung, die als Numeronym bezeichnet wird) ist die Praxis, sicherzustellen, dass Webinhalte für alle zugänglich sind. Es trägt dazu bei, die Diskriminierung von Menschen mit Behinderungen zu verhindern, indem Kodierungsstandards wie WCAG (Web Content Accessibility Guidelines) eingehalten werden.

Einige Benutzer mit eingeschränkter Sicht bevorzugen es, Websites im Kontrastmodus anzuzeigen

Die Weltbankgruppe schätzt, dass 1 Milliarde Menschen mit einer Behinderung leben - das sind 15% der Weltbevölkerung. Daher ist es wichtig, dass wir verantwortungsbewusst gestalten und die Auswirkungen unserer Arbeit auf andere berücksichtigen.

Nach seiner Jungfernfahrt haben wir ein a11y-Projekt durchgeführt, um die Standards auf FT.com zu verbessern und letztendlich die AAAG-WCAG-Akkreditierung zu erhalten. Dies ist keine leichte Aufgabe für eine neu entwickelte Publishing-Plattform, die ich Ihnen versichern kann. Vom Farbkontrast zu den Schaltflächenzuständen spielte das Design eine entscheidende Rolle, und der gesamte Prozess veranlasste uns dazu, über unsere Entscheidungen anders zu denken.

Wir haben Plugins wie Stark und Oracle installiert und Best Practices in Teams eingeführt, denn, wie man sehen kann, sind erreichbare Websites zweifellos besser. Sie sind besser codiert, was sie schneller macht, sie haben eine bessere SEO und sind einfach besser für jeden zu verwenden.

Der farbenblinde Simulator von Sketch für Stark

Das a11y-Projekt bot auch die Gelegenheit, unsere Designsprache zu reformieren. Anschließend können Sie diese Aktualisierungen in unsere Komponentenbibliothek einspeisen, um allen digitalen Produkten, die unter das Dach von FT fallen, ein einheitliches und konsistentes Markenerlebnis zu bieten.

Wir begannen also mit der Farbkomponente. Schließlich war Farbe die definitive Eigenschaft der Financial Times, seit sie 1893 die rosaroten Seiten debütierte.

In Zusammenarbeit mit Origami (Wächtern der FT-Frontend-Komponenten und Protektoren des Reichs) haben wir eine Palette von 64 auf nur 16 reduziert, darunter ein etwas rosigeres und passenderes „Papier“. Außerdem haben wir ein System entwickelt, das dynamisch Farbtöne und Schattierungen aus der Palette erzeugen und kontrastierenden Text basierend auf der Hintergrundfarbe eines Elements erzeugen kann. Glückliche Tage!

Da das System Sass-Mixins und -Funktionen verwendet, um all diese Zauberei auszuführen, kann die Komponente Farben testen, um festzustellen, ob sie die WCAG passieren. Wenn eine bestimmte Kombination die Mindestanforderungen nicht erfüllt, wird ein Fehler angezeigt.

Natürlich haben wir dort nicht aufgehört, nach den Farben, die überraschend weniger komplizierte Typografie (obwohl ich immer noch Albträume über Major Thirds und Perfect Fourths habe), dann über Buttons und so weiter

FT.com ändert sich ständig, es werden hunderte von Updates pro Monat bereitgestellt, ohne dass Sie es wissen. So schwer es ist, zuzugeben, Perfektion wird in solch einer fortschrittlichen Umgebung selten erreicht, aber das ist keine schlechte Sache. Es wird Dinge geben, die wir vermisst haben, Dinge, die wir nicht einmal in Betracht gezogen haben, aber das Wichtigste ist, dass wir die Gespräche fließen lassen, um besser zu entwerfen und verantwortungsbewusst zu gestalten.

Die WCAG-Akkreditierung zu erreichen war schwierig, aber Sie können sich vorstellen, ein Formular auszufüllen, das Sie nicht sehen können, oder auf eine Schaltfläche zu klicken, die Sie nicht drücken können. Mein a11y Erwachen begann als Projekt, als Mittel zum Zweck, aber es ist eine Reise, die weit über die rosaroten Seiten hinausgeht und in meinem Designdenken verankert ist, nicht immer perfekt, sondern jeden Schritt des Lernens zu lernen.