Font Size Accessibility

by ashleycam3ron

HTML

<a href="#" id="textsize" alt="Increase text size"><span><strong>Font Size</strong></span></a>

<div id="content" class="container">
  <article class="entry sizeable regular col-md-10 col-md-offset-1">
   Text
  </article>
</div>

CSS

#textsize {
  float: left;
}

#content,
#content .regular {
  font-size: 12px;
}

#content .larger {
  font-size: 16px;
}

#content .largest {
  font-size: 18px;
}

JavaScript

//font-size changer
jQuery("#textsize").on("touchend click", function(event) {
  event.preventDefault();
  if ($(".sizeable").hasClass("regular")) {
    $(".sizeable").removeClass("regular").addClass("larger");
    sessionStorage.fontsize = "larger";
    return;
  }
  if ($(".sizeable").hasClass("larger")) {
    $(".sizeable").removeClass("larger").addClass("largest");
    sessionStorage.fontsize = "largest";
    return;
  }
  if ($(".sizeable").hasClass("largest")) {
    $(".sizeable").removeClass("largest").addClass("regular");
    sessionStorage.fontsize = "regular";
    return;
  }
});