From WikiEducator
Jump to: navigation, search


VmvIcon Objective.png

: JS for Accessibility

By the end of this page you will be able to:

  • Add JavaScript functions to assist in accessibility

Text resizing

Example 1

A small bit of JavaScript based on code from Eric Wendelin (2008)[1] that will allow a user to increase/decrease/reset the font size (I have added the normal code - MV.). If no font size is attached to the body tag a 1.0em (the default) size is created first. Note this is different than resizing the web page(using [Ctrl]+[Wheel on mouse]).

function resizeText(intSize) {
  if ( == "") { = "1.0em";
  if (intSize == "0") { = "1.0em";
  } else { = parseFloat( + (intSize * 0.2) + "em";

Create three images [A^] [A] [Av]

<img id="textplus" alt="Increase text size" src="images/TextPlus.jpg" onclick="resizeText(1)" />
<img id="textnormal" alt="Normal text size" src="images/TextNormal.jpg" onclick="resizeText(0)" />
<img id="textminus" alt="Decrease text size" src="images/TextMinus.jpg" onclick="resizeText(-1)" />

Example 2

<title>Creating a JavaScript Zoom feature</title>
<script type="text/javascript">
function fnTxtSmall() {
	var objZoom = document.getElementById("container").style;
	// note that you can't attach fontStyle to the objZoom definition
    objZoom.fontSize = "80%";   
<div id="container">
  <span onclick = "fnTxtSmall()">[&lt;]</span> A &gt;
  <p> click on the [&lt;] above to reduce the font size of this page</p>p>
  <h2>This is a heading</h2>
  <p>Adding a zoom feature can make enlarging the text on a web page easy for your users</p>
  <p>On a touch device you could use the pinch gesture</p>
  <p>On a PC you can hold the ctrl key and rotate your mouse scroll</p>
  <p> You can flash up this heaps.. for example, add a reset and enlarge<p>

VmvIcon References.png References

  1. Wendelin, E. (2008) Change Text Size On Click With Javascript. Retrieved October 7, 2009 from

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Accessibility. (2022). In WikiEducator/VirtualMV wiki. Retrieved August 20, 2022, from http:    (zotero)