homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

How deliver different CSS for visually impaired people?

 10:57 am on Jul 31, 2002 (gmt 0)

I am working on a website that requires a version for visually impaired people. Instead of creating two sites I am wondering about delivering either of 2 CSS style sheets.

If a visitor selects the 'visually impaired' version - what is the best method of delivering the right CSS throughout their visit to the site?

I imagine that
- a variable must be passed from page to page
- each page checks the variable and delivers the CSS accordingly



 11:59 am on Jul 31, 2002 (gmt 0)

[visualfriendly.com ]

something some friends of mine have been working on...might be of interest


 12:10 pm on Jul 31, 2002 (gmt 0)

This probably isn't the answer you want but I think it worth the post anyway ;)

The best way to cater to the visually impaired is to write standards complient code (xhtml strict/1.1 being best) and not specifying things like fixed, non variable font sizes. Use em's instead.

If you couple the above with sensible color use and good document structure you're laughing...

Otherwise: I'll assume you're using PHP:


if($site=="visual") {
} else {
<title>Visual example</title>
<link rel="stylesheet" type="text/css" href="<?=$added;?>.css" />
<a href="/anotherpage.php?site=<?=$added;?>">follow this link</a>



 12:14 pm on Jul 31, 2002 (gmt 0)

I've recently found out that percentages can be used to define font size in CSS. (Maybe it's just me, and that was common knowledge!?!)

So, instead of using say ...font-size:10pt;....I'm using .....font-size:80%;

So if you alter text-size in your browser settings (view>text size in IE) the text increases, rather than this being over-ridden by your style sheet.

This assumes a visually impaired person would have text size set at larger or largest which is reasonable I suppose, and means you only need one style sheet.

Hope that's of some help.


 12:23 pm on Jul 31, 2002 (gmt 0)

Did you know about em's ecardiff? IMO even better than percentages: 1em=brower derault size or to be more specific the parent element default text size.

PS: Kapow. If you do anything similar to my php example, make sure you sue JS links or forms to let the user change the site. If you don't you could fall seriously foul of duplicate content issues with Google and the rest of the gang...



 12:59 pm on Jul 31, 2002 (gmt 0)

Thanks Nick_W
> mysite.com?site=visual
I think your on the right lines. But I need a method that maintains the visitors selection throughout their visit to the site. (Yes, I have php) Does that mean each link would be something like this:

<a href="some_page.htm?site=<? print $site ?>">some page</a>

and the style bit would be like this:

<link rel="stylesheet" type="text/css" href="<? print $site ?>.css" />

(I'm still new to php).

> JS links or forms to let the user change the site. If you don't you could fall seriously foul of duplicate content issues with Google and the rest of the gang.

The site must work well on Google etc. I guess that means I need non JS links.
Can this be done???
With duplicate content issues does Google just decide which content to use and then ignore the other?


 1:27 pm on Jul 31, 2002 (gmt 0)

Firest up: Yes like that. But my example does exactly the same, it just uses the shorthand for print: <?=$site;?>

Secondly: If you want to maintain this state then the best way is sessions. Try looking in the manual, they have a very good explanation of how they work. Then either write a script to determine if the user is an SE and only start the session if it is not, or mail me as I've already done one.

Thirdly: JS links will not harm you. I'm just talking about the 'change site' links not all of them. So the SE's don't follow them and get dupicate content.




 1:58 pm on Jul 31, 2002 (gmt 0)

There are some strange compatibility problems with em sizes, especially on Macs, often resulting in impossible-to-read microtext. Percentages behave much more reliably, and I've only had problems with them on MSIE5.0, Win98SE, SP2 (or was it SP1? I forget now) -- a fairly specific and obscure platform.

Be careful with em and % sizes; it's very easy to make a mistake nesting tags and end up with microtext. This simple stylesheet:

div, ol, ul { font-size: .7em; }

...will cause real problems with this HTML:

<li>This will be barely readable</li>
<li>This will be microtext</li>

(This is a coding problem, not a compatibility problem.)

Sometimes, MSIE's leniency can lull you into a false sense of security. I use a third-party blogger which is really cool, but when I had it set to automatically add <p> tags it gave me real problems, but I never noticed. Someone sent me a screenshot of my Blog in Netscape 4, and the text in each paragraph was smaller than the last.

The blogger software was not closing the </p> tags. MSIE (I'd used it to check the blog was OK) had no problems: it closes the last paragraph when it finds a <p> tag. NS4 doesn't, and together with this stylesheet:

p { font-size: 75%; }

gave me microtext. The bits I'd checked in NS4 were the ones I'd coded by hand, and I'd closed all my <p> tags. I assumed the blogger was doing the same: a fatal error.


 2:03 pm on Jul 31, 2002 (gmt 0)

The best way to cater to the visually impaired is to write standards complient code (xhtml strict/1.1 being best)...

I think you may be mistaken. I'm not aware of any accessibility issues related to use of html/transitional instead of xhtml strict. I'm not aware of any relating to standards uncompliant code.

According to the Royal National Institute for the Blind (RNIB), the most popular browser amongst blind users is Internet Explorer 5.x (just like the rest of us :) ), with the Jaws screen reader.

Is there any evidence that standards compliant xhtml strict is more accessible than uncompliant html for current assistive technologies?

BTW: I'm a passionate accessibility advocate. I'm just really worried that folks increasingly assume that xhtml + css = accessibility.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved