Tool­basierte Accessibility

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.

Icon Darstellung eines Menschen mit ausgestreckten Armen in einem Kreis. Darüber ein Mauscursor.

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:

Grafik eines Auges und dem berechneten Sehwinkel, je nach Abstand. Die Grafik visualisiert wie groß Buchstaben bei verschiedenen Abständen sein müssen.

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.

Grafische Darstellung eines Nutzenden mit verschiedenen Devices und den idealen Abständen zum Lesen der Bildschirminhalte. Ganz rechts Phone mit 30cm, in der Mitte Tablet mit 40cm und links Desktop mit 80-50cm. Links daneben ein Fenster aus dem Programm Figma, welches den ISO 303:2011 Font Size Checker zeigt, mit der Möglichkeit Screen Size und Viewing Distance einzustellen.
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.

Grafische Darstellung von Schrift. Anhand der Buchstaben EXP wird Versalhöhe und Schriftgröße erläutert. Die Versalhöhe vom unteren Ende des großen E bis zum oberen Ende. Die Schriftgröße umfasst auch die Unterlänge des kleinen p und ein wenig Abstand darüber hinaus.
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 verdeutlicht die Funktionsweise:

Zwei Handyscreens. Sie zeigen beide dasselbe Interface einer Karte, auf der eine Route eingezeichnet ist. Darunter befindet sich die Adresse mit der Überschrift "Einsatzort". Zudem werden drei Zahlen (55 alarmiert,32 Kommen,0 Einsatzort) abgebildet, die mit "Einsatzkräftestatus betitelt sind. Ganz unten befindet sich ein Timer, der die bereits gelaufene Zeit des Einsatzes anzeigt. Bei der linken Darstellung sind gelbe Kästen um einzelne Bereiche des Interfaces gezogen, bei dem rechten Bild sind alle Kästen grün.
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.

Klingt spannend? Kontaktieren Sie uns gerne für mehr Informationen.

Wir freuen uns darauf, von Ihnen zu hören. Rufen Sie uns an oder schreiben Sie uns eine E-Mail. Wir sind auch face to face per Videocall für Sie erreichbar.

UXMA

Insights

Gemeinsam etwas Großes starten?