Is there any simple way of doing a accessibility text for the sightly impaired people.

 

I have this college project and i need a code that will change the contains text size on every page. something like www.firstgroup.com has. It would have to be on the site rather than View -> Text Size-> Increase/Decrease.

 

Hope one of some of guys can provide me with that little code.

 

Regards

Danny.

You can use javascript to change a style property of an element.

 

For example, increasing the font size of all p tags by 1 would be something like:

 

var ptag = document.getElementsByTagName("p");
for (var i=0; i<ptag.length; i++)
 { 
  ptag[i].style.fontSize += 1;
 }

 

I'm not sure if you can use the += construct (which adds one to whatever the current value is, or if you would need to do something like:

 

currentFontSize = 12; // set this to the default size

function increaseFontSize(){
var ptag = document.getElementsByTagName("p");
currentFontSize = currentFontSize + 1;
for (var i=0; i<ptag.length; i++)
 { 
  ptag[i].style.fontSize = currentFontSize;
 }
}

 

of course you will need a decrease font size function as well, and you will probably need to do it for more than just the P element

Another way is by switching stylesheet using Javascript. And you also have to keep the information in cookie so that when the user refreshes the page the selected style doesn't change...

Are you familiar with PHP?

If so, I can help you out.

Are you familiar with PHP?

If so, I can help you out.

Nope not really.

 

But i need to use javascript i would prefer to use that cos i need to it a requirement which i need and i haven't got one yet.

Ok so if you want to use javascript, how much has what me and subhajit said helped? Do you know how to get what you want from that or do you need more help? How familiar are you with Javascript?

 

Here is a good page on cookies, as what subhajit said is right, whether you change the whole stylesheet or just the sizes of certain fonts, you will need to store that info in a cookie.

all i know for javascript is how to import it to the page and use like for example:

 

java script:fontsize:15px

 

So basically from what i know is not much of javascript i would require most help, if possible.

 

am currently upload the site to let u guys have a preview of it really:

 

http://deafraiders.zymichost.com

 

As u will see some of the pages are still to be done.

 

Regards,

Danny

Ok, i didn't look at the first group website till just now, and I thought u wanted an increase/decrease button. They however have a choice of 3 sizes.

 

To do this it will be easiest to create multiple stylesheets.

Have a main one with all the styling in.

 

Then have one with the default text sizes only, one with bigger, and one with biggest (these should contain nothing but font size declarations).

 

Then I suggest you follow this css-switcher tutorial, it contains a script for you to download which does all the cookie maintenance etc for you. http://www.spoono.com/javascript/tutorials...orial.php?id=18 It also explains exactly how to use the script and links to an article explaining how the script works.

 

I hope this works for you!

Ok, i didn't look at the first group website till just now, and I thought u wanted an increase/decrease button. They however have a choice of 3 sizes.

 

To do this it will be easiest to create multiple stylesheets.

Have a main one with all the styling in.

 

Then have one with the default text sizes only, one with bigger, and one with biggest (these should contain nothing but font size declarations).

 

Then I suggest you follow this css-switcher tutorial, it contains a script for you to download which does all the cookie maintenance etc for you. http://www.spoono.com/javascript/tutorials...orial.php?id=18 It also explains exactly how to use the script and links to an article explaining how the script works.

 

I hope this works for you!

I will give this a go and report back here to tell you how i got on. Cheers much appreciate it.

Is there any simple way of doing a accessibility text for the sightly impaired people.

 

I have this college project and i need a code that will change the contains text size on every page. something like www.firstgroup.com has. It would have to be on the site rather than View -> Text Size-> Increase/Decrease.

 

Hope one of some of guys can provide me with that little code.

 

Regards

Danny.

 

The easy way is to use em's or %'s for font sizes so the visitor can resize to however they want using their browser or other device. Using on page text resizing widgets won't help people every time because they're usually limited to the 2 or 3 sizes that you dictate. Also it's wrong to assume people with visual impairments always want bigger text - some people actually find smaller text esaier to read.

 

There are two things you can do in your stylesheet to help...

 

1. Specify em or % font sizes

2. Specify line-height for all blocks of text, this makes a world of difference, try something like 1.5em or 150%

The easy way is to use em's or %'s for font sizes so the visitor can resize to however they want using their browser or other device. Using on page text resizing widgets won't help people every time because they're usually limited to the 2 or 3 sizes that you dictate. Also it's wrong to assume people with visual impairments always want bigger text - some people actually find smaller text esaier to read.

 

There are two things you can do in your stylesheet to help...

 

1. Specify em or % font sizes

2. Specify line-height for all blocks of text, this makes a world of difference, try something like 1.5em or 150%

what does "em" actually stand for? and what does it do?

em's and %'s are called relative font sizes.

 

By default most web browsers default to 16px text size, so 1em or 100% = 16px

 

If you specify your default font size to be 100% and set a font size on an element (like a P tag) of 0.5em the text will display at 8 px, similarly with %'s if I set it at 75% it will display at 12px.

 

Another reason not use use px is that Internet Explorer won't resize them...

http://www.456bereastreet.com/archive/2007...ized_in_pixels/

 

In fact the WCAG (web Content Accessibilty Guidelines) specifically state you should not use px for font sizing...

 

http://acc.nics.gov.uk/comprehensive/confo...cks/comall.html

http://www.w3.org/TR/WCAG10/#gl-structure-presentation

hello again, one small question i have the site map as <li> and <ul no <p> how will this be resized?

 

Also

Ok, i didn't look at the first group website till just now, and I thought u wanted an increase/decrease button. They however have a choice of 3 sizes.

 

To do this it will be easiest to create multiple stylesheets.

Have a main one with all the styling in.

 

Then have one with the default text sizes only, one with bigger, and one with biggest (these should contain nothing but font size declarations).

 

Then I suggest you follow this css-switcher tutorial, it contains a script for you to download which does all the cookie maintenance etc for you. http://www.spoono.com/javascript/tutorials...orial.php?id=18 It also explains exactly how to use the script and links to an article explaining how the script works.

 

I hope this works for you!

 

Where do i get the swanky.css and the groovy css from that link?

 

Regards

Danny

Hi,

 

To answer both your questions, you need to develop your own stylesheets! You don't get the groovy and swanky stylesheets because they won't fit your page and this example is not for font size changing in particular.

 

You need to develop several style sheets. It will be easiest if you keep all of your non-font-size styling in one main sheet. This should contain all of your css styles except for anything which specifies font size.

 

Then create as many sizing style sheets as you want for example

normal.css

bigger.css

biggest.css

 

Each one should contain the font size you want for every element that has a font size, so all of your p's, ul's, li's, h1's, a's,strong's etc at each level.

 

so normal might have

p {
  font-size: 12px;
}

bigger might have

p {
  font-size: 18px;
}

and biggest might have

p {
  font-size: 24px;
}

 

(as well as lots more declarations for other elements).

 

As bluedreamer said though, it is best to define font sizes in em's or % because then people can resize the font themselves.

Hi,

 

To answer both your questions, you need to develop your own stylesheets! You don't get the groovy and swanky stylesheets because they won't fit your page and this example is not for font size changing in particular.

 

You need to develop several style sheets. It will be easiest if you keep all of your non-font-size styling in one main sheet. This should contain all of your css styles except for anything which specifies font size.

 

Then create as many sizing style sheets as you want for example

normal.css

bigger.css

biggest.css

 

Each one should contain the font size you want for every element that has a font size, so all of your p's, ul's, li's, h1's, a's,strong's etc at each level.

 

so normal might have

p {
  font-size: 12px;
}

bigger might have

p {
  font-size: 18px;
}

and biggest might have

p {
  font-size: 24px;
}

 

(as well as lots more declarations for other elements).

 

As bluedreamer said though, it is best to define font sizes in em's or % because then people can resize the font themselves.

Ok cheers mate, am going to try it out after my dinner.

how do an another one for my js page cos right now it only has 2?

 

Or do u not need to put one in?

how do an another one for my js page cos right now it only has 2?

 

Or do u not need to put one in?

 

You Query is not clear, please make it a bit clear..

The styleswitcher.js:

 

function setActiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
  a.disabled = true;
  if(a.getAttribute("title") == title) a.disabled = false;
}
 }
}

function getActiveStyleSheet() {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
 }
 return null;
}

function getPreferredStyleSheet() {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
   && a.getAttribute("rel").indexOf("alt") == -1
   && a.getAttribute("title")
   ) return a.getAttribute("title");
 }
 return null;
}

function createCookie(name,value,days) {
 if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
 }
 else expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

window.onload = function(e) {
 var cookie = readCookie("style");
 var title = cookie ? cookie : getPreferredStyleSheet();
 setActiveStyleSheet(title);
}

window.onunload = function(e) {
 var title = getActiveStyleSheet();
 createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

 

I want to add 3 options of text sizes whould i need to add another code for my other CSS in the javascript page?

 

Regards

Danny

Got it working i wan to thank everyone who helped and posted in here:

 

check it out: http://deafraiders.zymichost.com/indextest2.htm

 

have a problem deciding where to place it, is it best placed the top or the bottom to the right or move the footer at the top as well with the accessibility text?

Got it working i wan to thank everyone who helped and posted in here:

 

check it out: http://deafraiders.zymichost.com/indextest2.htm

 

have a problem deciding where to place it, is it best placed the top or the bottom to the right or move the footer at the top as well with the accessibility text?

 

From my point of view I think it will be better if you put that section on right side of Contact Us link on top ( on right side of it there is a blank white space).

How do i set that down there? Would i need to copy the styles.css?

I think it should stay at the top but you need to style the words "Text Size" and make them a bit bigger so people can find it.

 

Also, your navigation text does not get any bigger so people may not be able to find their way off of the front page?

How do i set that down there? Would i need to copy the styles.css?

 

Yes you have to do it by using style.css

I think it should stay at the top but you need to style the words "Text Size" and make them a bit bigger so people can find it.

 

Also, your navigation text does not get any bigger so people may not be able to find their way off of the front page?

 

 

If i do the resize the text on navbar it goes all funny.....out of the place really any ideas how to fix it i've tried resizing the width of #navbar

hey all can someone tell me why this contact us page is not changing the text size?

According to Firebug,

 

setActiveStyleSheet is not defined

onclick(click clientX=0, clientY=0)

According to Firebug,

 

setActiveStyleSheet is not defined

onclick(click clientX=0, clientY=0)

Huh?

2 text problems:

 

1. You will see that index page is changing the size but coaches, hires and driver and clients are not changing the size as well as Terms and Conditions but everything else is. It worked last week then my lecture changed it to make headings. I've tired comparing the codes but can't see where the error is.

 

2. When you go to home the text is shown large but i don't want it at large for everyone i want it to start 100% size. I know it stored as a cookie but even if i delete the cookie i still shown as that size(large) when the page is open.

 

Link: McDades buses

 

Regard

Raiders

Edited May 20, 200818 yr by Deaf Raiders