Das Thema Accessibility gewinnt nicht zuletzt durch Verabschiedung des Barrierefreiheitsstärkungsgesetzes und der darin verankerten Fristen stark an Bedeutung. Eine Entwicklung, die wir bei UXMA wichtig und richtig finden und als UX-getriebenes Team weiter pushen wollen. Es ist unser erklärtes Ziel, die Ergebnisse unserer Projektarbeit im Interface Design allen Menschen gleichermaßen zugänglich zu machen. Das bedeutet im Klartext, proaktiv Barrieren zu erkennen und Einflussfaktoren sowie Einsatzorte unserer Interfaces vollumfänglich zu erfassen. 

Lesbarkeit als Beispiel

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.

Was sagt die Norm?

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:

Sehwinkel

Abb.1: Veranschaulichende Darstellung des Sehwinkels.

Sehwinkel

Abb.1: Veranschaulichende Darstellung des Sehwinkels.

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.

Gibt's dafür kein Tool?

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.

Bildschirmentfernungen im Vergleich

Abb.2: Bildschirmentfernungen im Vergleich der Endgeräte

Bildschirmentfernungen im Vergleich

Abb.2: Bildschirmentfernungen im Vergleich der Endgeräte

Berechnung und Darstellung

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.

Versalhöhe und Schriftgröße im Vergleich

Abb.3: Versalhöhe und Schriftgröße im Vergleich

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 verdeutlich die Funktionsweise:

Slider2
Slider1
Lesbarkeitsbewertung
Accesibility-Skript zur Prüfung der Textelemente

Abb.4: Lesbarkeitsbewertung bei 50 cm Abstand (links) und 30 cm Abstand (rechts)

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.

Long Story short

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.

Interesse an einem Austausch zu unserem Tool oder dem Thema Accessibility? Schreib uns und wir verabreden ein gemeinsames Gespräch!

Jan Figura
Jan Figura ist Digital Designer bei UXMA mit Schwerpunkt auf Prototyping. Er interessiert sich für neue Designtrends und Tools.
Future Learning Experiences

Future Learning Experiences