VirtualMV/JavaScript/Accessibility

From WikiEducator
Jump to: navigation, search




Overview

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 (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  if (intSize == "0") {
    document.body.style.fontSize = "1.0em";
  } else {
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (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

<html>
<head>
<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%";   
}
</script>
</head>
<body>
<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>
   </div>
</body>
</html>

VmvIcon References.png References

  1. Wendelin, E. (2008) Change Text Size On Click With Javascript. Retrieved October 7, 2009 from http://davidwalsh.name/change-text-size-onclick-with-javascript

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Accessibility. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 21, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Accessibility    (zotero)