Style switcher/text enlarge option - implementation ideas

daymobrew · 28-05-2010 11:34am #1

I've been asked to add a Text Enlarge option to an existing site. It's basic html files (i.e. not in a cms) and the stylesheet is quite simple, though it has pixel sizes for fonts. For example:

.standard {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-align: justify}

I am thinking about changing the pixel sizes to em or percentage and then added a changeable stylesheet before the current one e.g.

<link rel="stylesheet" href="base-font-size.php" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">

My idea for base-font-size.php is to set body font size based on what the user selected from a basic menu on the top right (like <a href="http://www.ncbi.ie">NCBI</a>).

I would use a cookie to store the chosen size.

base-font-size.php will echo something like:

body { font-size: 12px; /* or 14px or 16px etc. */

Is this a good approach?

amen · 28-05-2010 1:50pm

why would you want to do this? Have you considered the impact on your site if the font increases? What happens when the site owner wants anothere increase? where do you stop?

most modern browsers allow the user to increase the font/text size.

daymobrew · 28-05-2010 2:05pm

amen wrote: »

why would you want to do this? Have you considered the impact on your site if the font increases? What happens when the site owner wants another increase? where do you stop?

most modern browsers allow the user to increase the font/text size.

Good questions. I will raise them with my client.

It is a table based web site, with table and cell widths already as percentages.

Edit: It is the site visitor that will invoke the font size increase, not the site owner.

daymobrew · 28-05-2010 2:23pm

I like the way the Department of the Environment does it - they have 4 stylesheets - the main one and then 3 alternates that set the body font size and javascript to select between the alternate stylesheets.

body{ font-size: 60%; }

body{ font-size: 0.7em;

body{ font-size: 90%; }

Liam Byrne · 30-05-2010 11:46am

Increasing font sizes like this is a massive job, as it changes everything text-wrapping and inline backgrounds, etc.

I'd suggest avoiding it.......it's unnecessary and - at best - it'll make the screen and layout look untidy.

As long as you use an appropriate font size to begin with, the user will be used to that size on their resolution, and can use their standard browser controls - that they're already used to - to adjust if they so wish.

mewso · 01-06-2010 2:08pm

I've been asked to do it myself before and knocked it on the head straight away. Basically it's redundant. Anyone who needs to resize text can use the browser controls or whatever assistive technology they use. They will be far more familiar with what they are using. A widget to do this is just an attempt to pay lip service to accessibility when all the work for accessibility should be done in the css and html. It's generally some management bod who never resizes their text who thinks it's a good idea.

daymobrew · 01-06-2010 5:10pm

mewso wrote: »

It's generally some management bod who never resizes their text who thinks it's a good idea.

Bingo.
I mentioned all of this (though I omitted the part that the people who will need the larger text probably know how to use the browser controls) but they still want it done.

They are paying - I can do it in clear conscience as I have been open with them about it being unnecessary.

mewso · 01-06-2010 5:50pm

Well I wouldn't bother with switching style sheets if I had to do it. I'd simply ensure all fonts are specified as percentages in my css and then alter it at body level using jquery:-

$("a.larger").bind("click", function()   {
    $("body").css("fontSize", "1.5em");
    return false;
});

etc.

cormee · 01-06-2010 5:58pm

mewso wrote: »

I've been asked to do it myself before and knocked it on the head straight away. Basically it's redundant. Anyone who needs to resize text can use the browser controls or whatever assistive technology they use. They will be far more familiar with what they are using. A widget to do this is just an attempt to pay lip service to accessibility when all the work for accessibility should be done in the css and html. It's generally some management bod who never resizes their text who thinks it's a good idea.

The mistake you and some other posters on this thread are making is assuming that every visitor to your site is an expert user with the same physical abilities as yourself. In other words you're assuming all users will understand the inner workings of a browser and have the physical ability to access the relevant browser controls.

There are two groups who need text resizing widgets - novice users, they won't know where the option to resize text is, and Switch users. Switch access users suffer from severe motor disabilities and cognitive impairments, they tend to navigate by tabbing and most likely lack the coordination to resize the text using the standard browser controls.

You're not advocating all-inclusive accessibility what you are advocating is conditional accessibility based upon their experience and physical abilities and that flies in the face of the principles of universal design/accessibility.

mewso · 01-06-2010 7:17pm

cormee wrote: »

The mistake you and some other posters on this thread are making is assuming that every visitor to your site is an expert user with the same physical abilities as yourself. In other words you're assuming all users will understand the inner workings of a browser and have the physical ability to access the relevant browser controls.

There are two groups who need text resizing widgets - novice users, they won't know where the option to resize text is, and Switch users. Switch access users suffer from severe motor disabilities and cognitive impairments, they tend to navigate by tabbing and most likely lack the coordination to resize the text using the standard browser controls.

You're not advocating all-inclusive accessibility what you are advocating is conditional accessibility based upon their experience and physical abilities and that flies in the face of the principles of universal design/accessibility.

Thanks for pointing out my mistake. I should have realised that despite the simple question more detailed discussion might be required. My preference would be a "How do I resize the font on this and other sites?" link. I see the point about switch access users but even they would certainly appreciate knowing how to set the font size for all sites not just the cool web 2.0 site they stumbled upon. In fact I'd like to see some research on it as a lot of them may have set this for themselves already or chosen some third party software to do it for them or set it at OS level if they do have issues with font size.

If the research shows that a widget like this does more good than harm then fine I'm advocating conditional accessibility and need to change my approach.

cormee · 01-06-2010 8:32pm

mewso wrote: »

Thanks for pointing out my mistake. I should have realised that despite the simple question more detailed discussion might be required. My preference would be a "How do I resize the font on this and other sites?" link. I see the point about switch access users but even they would certainly appreciate knowing how to set the font size for all sites not just the cool web 2.0 site they stumbled upon. In fact I'd like to see some research on it as a lot of them may have set this for themselves already or chosen some third party software to do it for them or set it at OS level if they do have issues with font size.

If the research shows that a widget like this does more good than harm then fine I'm advocating conditional accessibility and need to change my approach.

The link you're proposing isn't feasible, it would only confuse matters and hinder accessibility in other ways.

You'd need to provide details on how to resize text size on all the different versions of all the different browser types available. You'd then run into other issues - switch users having to navigate through the page, creating the content for users with learning disabilities, dyslexics etc.

The simple fact is, providing a widget solves all of these problems, and when your site is designed with accessibility in mind it takes about 2 hours to implement completely - that's why it's a standard accessibility feature and is a requirement for any of the professional accessibility audits you're likely to encounter.

mewso · 01-06-2010 10:27pm

cormee wrote: »

The link you're proposing isn't feasible, it would only confuse matters and hinder accessibility in other ways.

You'd need to provide details on how to resize text size on all the different versions of all the different browser types available. You'd then run into other issues - switch users having to navigate through the page, creating the content for users with learning disabilities, dyslexics etc.

The simple fact is, providing a widget solves all of these problems, and when your site is designed with accessibility in mind it takes about 2 hours to implement completely - that's why it's a standard accessibility feature and is a requirement for any of the professional accessibility audits you're likely to encounter.

Makes perfect sense but I don't think providing a link to instructions is a negative. I bow to the professional audit.

Style switcher/text enlarge option - implementation ideas

Comments