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:

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

Die Welt der digitalen Barrieren

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

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

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.

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.

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/*"]
}],

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.

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:

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

---

Hintergrund

Interessantes aus der Welt der Produkte, Blicke hinter die Kulissen von Herstellern und Portraits von interessanten Menschen.

Alle anzeigen

Diese Beiträge könnten dich auch interessieren