Tool­basierte Accessibility

Nehmen wir ein einfaches Beispiel: Üblicherweise gestalten wir Interfaces aus 50 cm Entfernung an unseren Rechnern. Was ist aber, wenn die Endnutzer:innen 100 cm entfernt sitzen werden? Sind noch alle Inhalte gut zu erkennen? Und was ist, wenn die Ansprüche an die Leserlichkeit durch visuelle Beeinträchtigungen steigen? Ein solcher Perspektivwechsel ist für eine gelungene Accessibility unerlässlich.

Unsere Kund:innen teilen unsere Denkweise zum Thema und beauftragen unsere Dienstleistungen explizit unter dem Gesichtspunkt der Barrierefreiheit. Wie das ganz konkret im Projektalltag aussieht, werde ich anhand der nachfolgenden Schilderung erläutern. Meine Erfahrungswerte beziehen sich dabei auf die Aufgabe, die Leserlichkeit von Texten auf verschiedenen Displayarten zu überprüfen. Es sollte sichergestellt werden, dass alle Elemente gut lesbar sind.

Um zu verstehen, wie Leserlichkeit grundsätzlich definiert ist, hilft ein Blick die DIN EN ISO 9241-303:2012-03.

Im Unterkapitel 5.5 Leserlichkeit und Lesbarkeit findet sich folgendes:

„Die Mindesthöhe lateinischer Zeichen muss 16 Bogenminuten betragen; es wird gefordert, dass das System in der Lage ist, eine Zeichenhöhe von 20 Bogenminuten bis 22 Bogenminuten zur Verfügung zu stellen.“

Klingt komplizierter, als es tatsächlich ist. Die Bogenminute ist eine Einheit, um Winkel anzugeben, wobei 1 Grad aus 60 Bogenminuten besteht. Es geht also darum, mit welchem (Seh-)Winkel zwischen Zeichenoberkante und Zeichenunterkante der Text vom Auge wahrgenommen wird. Doch zu kompliziert? Die nachfolgende Illustration hilft bei der Veranschaulichung:

Angewandt auf unser Beispiel lassen sich aus der Entfernung von 100 cm und der Displayauflösung Millimeter- bzw. Pixelwerte berechnen. Diese statt Bogenminuten zu verwenden, macht die Angaben der Norm weitaus praktikabler. Da von unserem Kunden im konkreten Beispiel nur komprimierte Pixeldateien geliefert wurden, blieb uns nichts anderes übrig, als in kleinteiliger Handarbeit jeden Text einzeln zu bemessen.

Als effizienzgetriebene Menschen kamen wir schnell zur Frage, ob uns nicht ein Plug-In diese Arbeit durch automatisierte und somit schnellere Überprüfungen abnehmen könnte. Also haben wir kurzerhand ein Plug-In für das Designtool der Wahl Figma entwickelt. Wie sahen unsere konkreten Anforderungen aus?

Grundsätzlich sollte das Plug-In automatisch die Prüfung auf Lesbarkeit an ausgewählten Screens durchführen. Um diese anhand der Richtlinie berechnen zu können, müssen zunächst bestimmte Grundparameter abgefragt werden. Dazu gehören die physische Größe und die Auflösung des Displays sowie die Entfernung des Nutzers zum Display.

Mit Hilfe der Plug-In Dokumentation von Figma haben wir ein UI entwickelt, das den Input der geforderten Daten ermöglicht. Zusätzlich haben wir die Verwendung von Presets ermöglicht. Auf diese Weise kann der typische Abstand zum Display durch die Auswahl von Endgeräte-Typen (Desktop, Tablet, verschiedene Smartphonemodelle) gewählt werden.

Durch die vorhergegangene Arbeit war der größte Teil der Logik hinter der automatisierten Analyse startklar. Also die Berechnung der Pixelgröße und die anschließende Umwandlung in Bogenminuten, was einen Vergleich mit der Schriftgröße zulässt.

Allerdings bezieht sich die ISO Richtlinie nicht auf die verwendete Schriftgröße, sondern auf die Versalhöhe des Buchstaben „E“. Da die Versalhöhe aber in Bezug auf die Schriftgröße für jede Schriftart unterschiedlich ist, mussten wir hierfür einen kleinen Workaround entwickeln. Für jede verwendete Schriftart und Schriftgröße wird der Buchstabe „E“ in eine Kontur umgewandelt. Die Höhe des Textelements reduziert sich so auf die tatsächliche Höhe des Buchstabens, was wiederum der Versalhöhe entspricht.

Nach der Berechnung galt es, für eine adäquate Darstellung der Analyseergebnisse zu sorgen: Hierfür legen wir mit Hilfe unseres Plugins Rechtecke über über alle Textbereiche des Screens. Diese Rechtecke werden in einem vierstufigen Ampelsystem anhand der Grenzwerte der ISO Richtlinie eingefärbt. Außerdem werden zu jedem Textelement auch die berechneten Bogenminuten angezeigt. Das nachfolgende Beispiel verdeutlicht die Funktionsweise:

Im Screen auf der rechten Seite steht die Ampel überall auf grün, das heißt in der relevanten Bildschirmentfernung von 30 cm werden die Anforderungen der Norm vollumfänglich erfüllt. Im Screen auf der linken Seite wird eine Displayentfernung von 50 cm betrachtet. Hier zeigen die rot markierten Segmente Unterschreitungen des von der Norm geforderten Mindestwertes von 16 Bogenminuten.

Aus der Aufgabe, uns im Kundenauftrag mit der Analyse der Lesbarkeit von Texten auf verschiedenen Screens auseinanderzusetzen, ist im ersten Schritt viel kleinteilige Messarbeit erwachsen. Dieses Momentum haben wir genutzt, um das Thema Accessibility automatisiert in den Arbeitsalltag unseres Teams zu integrieren.

Unser dafür entwickeltes Tool ist in der Lage, die Lesbarkeit anhand der Richtlinie DIN EN ISO 9241-303:2012-03 zuverlässig bestimmen und auszuwerten zu können. Damit können wir in allen Projekten die Lesbarkeit von Texten ohne zusätzliche Tests garantieren.

Der Ansatz, den Designprozess mit selbstentwickelten Tools zu vereinfachen, um mehr Zeit für relevante, nutzerzentrierte Fragestellungen zu haben, bietet viel Potenzial. Davon profitieren wichtige Themen wie Accessibility, die wir damit noch stärker ins Bewusstsein von Anwender:innen und Entwickler:innen gleichermaßen heben.