Make your web­site eas­ier to read for peo­ple with dyslexia

Created: Mon Apr 8 02:49:03 CEST 2019

Last mod­i­fied: Mon Apr 8 15:52:41 CEST 2019


In this tu­to­r­ial you will learn how to add a but­ton to your site so that people with dyslexia can read your site more eas­ily af­ter click­ing on it.

Basically, when peo­ple will click on the I have dyslexia” but­ton, the font will change to OpenDyslexic.

You can try it by click­ing on the but­ton at the top of this page.

Download the font files

here

Copy them all at the root of your web­site.

Then, cre­ate a OpenDyslexic.css file at the same place.

Declaring cus­tom fonts in CSS

@font-face {
    font-family: OpenDyslexic;
    src: url(OpenDyslexic-Regular.otf);
}
@font-face {
    font-family: OpenDyslexic-Bold;
    src: url(OpenDyslexic-Bold.otf);
}
@font-face {
    font-family: OpenDyslexic-Bolditalic;
    src: url(OpenDyslexic-Bolditalic.otf);
}
@font-face {
    font-family: OpenDyslexic-Italic;
    src: url(OpenDyslexic-Italic.otf);
}

The but­ton

<a class=a href=#>not dyslexic?</a>
<a class=b href=#easy>dyslexic?</a>

Add id=easy to <body>.

<body id=easy>

Now, when one click on the sec­ond link, the whole body will be “tar­geted. Clicking on the first will detarget” <body>.

CSS can de­tect if an el­e­ment is cur­rently tar­geted.

body {
  font-family: WhateverFontYoureNormallyUsing;
}

body:target {
  font-family: OpenDyslexic;
}

You can take ad­van­tage of this to only show one of the but­ton de­pend­ing on the cur­rent set­ting.

body a.a {
  display: none;
}

body:target a.a {
  display: initial;
}

body:target a.b {
  display: none;
}

Bonus

Don’t for­get to take ad­van­tage of other vari­a­tions of the font.

body:target b {
  font-family: OpenDyslexic-Bold;
}
body:target i, body:target em {
  font-family: OpenDyslexic-Italic;
}
body:target b > i, body:target b > em {
  font-family: OpenDyslexic-Bolditalic;
}
body:target i > b, body:target em > b {
  font-family: OpenDyslexic-Bolditalic;
}

Also here is some style for your but­ton:

a.a,a.b {
  font-family: OpenDyslexic; /* makes sense */
  text-decoration: none;
  background-color: #5ca0d3;
  color: #ececec !important;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px 5px;
  box-shadow: 5px 5px 0px #555;
}

If you want to add this on your own site, you are free to not credit me. You can also show your ap­pre­ci­a­tion in the com­ment sec­tion.

Thanks for read­ing!

source code