Digitec für Dyslexiker: Eine Barriere weniger im Internet

Dominik Bärlocher

26.1.2019

Dyslexiker haben Schwierigkeiten damit, Buchstaben und Wörter richtig zu interpretieren. Das macht den Alltag im Internet schwierig bis unmöglich. Da ich die Situation nicht okay finde, habe ich eine Browser Extension gebaut, die Abhilfe schafft.

Bevor ich mit dem Artikel daherkomme, das Wichtigste. Wenn du Dyslexiker bist, dann habe ich eine Browser-Erweiterung für dich. Sie ersetzt die Schriftart Roboto oder Arial mit einer Schriftart, die für Dyslexiker und Legastheniker entwickelt wurde.

So geht's:

1. Lade dir Google Chrome herunter
2. Installiere die Browser-Erweiterung
3. Lade digitec.ch oder diese Seite neu
4. Fertig. Alle Schriftarten auf digitec.ch und galaxus.ch sind jetzt durch OpenDyslexic ersetzt

Nun zum eigentlichen Artikel, den jetzt hoffentlich mehr Leute lesen können.

Die Welt der digitalen Barrieren

Die Welt ist voller Barrieren. Rollstuhlfahrer und Gehbehinderte scheitern an Treppen, die überall sind. Blinde suchen oft den Weg aus Mangel an erhobenen Wegweisern und Schildern in Braille. Diesen Menschen wird geholfen. Organisationen wie Pro Infirmis und der schweizerische Blindenbund machen sich auf gesellschaftlicher und politischer Ebene stark, dass die Welt auch für Behinderte zugänglich wird.

Das Internet hat hier noch das Nachsehen. Vor allem dann, wenn du nicht «zu sehr behindert» bist. Einer dieser Fälle ist die Dyslexie. Dyslexiker haben, stark vereinfacht gesagt, Schwierigkeiten damit, zu lesen und zu schreiben. Dyslexie kann erworben werden, durch einen Unfall oder einen Schlaganfall, oder vererbt werden. Ganz ohne Hilfe sind diese Menschen aber nicht. Der Verband Dyslexie Schweiz versucht, die Welt des Internets auch Dyslexikern zugänglich zu machen.

Denn, denk mal drüber nach: Dyslexikern sind unter Umständen und je nach Ausprägung der Dyslexie Nachrichten-Sites, Reddit, Pornhub oder Wikipedia vorbehalten. Dein ganzer Internetalltag könnte für jemanden eine riesige Barriere darstellen.

Das ist nicht okay.

Zeit, eine Barriere aus der Welt zu schaffen.

Comic Sans: Der Retter aus der Not

Im Februar 2017 hat Autorin Lauren Hudgins in ihrem Blog Post mit dem Titel «Hating Comic Sans is Ableist» die Welt amüsiert und erstaunt. Ableismus ist ein Kunstwort, das die Diskriminierung basierend auf Fähigkeit beschreibt. Also wie Rassismus aber halt mit Fähigkeit. Im Post beschreibt Hudgins anekdotisch, wie ihre Schwester die Welt geöffnet wurde, da sie die Schriftart Comic Sans entdeckt hat.

Besagte Schwester sei Dyslexikerin und habe es nur mit Schwierigkeiten durch die Schule geschafft. Doch seit sie alle Texte mit ihrem Computer einfach auf Comic Sans umstellen kann, falle es ihr einfacher, Texte zu lesen.

Hudgins ist nur eine der vielen, die sich online dafür stark machen, dass das Netz Dyslexikern zugänglich gemacht wird. Helle Köpfe haben sich hingesetzt und angefangen, Dyslexie zu analysieren.

• Was macht eine Schriftart lesbar und eine andere nicht?
• Welche Elemente haben die lesbaren gemeinsam?
• Was geht gar nicht?
• Wie können wir das möglichst breit beheben?

Denn das ist so eine Sache mit der Dyslexie: Sie kann nicht über einen Kamm geschert werden. Manche Dyslexiker können nicht zwischen dem grossen I und dem kleinen l unterscheiden und andere verdrehen Buchstaben.

Der Profit auf Kosten einer Behinderung

Dass die Onlinewelt für Dyslexiker nach wie vor digitales Neuland sein könnte, hat der Dyslexiker Christian Boer realisiert. Als Abschlussarbeit an der Uni Utrecht hat der Designer im Jahre 2008 eine Schriftart vorgestellt, die so gar nicht in die Riege der schönen Schriftarten passen will. Doch Ästhetik war nicht der Hauptgrund für das Design der Schriftart. Boer hat eine Schriftart erfunden, die auf die Bedürfnisse der Dyslexiker eingeht und ihnen das Lesen vereinfacht.

In seinem Talk bei TEDxFultonStreet beschreibt er, wie Dyslexiker das geschriebene Wort wahrnehmen. Buchstaben werden im Hirn verdreht, gespiegelt oder vertauscht. Wenn dann die rotierten Buchstaben aussehen wie andere Buchstaben, dann ist das Schlamassel perfekt. Das kleine d und das kleine b sind offensichtliche Kandidaten für Verwechselung. I und l, p und q, rn und m sowie einige andere auch.

Kurz: Boers Schriftart Dyslexie hat ihm und etwa 120 000 anderen Dyslexikern einen neuen Zugang zur Schrift und zum Lesen gegeben. Zur Nutzung dieser Schriftart rät auch der Verband Dyslexie Schweiz in einem Infoblatt.

Da gibt es nur ein Problem: Die Schriftart kostet umgerechnet 11.42 Franken pro Jahr für Privatnutzer. Für Firmen noch mehr. Chrome Extension? Kostet Geld. Text Editor? Kostet Geld.

Dass Behinderte noch Geld zahlen müssen wegen ihrer Behinderung, passt vielen – mir inklusive – nicht.

Open Source als Retter in der Not

Als Konkurrenz zu Dyslexie Font kommt Open Dyslexic daher. Da Boer kommerzielle Interessen mit seiner Schrift verfolgt, exklusiviert er die, die sich den Luxus des Lesens nicht leisten können. In der Schweiz ist das zwar wohl nicht oft der Fall, aber die Welt ist etwas grösser als unsere kleine Ecke des Planeten.

Open Dyslexic verfolgt dieselben Ziele, hat weitgehend die selben Erkenntnisse aus der Forschung gezogen, die das Projekt ebenfalls hat machen müssen. Die Schriftart, die aus dem Projekt hervorgeht, gleicht Dyslexie Font, kostet aber nichts und der Erfinder will nicht einmal genannt werden, wenn du die Schriftart verwendest. Der Mann hinter der Schriftart heisst Abelardo «Abbie» Gonzalez und arbeitet in der Qualitätssicherung bei einem Gesundheitskonzern in Boston.

Daher ist es OpenDyslexic, die ich für mein Projekt verwendet habe. Aus Überzeugung und ich will nicht, dass jeder von euch 12 Stutz zahlen muss, damit ihr das Internet lesen könnt.

Das grosse Aber

Dyslexie hat keine einheitliche Diagnose. Sätze wie «Jeder Dyslexiker vertauscht d und b» sind pauschal falsch. Daher ist es schwierig, einheitliche Tools zu finden, die allen Dyslexiker hilft. Die Flinte ins Korn zu werfen, ist aber auch nicht wirklich sinnvoll. Darum kommt die folgende Story mit dem Browser Plugin mit einem Aber, das vielleicht zur Enttäuschung für dich führt: Sie könnte für dich oder dein Kind nicht funktionieren.

Davon berichtet auch Hudgins, deren Schwester auch mit der Erfindung der Dyslexie Font nicht von Comic Sans absehen will. Ihr Hirn habe sich einfach an Comic Sans gewöhnt und so mache ihr die spezielle Schriftart mehr Schwierigkeiten als die oft ausgelachte Microsoft-Schriftart.

Trotzdem: Wenn ich mit meinem Plugin irgendwem helfen kann, dann passt das für mich. Und wenn du selbst Dyslexiker bist, oder eine Tochter oder einen Sohn mit Dyslexie hast, probier es aus.

So baust du deine Chrome Extension

Also, nachdem wir wissen, welche Schriftarten weshalb wie gut für Dyslexiker geeignet sind, können wir mit der Arbeit an der Extension beginnen. Das geht wesentlich schneller als die Recherche, denn Google macht es dir einfach, deine eigene Chrome Extension zu schreiben. Für meine Dyslexie-Extension brauchst du nebst ein paar Bildern zwei Dateien:

extension/
├── img/
│   ├── dig16.png
│   ├── dig24.png
│   └── dig32.png
├── manifest.json
└──styles.css

manifest.json: Die Funktionen der Extension

Die PNG-Dateien sind für den Knopf oben im Menü. Die Funktion wird in manifest.json vorgegeben. Bevor die eigentliche Funktion vorgegeben wird, muss Chrome mitgeteilt werden, was genau die Extension macht und wie sie heisst.

Daher kommt zuerst die Entry Data, die dem Computer sagt, was die Datei eigentlich ist:

{
       "manifest_version": 2,

Die erste geschwungene Klammer wird erst ganz am Ende der json wieder geschlossen. Keine Panik, die ist schon richtig da. Es folgen die Informationen für den Chrome Web Store, in dem die Extension am Ende dann gefunden wird.

"name": "Digitec Galaxus Dyslexic Accessibility",
"version": "0.11",
"description": "Being dyslexic can hinder you from reading content on a website. This extension improves accesibility to digitec.ch and galaxus.ch",

Dann kommt der Rest, in dem Funktion und Look vorgegeben wird.

"content_scripts": [{
"css": ["styles.css"],
"matches": ["https://digitec.ch/*", "https://galaxus.ch/*", "https://www.digitec.ch/*", "https://www.galaxus.ch/*", "https://www.galaxus.de/*", "https://galaxus.de/*"]
}],

  "default_icon": {                       // optional, standard icon in the menu bar
    "16": "img/dig16.png",           // optional, small icon
    "24": "img/dig24.png",           // optional, middle icon
    "32": "img/dig32.png"            // optional, large icon
  },
  "default_title": "Digitec Galaxus Dyslexic Accessibility",      // optional, shown in tooltip
}

Und das ist schon das ganze manifest.json. Die wichtigen Zeilen sind:

• css: Da sage ich dem Browser, wo er die Schriftart herholen soll.
• matches: Hier definiere ich, auf welchen Sites die Extension geladen werden soll.

styles.css: Schriftart plus URI

OpenDyslexic gehört nicht zu den Standardschriftarten der Welt und Google hat die Schriftart auch nicht in ihrer Liste der offenen Schriftarten. Daher müssen wir dem Stylesheet die Font anders übergeben. Dazu nutze ich eine URI.

Eine URI ist eine Zeichensequenz, die – meist in Base64 codiert – eine Ressource identifiziert. Sprich: Ich kann einem CSS eine ganze Schriftart übergeben, ohne, dass ich die Schriftart irgendwo hosten muss. Die URI ist unendlich lang, weswegen ich sie abkürze. Wenn du sie in ganzer epischer Länge sehen willst, dann kannst du alle Dateien der Extension im GitHub Repository einsehen.

Das CSS sieht so aus:

@font-face {
     font-family: 'mobiledyslexic-opendyslexic-regular';
     src:
     url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF0oABMAAAAA… ') format('woff');
}

Hier nutze ich folgende Elemente:

• @font-face: Import einer Schriftart via CSS
• @font-face > font-family: Hier benenne ich die Schriftart im Kontext der Extension. Ich gebe ihr also den Namen, den ich weiter unten verwende. Dieser kann frei gewählt werden
• src: Die URI
• :not(.el):not(.fa):not([class*="Icon"]):not([class*="icon"]): Ausnahmen für Symbolschriftarten wie Font Awesome oder Elusive Icons. Anstelle diese Ausnahmen separat zu definieren, weise ich das CSS an, alles zu überschreiben, das nicht Icon ist.
• !important: CSS Designer sind zwar etwas stinkig, wenn du irgendwo !important verwendest, aber für verlässliche CSS Injection ist es sinnvoll. !important sagt dem Browser, dass diese Zeile nicht zu ignorieren ist, egal, was der Rest des Codes sagt.

Der Fehler in meinem Denkprozess

Mir fällt beim Schreiben auf, dass ich in meiner Extension einen Fehler in der Konzeption gemacht habe. Auch wenn es mir manchmal nicht so vorkommt, das Internet ist grösser als nur digitec.ch und galaxus.ch. Daher habe ich eine zweite Extension gebaut, die auf allen Websites greift. Sie ist im Wesentlichen mit der obigen identisch, ausser dass ich eine Zeile im manifest.json abgeändert habe.

 "matches": ["https://*/*", "https://*/*"]

Die Extension, die das ganze Web auf Open Dyslexic umstellt, kannst du hier herunterladen und dann ist da noch das GitHub Repo.

So. Fertig. Viel Spass. Wenn du weiter an meinem Code basteln willst, dann bedien dich.

Ein Aufruf an Leser und Community

In der Leserschaft haben wir schlaue Köpfe und in diesem Artikel wahrscheinlich solche, die gerne bestimmte Features haben möchten. Ich werde kaum dazu kommen, diese Requests alle zu erfüllen.

Wenn du ein paar Stunden Zeit hast und einen Request für eine Barrierefreiheit-Extension siehst, den du erfüllen kannst, dann setz dich doch bitte hin und mach dir die Mühe. Das Internet soll offen und zugänglich bleiben. Dafür müssen wir Normalleser halt manchmal in die Eisen steigen.

Dominik Bärlocher

Senior Editor

dominik.baerlocher@digitecgalaxus.ch

Journalist. Autor. Hacker. Ich bin Geschichtenerzähler und suche Grenzen, Geheimnisse und Tabus. Ich dokumentiere die Welt, schwarz auf weiss. Nicht, weil ich kann, sondern weil ich nicht anders kann.

Folgen

---

Computing

Folge Themen und erhalte Updates zu deinen Interessen

Thema folgen

Diese Beiträge könnten dich auch interessieren