Solved

Best way to implement accessibility zoom feature

Posted on 2014-01-14
16
324 Views
Last Modified: 2014-01-21
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.
0
Comment
Question by:mike99c
  • 7
  • 4
  • 3
  • +1
16 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
the following commands zoom the contents of the browser. all you need is to do is inform people of that.

cntrl +

cmd + (mac)
0
 

Author Comment

by:mike99c
Comment Utility
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.
0
 

Author Comment

by:mike99c
Comment Utility
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.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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.
0
 

Author Comment

by:mike99c
Comment Utility
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

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
hi Mike,

sorry. I edited my post. please see above.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 18

Expert Comment

by:bruno
Comment Utility
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

0
 

Author Comment

by:mike99c
Comment Utility
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.
0
 
LVL 18

Accepted Solution

by:
bruno earned 500 total points
Comment Utility
It is non-standard, but should work on IE as well:
http://css-tricks.com/almanac/properties/z/zoom/

As that article mentions, if you like this behavior, zoom with a combination of css transforms should get you the whole way....however the "scale" transform pushes things up and left from center, doesn't work quite the same way as "zoom"...I'm not sure the best way to mimic the zoom effect with it.

http://codepen.io/jlbruno/pen/nmdxc
0
 

Author Comment

by:mike99c
Comment Utility
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

0
 

Author Comment

by:mike99c
Comment Utility
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.
0
 

Author Closing Comment

by:mike99c
Comment Utility
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.
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
Best alternative I've seen is to provide a link with instructions on how to use the built in zoom feature.

yup.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now