digitec for dyslexics: breaking down barriers on the Internet

Dominik Bärlocher

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:

1. Download Google Chrome.
2. Install the browser extension.
3. Refresh digitec.ch or the page you’re on.
4. 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

The world is full of barriers: Persons with reduced mobility and in wheelchairs can't climb the stairs that are everywhere. Blind people often seek their way for lack of raised markings and signs in Braille. But there’s help out there. Organisations such as ProInfirmis and the Schweizerischer Blindenbund (Swiss Federation of the Blind) campaign on a social and political level to make the world accessible to disabled people.

The Internet is far from accessible to everyone; especially those who have a disorder such as Dyslexia. Dyslexia is a learning disorder that involves difficulty reading and writing. It may be caused by brain damage due to a stroke or an accident or may be inherited. Luckily, there are also organisations that help dyslexics, such as the Swiss Dyslexia Association, which works at making the Internet accessible to everyone.

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

In February 2017, author Lauren Hudgins amused and amazed the world in her blog post titled «Hating Comic Sans is Ableist». Ableism is an invented word that describes discrimination based on ability. It's like racism but for ability. In her post, Hudgins describes how her sister’s world changed when she discovered the font Comic Sans.

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.

In short: Boer's font Dyslexia gave him and about 120,000 other dyslexics new access to writing. The Swiss Dyslexia Association also recommends using this font in an info sheet (available in German only).

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

  "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
}

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.

A Uniform Resource Identifier (URI) is a string of characters that’s usually coded in Base64 and unambiguously identifies a particular resource. In other words: I can pass on an entire font to a CSS without having to host the font anywhere. As the URI is really long, I abbreviate it. If you’d like to see its full epic length, check out all extension files in the GitHub repository.

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');
}

I make use of the following elements:

• @font-face: Import of a font via CSS
• @font-face > font-family: I name the font in the context of the extension. I choose the name I use below – it’s a free choice.
• src: The URI
• :not(.el):not(.fa):not([class*="Icon"]):not([class*="icon"]): Exceptions for symbol fonts such as Font Awesome or Elusive Icons. Instead of defining these exceptions separately, I instruct the CSS to overwrite anything that is not an icon.
• !important: CSS designers don't like seeing !important used, but it makes sense for reliable CSS injection. !important tells the browser not to ignore this line, no matter what the rest of the code says.

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.

Dominik Bärlocher

Senior Editor

dominik.baerlocher@digitecgalaxus.ch

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.

Follow

---

Computing

Follow topics and stay updated on your areas of interest

Follow topic

These articles might also interest you