Background information
How I want to digitise the contents of my fridge and fail to do so
by Debora Pape
digitec for dyslexics: breaking down barriers on the Internet
26.1.2019
Translation: Eva Francis
Dyslexics have trouble interpreting letters and words correctly. This makes it difficult – if not impossible – to navigate the Internet. This is a situation I don’t find acceptable. That’s why I’ve developed a browser extension to tackle this problem.
Let’s begin with the most important information: If you’re dyslexic, my browser extension might be what you’re looking for. It replaces the fonts Roboto or Arial with a font that was designed for dyslexics.
Want to install it? This is how:
- Download Google Chrome.
- Install the browser extension.
- Refresh digitec.ch or the page you’re on.
- That’s it.
And now let’s get to the actual article – that’s now hopefully available to more people.
The world of digital barriers
Think about it: Dyslexics may not have access to news sites, Reddit, Pornhub or Wikipedia, depending on the degree to which they're affected. Browsing the Internet every day – which may be normal for you – could be hugely difficult for others.
That’s not okay.
About time to take down this barrier.
Comic Sans to the rescue
Her sister’s dyslexic and struggled through school. But since she can change any text on her computer to Comic Sans, it's easier for her to read texts.
Hudgins is one of many online advocates for making the Internet accessible to dyslexics. Many bright minds have analysed dyslexia by asking the following questions:
- What makes one font easier to read than another?
- Which elements do easily readable fonts have in common?
- What makes a font unreadable?
- How can we change this for as many people as possible?
The thing about dyslexia is there are varying degrees and symptoms. Some dyslexics have difficulties distinguishing the uppercase I with a lowercase l; others confuse one letter for another.
Making money with dyslexia
Dyslexic Christian Boer was the one who realised that the online world could still be unknown digital territory for dyslexic people. In 2008, as his final thesis at Utrecht University, the designer introduced a font that doesn't fit in with popular fonts. He didn't design the font with aesthetics in mind; Boer invented a font that meets the needs of dyslexics and makes it easier for them to read.
In his talk on Ted X Fulton Street, he describes how dyslexics see written words. Letters are twisted, mirrored or mixed up in the brain. If rotating a letter makes it look like another one, things get complicated. The lowercase letter d and b, for instance, are obvious candidates for confusion. Just like I and l, p and q, rn and m and more.
There’s one problem: The font costs the equivalent of 11.42 francs per year for private users. And even more for companies. Want the Chrome extension? You'll have to pay. What about text editor? You'll have to pay.
The fact that Boer is making money with his disability and the disability of others disappoints many – including me.
Open Source to save the day
Open Dyslexic is a competing font to Dyslexie. By pursuing commercial interests with his font, Boer is excluding people who can't afford the luxury of reading. This might not affect many people in Switzerland, but the world is quite a bit larger than our little corner of the planet.
Open Dyslexic pursues the same goals and is based on the same research findings. The font that resulted from this project is similar to the Dyslexia font, but is available for free. The inventor doesn’t even ask to be named. The person behind this font is Abelardo «Abbie» Gonzalez and works in quality assurance for a Boston-based health care company.
This is why I base my project on OpenDyslexic. In my opinion, it’s the right thing to do – and I don’t think anyone should have to pay 12 francs to read what’s said on the Internet.
The catch
Dyslexia isn’t the same for everyone. Saying «every dyslexic gets the letters d and b mixed up» are wrong. This is why it’s no easy task to find tools that work for all dyslexics. But not even trying would be even worse. Therefore, this story about my browser extension might disappoint you, as it might not work for you or anyone else you know who has dyslexia.
Hudgins also makes this finding: Her sister doesn't want to stop using Comic Sans, despite the Dyslexie font. Her brain is so used to Comic Sans that the special font causes her more difficulties than the often laughed at Microsoft font.
Nevertheless: If my plugin helps one one person, I'm happy. And if you're a dyslexic yourself, or have a daughter or son with dyslexia, give it a go.
How to get the Chrome extension
Now that we know which fonts are suitable for dyslexics and why, we can start working on the extension. This doesn't take as much time as doing research did, as Google makes it easy for anyone to write their own Chrome extension. For my Dyslexia extension, you’ll need a few pictures and two files:
extension/
├── img/
│ ├── dig16.png
│ ├── dig24.png
│ └── dig32.png
├── manifest.json
└──styles.css
manifest.json: The functions of the extension
The PNG files are for the button at the top of the menu. The function is predefined in manifest.json. Before the actual function is given, Chrome must be told what exactly the extension should do and what it is called.
To begin with, the entry data tells the computer what the file is:
{
"manifest_version": 2,
The first curly bracket is closed at the very end of the json. Don't panic, it’s right where it is. The following is the information for the Chrome Web Store, where the extension can be found once it’s finished.
"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",
What follows is the rest, in which function and look are predefined.
"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/*"]
}],
That’s our manifest.json done. The most important lines are:
- css: This tells the browser where to get the font.
- matches: This defines which pages the extension should work on.
styles.css: Font plus URI
OpenDyslexic isn't one of the world's standard fonts and it doesn't appear in Google's list of open fonts. Therefore we need to find a different way to pass the font on to the stylesheet. I use an URI.
This is what the CSS looks like:
@font-face {
font-family: 'mobiledyslexic-opendyslexic-regular';
src:
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF0oABMAAAAA… ') format('woff');
}
/*
- Force OpenDyslexic font to every element except some well known glyphs. *
- .el == Elusive Icons
- .fa == Font Awesome / :not(.el):not(.fa):not([class="Icon"]):not([class*="icon"]) { font-family: mobiledyslexic-opendyslexic-regular, sans-serif !important; } ```
I make use of the following elements:
My blunder
Now that I’m writing this article I realise I made a mistake in the conception of my extension. It’s easy to forget, but the Internet is more than just digitec.ch and galaxus.ch. This is why I’ve come up with a second extension that works for all websites. The two extensions are identical except for one line in the manifest.json:
"matches": ["https://*/*", "https://*/*"]
Check out these links to download the extension that transforms the entire Internet to Open Dyslexic and access the GitHub Repo.
And that’s it from my side. Enjoy! If you’d like to continue working on my code, feel free.
Calling all readers and Community members
I’m sure many of our users are brilliant minds – and some of you might like to see specific features implemented. I probably won’t get around to fulfilling all these requests, but if any one of you have a few hours to spare and would like to work on an extension to improve accessibility for everyone, please go ahead and do so.
I want everyone to have access to the Internet. Let’s all work together to make this happen.
Journalist. Author. Hacker. A storyteller searching for boundaries, secrets and taboos – putting the world to paper. Not because I can but because I can’t not.
Computing
Follow topics and stay updated on your areas of interest
Background information
Interesting facts about products, behind-the-scenes looks at manufacturers and deep-dives on interesting people.
Show all
