Making the Web More Readable for People with Dyslexia

January 15th, 2013 7 Comments

Editor’s note: Here’s another post from Mark Vilrokx (@mvilrokx), detailing some hacking he did to help his daughter, who has Dyslexia, read web pages.

This is an awesome idea, and I love hacking for good. I’m not alone, e.g. Marco Arment has added OpenDyslexic to Instapaper. We need more of this. Anyway, read on for Mark’s story and find the comments here or on his original post.

Note: WordPress strips out JavaScript by default, so if you want Mark’s bookmarklet, head over to his original post and drag the bookmarklet link to your Bookmarks bar to install it.

My wife and I recently found out that our 9 year old daughter has Dyslexia so lately I have done some research on solutions that could make her life easier.  That is how I stumbled upon OpenDyslexic, “a new open sourced font created to increase readability for readers with dyslexia”.  There is some science behind all this, which I will spare you the details of but when I showed it to my daughter, she said it was much easier to read for her, so I decided that all websites should use this font!  Since it’s too much work to call all web designers and demand that the make the web more readable with this font, I came up with something more practical.  I created a bookmarklet to apply the font, and a few other style changes that improve readability, to any website.  It injects some CSS into the current webpage which then gets applied to the current web page, giving me exactly what I need. The CSS looks like this:

Pretty simple, it loads the Web Font from the defined URL into the browser (@font-face) and we then apply this to ALL elements on the page (font-family:opendyslexic !important;). Obviously this screws up some of the layout, so the bookmarklet is best applied on blog style websites or websites with lots of text, but it will work on any website. So go ahead, drag the bookmarklet to your bookmarks and apply it to your favorite website and let me know what you think.


Possibly Related Posts

7 Responses to “Making the Web More Readable for People with Dyslexia”

  1. Jim Says:

    Hi – this looks brilliant – thanks for the info. Would you mind explaining how I could go about setting up a bookmarklet please, as I know some people with dyslexia and I’d love to recommend this to them, but I’d need to give them some detailed instructions about how to set it up. I’m happy to write them myself, but I’m just not sure how to go from your post, to converting a web page to use the dyslexia font.

    Any advice much appreciated.

    Thanks!

  2. Jake Says:

    Maybe Mark can share his source on GitHub? I’ll ask him.

  3. mvilrokx Says:

    Hi Jim – it seems that something went wrong when Jake re-posted my orignal post and so the actual bookmarklet is missing from this blog. If you go to the orignal post on my blog (http://allthingsrails.com/post/40586127585/making-the-web-more-readable-for-people-with-dyslexia), you (and anybody else) can just drag and drop the word “bookmarklet” from the blog text to their bookmarks, that is all you have to do. Then, whenever you visit a webpage and want to apply the OpenDyslexic font to that webpage, just click on the bookmarklet. This screencast demonstrates the process: http://www.youtube.com/watch?v=xAdRyUV9Xv8

    Hope this helps.

  4. mvilrokx Says:

    Hi Jake, maybe you can add the bookmarklet itself to the blog post here, it is missing.

  5. Jake Says:

    Sorry, didn’t notice that. WP strips out JS. Will send people to your post for the bookmarklet.

  6. Jim Says:

    Thanks very much for your help Mark :-)

  7. Making websites easier to read for dyslexic users | Burton Figg Says:

    [...] I read on The Appslab about a tool that Mark Vilrokx created which allows users to swap the font used on any website to [...]

Leave a Reply