View Full Version : print and aural stylesheets

01-17-2003, 02:57 AM
I have two questions, one regarding print media css and one regarding aural stylesheets.

I am designing a website, and I am conforming to accessibility guidelines for text-reading browsers by using appropriate ALT attributes for my IMG tags. However, when I test it with a speaking browser, such as WE Media's Talking Browser, it does not speak the ALT text.

I do have a text navigation menu at the footer of the page, so it's not important for the menu buttons. But, some of the section headers are gif images... I first tried to use formatted text, but the antialiasing just wasn't there and it looked like total poo.

Are there any aural stylesheet attributes I can embed into the document that will either have the text browser read the ALT attributes or provide a caption that is readable for a talking browser but is not actually displayed in the document.

I really don't want to get involved with visibilty: hidden; because of non-talking browsers with CSS turned off or overridden.

My second question deals with print media; I know you can set a stylesheet up so that when you print, certain items won't print out... useful for back buttons, advertisements, and the such. But the site I am working on is for a credit union, and it has certain regulatory requirements which must be met. Specificly, the equal housing lender logo must be displayed...

A complience officer sayed that it should be on visible on every page if printed out. I havne't had a chance to contact the State League and confirm this, but if it is true, the simple EHL logo on the bottom of each webpage apparently isn't sufficient... and to make matters worse, webpages don't all print out the same. What may be two pages printed from one computer may be one on another... it depends on the browser, OS, and printer... and that just seems like a nightmare for webdesigners who are already overworked trying to construct cross-browser/ platform viewable sites!

Is there a way that you can direct, with print stylesheets, that a certain graphic be printed on every page, regardless of the length of the document, and only one be displayed on the actual html page?


I do want to say, though, that the site is progressing along nicely, and some of that credit is due to this site and flashkit.com. Thanks guys and gals.


Roy Sinclair
01-17-2003, 06:26 PM
I really don't want to get involved with visibilty: hidden; because of non-talking browsers with CSS turned off or overridden.

Use the CSS "display: none;" instead. If a user has disabled or overidden your CSS, they must live with the consequences of their decision and having a duplicated label isn't a severe consequence.

As for printing, current CSS standards provide very little control over the printed page and older browsers are even worse. All I can suggest is that you try to control where the page breaks occur when printing and place copies of that logo so they'll print on each page (those copies can be set to "display: none" in the stylesheet for display media).

01-17-2003, 06:46 PM
while control over the pagination of printing is very difficult - afaik page-break css is not *properly* supported in any browser - control over the fonts, colors, element display etc is very easy:

@media screen {

... all your screen CSS


@media print {

... all your print CSS


You can test it using the print preview option which most browsers have (Opera is best for this), or, even easier, just change the media definitions round - so screen gets print styling - and tweak it until you're happy, then change it back.

Here's a useful set of definitions for print media css:

img { display:none; }
img.print { display:inline; }
.noprint { display:none; }

So from that you have:

<img> - doesn't print
<img class="print"> - does print where normally it wouldn't
<element class="noprint"> - doesn't print where normally it would

ALT tags and screenreaders is another thing ... the screenreader I have doesn't read them either ... not sure what you're supposed to do, except don't rely on images to impart information, and maybe use aural media styles to not-display your images, as for print.