asked on

Best way to implement accessibility zoom feature

I need to implement a webpage zoom feature the kind of which you can see on some accessible websites where you have "A A A" starting from the smallest to highest font size.

I need this to work on all the latest browsers and I understand there isn't any CSS3 support for this. I need to be able to change the scale of all page elements and not just the text.

Any solution using JQuery/CSS/HTML5 would be appreciated.

Gary

Something like this
http://jsfiddle.net/GaryC123/T4bvr/2/

jquery

$(".smaller").click(function(){
  $("body").css("font-size",parseInt($("body").css("font-size"))-2+"px") 
})
$(".larger").click(function(){
  $("body").css("font-size",parseInt($("body").css("font-size"))+2+"px") 
})

Open in new window

HTML

<body>
<a class="smaller">-</a> Size
<a class="larger">+</a>
<div>Some text</div>
</body>

Open in new window

Kyle Hamilton

the following commands zoom the contents of the browser. all you need is to do is inform people of that.

cntrl +

cmd + (mac)

mike99c

ASKER

Thanks for the solution shown here: http://jsfiddle.net/GaryC123/T4bvr/2/

Unfortunately all this does is scale the font size but I want it to scale the entire page, images and all.

mike99c

ASKER

Thanks kozaiwaniec, I realise there are browser commands to scale the page but my post is specifically about implementing a script to do this on the webpage.

Kyle Hamilton

mike99c,

sometimes the best solution is to use what is natively available, and give the user simple instructions. There is little advantage to creating your own button for something that is already available.

you could trigger the css zoom property with js, but this will only work in IE and Chrome. Not FF.

Contrary to what I posted earlier, and probably for security reasons you cannot trigger keypress events with js.

There is no "easy" solution to what you are asking for. If you wanted to zoom everything on the page with js, the js would need to be aware of all the elements on the page, and resize them accordingly, images, fonts, etc.. And depending on how you built your page to begin with, this would be less or more difficult to implement.

mike99c

ASKER

Hi kozaiwaniec. I tried to implement your code here and it does not seem to do anything.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

	$('.item').click(function(){
						
		$( document.body ).trigger({
			type: 'keypress',
			which: 37,
			keyCode: 37
		});
		
	});
  
});
//]]>
</script>
</head>

<body>

    <h2>This is a sub heading</h2>
    <p>This is the first line of text.</p>
    <p>This is the second line of text.</p>
    <p><a class="item" href="#">Click to zoom</a></p>

</body>
</html>

Open in new window

Kyle Hamilton

hi Mike,

sorry. I edited my post. please see above.

Gary

Zooming with js or css will work, the problem is you will end up with a page that is not scrollable. (I have tried a number of ways to get it to work and no go.)
There is this plugin here
http://jaukia.github.io/zoomooz/

And it works well for individual elements but not full page.

bruno

You can accomplish something similar to this by using the css "zoom" property.

See my example here:
http://codepen.io/jlbruno/pen/Hyosk

<a id="sizeSmall">a</a>
<a id="sizeMed">A</a>
<a id="sizeLarge"><big>A</big></a>
<br>
<img src="http://assets.codepen.io/images/codepen-logo.svg">
<p>Lorem ipsum dolor sit amet.</p>

Open in new window

$('#sizeSmall').on('click',function(e) {
  $('body').css('zoom', 1);
});
$('#sizeMed').on('click',function(e) {
  $('body').css('zoom', 1.2);
});
$('#sizeLarge').on('click',function(e) {
  $('body').css('zoom', 1.4);
});

Open in new window

mike99c

ASKER

Hi brunobear, thanks for this solution. Is this a non standard feature? This only seems to work on Chrome and Safari.

However this is a good compromise and one thing I could do is detect if the browser is IE or Firefox and pop up instructions on how to access the browser zoom.

ASKER CERTIFIED SOLUTION

bruno

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mike99c

ASKER

I tried to apply the code to a very simple HTML page here and I could not get it to work. The JQuery does trigger when you click. Do I have to do something else to the styles?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accessibility button</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
	padding: 5px;
	color: black;
	margin: 0 auto;
	width: 100%;
};
#sizeSmall { font-size: small };
#sizeMed { font-size: medium };
#sizeLarge { font-size: large };
</style>
</head>

<body>
<h1>Test</h1>

<!--ACCESSIBILITY BUTTON--> 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

	$('#sizeSmall').on('click',function(e) {
	  $('body').css('transform', 'scale(1)');
	  return false;
	});
	$('#sizeMed').on('click',function(e) {
	  $('body').css('transform', 'scale(1.2)');
	  return false;
	});
	$('#sizeLarge').on('click',function(e) {
	  $('body').css('transform', 'scale(1.4)');
	  return false;
	});
  
});
//]]>
</script>

<div class="accessibility-button"> <a id="sizeSmall" href="">A</a> <a id="sizeMed" href="">A</a> <a id="sizeLarge" href="">A</a> Accessibility </div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus sem, interdum vitae tellus eu, sagittis viverra neque. Aliquam sollicitudin, urna ac gravida auctor, justo diam tempus nunc, sed laoreet tortor orci vel lacus. Vivamus porta, lacus sit amet congue convallis, felis nunc tincidunt libero, id rhoncus neque nisi sed nisl. Pellentesque faucibus felis ut purus mattis, at interdum magna gravida. Sed sodales adipiscing dui sit amet tincidunt. Maecenas vestibulum condimentum pretium. Sed vitae nisi et quam imperdiet vulputate. Vivamus ultrices malesuada congue. Ut id placerat diam, sed faucibus nisi.</p>
  <p>Suspendisse aliquet quam dolor, vel pharetra ante adipiscing sit amet. Ut ut risus nulla. Quisque in aliquet mauris, sit amet ultricies felis. Ut et est ac orci lobortis tincidunt in auctor quam. Integer varius tortor enim. In hac habitasse platea dictumst. Nulla non nibh ultrices, semper lorem elementum, lobortis sem.</p>
</div>

</body>
</html>

Open in new window

mike99c

ASKER

OK I have discovered that I needed a later JQuery version. I changed it to 1.10.2 and it worked fine.

However I did notice the resolution of the zoomed page was not as good as the browser zoom.

mike99c

ASKER

Doesn't actually initiate the browser zoom feature and as a result the resolution is not as good. However it does seem to be the best solution.

bruno

Yeah the .on() method wasn't in older versions of jQuery...i think it was added around 1.7.

No way to trigger the real browser zoom feature. Best alternative I've seen is to provide a link with instructions on how to use the built in zoom feature.

Anyway, glad I could help!

Kyle Hamilton

Best alternative I've seen is to provide a link with instructions on how to use the built in zoom feature.

yup.