Images as text

[tonyh]

It's been a while, but I figure it's time to ask some more questions.

I understand that IE is the only browser taht allows pixel units for font. What I can't remember is if varying the relative font sizes in browsers also affect pixel units in general. For example if a div is specified in pixels, adjusting the text size in the browser won't affect that divs dimensions, will it? Only if the dimensions were in relative font sizes, correct?

I have read countless articles where text is being replaced with images. My question is will this be accessible? I'm considering doing this with a menu. If I follow the guidleines for image accessibility, including alt values, ect. this should still validate correct?

Any additional advise if I follow this approach? Other than don't do it ;) . Unless of course it truly is inaccessible....

[MstrBob]

IE is not the only browser that allows pixel units for font. Read the CSS Specs (http://www.w3.org/TR/CSS21/fonts.html#value-def-relative-size). I think IE may not interpret pixels as a relative size, as it should. But, it is perfectly valid to use pixels for font size. However, since IE doesn't interpret px as relative, it won't allow resizing. I generally recommend one use em or percentages for font-size.

If an element's dimensions are given in pixels, then resizing font won't affect the element's dimensions. If, however, you use em for the dimensions, resizing text will affect it. Percentages used for dimensions will size the element according the it's parent element. Thus, if you have the body element set to a width of 50%, and since the html element defaults to the width of the browser window, body will be 50% as wide as the window. Hope that made some sense.

In terms of images replacing text, I'm not generally fond of it. The practice can be considered acceptable as long as you're not replacing large amounts of text, and only if you're using it so that you can implement a non-standard font. For instance, say you've downloaded a really cool font. But it isn't standard on computers. You can make images, and using the proper techniques, replace headers with it. Headers, and site nav. But anything more than that is pushing it. And for cross-device compatibility and search engine rankings, I do suggest you use image-replacemnt techniques. If done properly, it will work fine.

[russell]

to go small step further, i reccomend using images for text only where it cannot be displayed otherwise. my favorite example is text turned 90 degrees to the left and read vertically (like in a column heading type display).

also, if you are going to use an image for text, be sure to use an alt attribute with the same text.

[tonyh]

Thanx for the confirmation guys.

What about image maps? How do we use them and still have the page be accessible? I suppose validating would be good too....

[Charles]

See http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#Techniques .

[Webnauts]

Image Maps are an outdated method!
But if you still want to use them, don't forget the alt tags!
More: http://www.w3.org/TR/WCAG10-HTML-TECHS/#client-side-text-equivs

[hasuinterceptor]

Can you use TITLE tags on images as well?

[Webnauts]

Originally posted by hasuinterceptor
Can you use TITLE tags on images as well?
Yes, if they are linking. While that improves accessibility, usability and SEO. More: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/web-accessibility-seo.shtml