18 replies to this topic

[Jean_Manco]

In my continuing quest to improve accessibility on http://www.building-...ueyonder.co.uk/ , I followed the instructions by Joe Clark to make alternative syle sheets for those with low vision. My styleswitcher is top right, if you want to take a look.

I also want to provide a monochrome version without navigation and other clutter for print. So I created @media within my standard stylesheet. That works fine.

Then when I came to create the alternative stylesheet I did the same. That works fine in Firefox and Opera. You end up with a large print monochrome version. But lo and behold - IE just ignores it. Is there anything I can do?

[yannis]

Jean

Nice to see a post from you here that is not DMOZ related!

What version of IE did you test it in? It may have to do with your browser sniffing routine. I see you used js for this.


Yannis

[Jean_Manco]

IE 6. Are you saying that it looks OK in IE7?

That javascript was only added for the correct rendering of quotes in IE. It shouldn't affect anything else. I'm pretty sure that I had the @media in alt stylesheet problem with IE before I added the javascript. (It was all part of a recent mini-redesign, but stylesheets came first.)

Thanks for looking at the problem anyway.

Edited by Jean_Manco, 01 August 2006 - 02:15 AM.

[bwelford]

This is fascinating, Jean. Thanks for raising this and I love the way you've applied it in your website.

I'm not sure what are the allowable media. I use the following style of code in my main website:

<style type="text/css" media="aural,braille,embossed,tty,tv,screen"> @import "screen.css"; </style>
<style type="text/css" media="print,projection,handheld"> @import "print.css"; </style>

I thought I was including all the media types there. I am then assuming that the device will know what it is and will use the right style sheet.

I'm presuming that zoom as a media type is not yet accepted. Does anyone have the up-to-the minute list of what are acceptable media? Perhaps we have to know for every one of them whether they are accepted by all standards-based browsers such as Firefox and Opera, and also whether IE v.6 and the soon-to-be IE v.7 acknowledge their existance.

You are using Javascript which presumably gives more flexibility in using any stylesheet you like. Or does it?

<later edit>
I see the official W3C list includes only the ones I had above. Here is the link:
http://www.w3.org/TR...tml#media-types
Is anyone aware of what additions are likely to appear soon?

Edited by bwelford, 01 August 2006 - 09:15 AM.

[Jean_Manco]

Zoom is not so much a media type as a style. So the issue I think is whether IE can handle the combination of alternative style sheet and @media print.

I'm not the most technically gifted type, so I may be overlooking something obvious.

[yannis]

I also want to provide a monochrome version without navigation and other clutter for print. So I created @media within my standard stylesheet. That works fine.

Then when I came to create the alternative stylesheet I did the same. That works fine in Firefox and Opera. You end up with a large print monochrome version. But lo and behold - IE just ignores it. Is there anything I can do?

Jean I had a look as a print preview to see what i.e does and it showed a black and white page with the exceptions of the image and the frame. It did not render the image position though properly. I am not sure if that was your question or I have missed the point! At preview you need to adjust the scale to compare it properly.

I have not gone through the javascript carefully but try and use this just after the metatags. You can use @import to selectively load it.

<link rel="stylesheet" type="text/css" media="print, handheld" href="print.css">

This suggestion is very similar to what Barry suggested above.

What happens if the javascript is switched off? All your work is gone! Personally I would have a page that does not render 100% correctly rather than do browser sniffing. If you absolutely need to have it rather use php. (I also visited the site using AMAYA as is the nearest thing to a standards compliant browser and picked up a couple of minor errors).

By the way, very interesting pages and the site looks good! Personally I prefer the single column version (your easy read) it reads so much better. Thinking about it the Firefox print version really looks nice. white and black and a bit of colour very simplistic design and pleasant to the eye, if I may say!

Regards

Yannis

PS While we are on the subject of browsers could you use your influence in DMOZ to split the category on browsers to 'standard compliant' and 'non-standard compliant'?

[Jean_Manco]

Yannis - I really appreciate your efforts on my behalf. Which version of IE are you using?

What I see in Firefox for zoom print: exactly as per my specifications: no header, no navigation, large print, black on white text, image on right. (By mistake I left a pale yellow border round a box on the front page. I'll fix that.)

What I see in IE6: All the header and navigation stuff is there, standard print, the image is on the left. It looks like my standard style, except with some styling missing (all the stuff I import from a basic css file), and on a white background (which is the default for print.)

The problem with using

<link rel="stylesheet" type="text/css" media="print, handheld" href="print.css">

in the header is that the person printing out would get the exact same print-out whether they read the site in standard or zoom style. The print instructions in that set-up are in a print.css file which would come up for any print-out of the page.

What I am trying to do here is have two different print styles, one for the standard reader and one for the person who needs large print. So the two separate style sheets each contain instructions using @media print.

What happens if the javascript is switched off? All your work is gone!

Only my quotation marks. And that is only for those using IE. I weighed the pros and cons. The <q> mark-up is useful for screen readers apparently. So I wanted to use it, but it won't work in IE.

I also visited the site using AMAYA as is the nearest thing to a standards compliant browser and picked up a couple of minor errors.

Thanks. I'd be happy to correct, if you point them out.

By the way, very interesting pages and the site looks good!

Thank you so much. :flowers:

Edited by Jean_Manco, 01 August 2006 - 12:50 PM.

[Jean_Manco]

Here is someone who has done the same sort of thing, but much more professionally: http://littleblueplane.com/ . Although she gives a choice of on-screen styles, I notice that she offers only one print style. So that is probably the standard way to do it.

[Mike Cherim]

Hello Jean,

Please look in the source of Accessites and view the various style sheets. That should help you quite a bit.

Also, try to run your site against our checklist that should help you sort out some of the site's accessibility issues (link separation, lack on anchor focus, skip links, etc.)

Helena's (Little Blue Plane) site is fantastic so that would be a good site to emulate in terms of attention to some of the details I mention. In fact, she is one of the rare "Classic" winners.

Regarding style switchers, you might want to use a server side script so JS isn't needed. I actually wrote the script Helena is using. It's written in PHP which fits the bill so that is a good choice.

Hope this helps.
Mike

[Jean_Manco]

Thanks for taking a look Mike. I can't use PHP or other server-side scripts without shelling out for a higher-grade hosting deal. Since my site is non-profit I naturally prefer to stick to free hosting.

I'm afraid that your source code doesn't really speak to me. At least it doesn't answer the specific question I had about printing in IE from alternate style sheets. As far as I can see you are using a single style sheet for print, like Little Blue Plane.

As I said above Firefox and Opera support different print styles from different stylesheets. But as usual IE is the problem. And I can't find out whether IE7 will be any better on this front.

Of course a good modern browser will allow you to enlarge the font size in print, but only by scaling the entire page up.

Edited by Jean_Manco, 07 August 2006 - 03:55 PM.

[Mike Cherim]

Pay extra for PHP?! Man what a drag. I thought most hosts included that as par for the course. Sorry to hear that.

I guess I don't really understand the problem. If you offer an "alternate" style sheet when posting a style sheet for print that will be a problem if I'm reading this correctly. You don't make it alternate, you just call it a stylesheet. The media type is what makes the difference, media="print". That was part of the idea of showing you Accessites because we offer a number of style sheets. Mixing media types isn't a good idea, especially aural being that it has nothing to do with any of screen stuff. Aural affects sounds of the elements and selectors being machine read.

If you use stylesheet with the print media type (only), the printer *should* use that for printing and ignore the rest. I thought that was the case for IE too, but maybe not.

Perhaps I'm just confused.

Mike

[Jean_Manco]

OK. Let me try again to explain. There is more than one way to serve up a style for print.

1) The separate stylesheet for print. That is what you are using.

2) A section within a stylesheet that starts: @media print {
The @media rule is explained here: http://www.w3schools..._mediatypes.asp

Now in theory that makes it possible to have alternative stylesheets, each of which has a corresponding print style. Thus:

standard.css = Standard style for screen plus (@ media print) standard style for print.
zoom.css = Zoom style for screen plus (@ media print) zoom style for print.

This does in fact work for Firefox and Opera. IE gets confused.

By the way, I looked at your useful checklist, but I'm still not sure what you mean about my site having accessibility issues. What is "link separation, lack on anchor focus"? I don't have skip links, because I didn't feel it necessary. In the html my side navigation comes at the bottom.

Edited by Jean_Manco, 07 August 2006 - 06:16 PM.

[Mike Cherim]

Hello Jean,

That's cool. My thinking is if the method is confusing IE, use another method. Too many people use IE. Using CSS not supported by IE, like content after/before, etc, need to be addressed, though I didn't look to see what exactly you're doing with that.

It's not a bad site, though. I think you did good for the most part. I just noted a couple of things.

By link separation I mean not having two or more linked items appear consecutively. Namely in the case of your site I noted the the style changer links aren't in a list or separated by a character. Otherwise, looking at the home page, it looks good.

For focus I mean on anchors. You should make a rule for the focus/active pseudo classes for keyboard users mostly. It really helps with getting around the site.

a:focus, a:active { 
  background-color : yellow; 
} 

Something like that will help a lot.

As far as skip links, all I can say is close your eyes and listen to the site with a screen reader. You do offer content first, but after a number of links. Multiply the experience by X-number of pages and it would become tiresome. I'd reconsider adding a link to "content" right off the bat. The one skip link that is there (to the lower nav menu) is hidden by display:none (though it's perfect on the zoom layout). If it's going to be hidden you might want to consider sending it off-left, then using focus/active, bring it back on demand.

I also noted a lack of proper form labels. fieldset, etc. These associations are important. I also saw some inline styles containing fixed font-sizes. This disables enlargement of the text for IE users.

Like I said, it looks good and I can see you care about this stuff so this seemingly minor issues will jump help your good site even better.

I hope this helps.

[Jean_Manco]

Good grief! A complete review for free! Thank you for that.

Using CSS not supported by IE, like content after/before, etc, need to be addressed, though I didn't look to see what exactly you're doing with that.

That is simply for proper rendering of nested quotes. To cover the issue of <q> not working in IE (not to mention content before/after) I have javascript. We have already been through the tutt-tutting and finger-wagging over that. See the first post by Yannis above and my reply.

I also saw some inline styles containing fixed font-sizes.

There shouldn't be any of those, except in the Rollyo search box. I removed them all from content years ago, when I first cottoned on to what a pain they were to those wanting larger text.

I will take note of your other comments, most of which I now sort of understand. What I don't I daresay I can find out about. This focus business is news to me, but I can read up.

I assumed that a screen reader would ignore the css and therefore the link to the lower nav would be heard.

[Mike Cherim]

Hello Jean,

I assumed that a screen reader would ignore the css and therefore the link to the lower nav would be heard.

It depends on what screen reader and how the settings are configured, but the assumption is mostly safe and your logic is good

That stinks Rollyo would provide that, and you're right, that is the only instance I saw.

Mike

[Jean_Manco]

I have now turned the mini-menu top right into a list, which solves the link separation issue. I have added a "skip to content" link on the main part of the site. (Some parts of the site don't have top navigation, for example: http://www.building-....co.uk/Bristol/ ).

This has left me with a problem, in that the anchor to content is pushing down my <h2> headings, but I daresay I can find a way to fix that.

I'll still trying to find out if IE7 will cope with two different print styles.

[Mike Cherim]

Hello Jean_Manco. I made this tutorial with you in mind.
Offset Class Jump Links.

Mike

[Jean_Manco]

Very clever and appealing. Love your designs.

[Jean_Manco]

Just bumping this up to explain that I have given up hope of two different print styles and switched to a single print style-sheet, as advised above. I mention this because I see some people still coming through to my site from this thread. If you are looking for the zoom print solution - I'm afraid I don't have one.