Text Size for Disabilities

D@Z · 12-21-2006, 07:22 AM

I've seen a couple of website use images, where once clicked, you can increase or decrease the size of the text on the page, making it easier for users with disabilities, such as bad eyesight.

Can anyone point me in the right direction on how to do this? Like is it CSS, JavaScript or any free scripts? Thanks.

Dan · 12-21-2006, 07:34 AM

textsizer.js:

Code:

/*------------------------------------------------------------
	Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
	Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
	Web Site: http://txkang.com
	Script featured on Dynamic Drive (http://www.dynamicdrive.com)
	
	Please retain this copyright notice in the script.
	License is granted to user to reuse this code on 
	their own website if, and only if, 
	this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'p','h1','h2','h3','h4');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
	if (!document.getElementById) return
	var d = document,cEl = null,sz = startSz,i,j,cTags;
	
	sz += inc;
	if ( sz < 0 ) sz = 0;
	if ( sz > 6 ) sz = 6;
	startSz = sz;
		
	if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

	cEl.style.fontSize = szs[ sz ];

	for ( i = 0 ; i < tgs.length ; i++ ) {
		cTags = cEl.getElementsByTagName( tgs[ i ] );
		for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
	}
}

The HTML:

Code:

In your <head>:
<script type="text/javascript" src="textsizer.js"></script>

In your <body>:
<a href="#" onclick="ts('body',1);" title="Make Text Larger">Larger Text</a>
<a href="#" onclick="ts('body',-1);" title="Make Text Smaller">Smaller Text</a>

D@Z · 12-21-2006, 04:42 PM

Great! Thanks, Dan. I will try this out soon when I have some spare time. On my stylesheet for my website my fonts are set to px, does this matter?

Dan · 12-21-2006, 05:13 PM

Originally Posted by D@Z

On my stylesheet for my website my fonts are set to px, does this matter?

I don't think so.

D@Z · 12-22-2006, 05:45 AM

Ok, thanks for your help anyway. The script works great with my news articles.

12-21-2006, 07:22 AM	THREAD STARTER #1 (permalink)
D@Z NamePros Member Join Date: Jun 2004 Location: United Kingdom Posts: 165	Text Size for Disabilities I've seen a couple of website use images, where once clicked, you can increase or decrease the size of the text on the page, making it easier for users with disabilities, such as bad eyesight. Can anyone point me in the right direction on how to do this? Like is it CSS, JavaScript or any free scripts? Thanks.

12-21-2006, 04:42 PM	THREAD STARTER #3 (permalink)
D@Z NamePros Member Join Date: Jun 2004 Location: United Kingdom Posts: 165	Great! Thanks, Dan. I will try this out soon when I have some spare time. On my stylesheet for my website my fonts are set to px, does this matter?

12-22-2006, 05:45 AM	THREAD STARTER #5 (permalink)
D@Z NamePros Member Join Date: Jun 2004 Location: United Kingdom Posts: 165	Ok, thanks for your help anyway. The script works great with my news articles.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)