Hi folks,

I am currently in the process of developing an accessible site which provides distance training courses for the disabled.

I am attempting to make everything on the page adjust when the user increases the font size - menu divs get wider, text wraps to next line etc.

I was just wanting to ask what methods people use to achieve this. I am attempting to do this without using tables! Completely 100% CSS. I am currently using em and % for positional values and element sizes.

well, a good browser should be able to either allow a user to increase font sizes, or override parts of a stylesheet (font-size/colors etc)...

a really good browser (like Opera) will handle all of the calculation for resizing things relatively, that is it can zoom in and out on content, while respecting positioning and relativity, whether or not you use tables.

I find tables are the best things for keeping things positioned relative to each other, and for making content-controlled layouts.

The "problem" with tables comes with screenreaders: screenreaders though, are horrible things. I've downloaded screenreaders to test them out, all i can say is i'm glad that I can see :|

In general, if content in your markup (HTML) reads logically: top-down, left-to-right by EN standards, then a good screenreader should be able to read the content in that order.. If your markup doesn't read logically from top down, and you move things around using absolute positioning or whatever, then a screenreader will find it more difficult, and a bad screenreader's attempts to read the page "as actually seen" sound like a garbled mess..

one note on accessability: it's not always right to put text in image alt tags :| especially if the image doesn't contribute to the page's informative content. If you have an image followed by a text description, putting the text description in the alt tag aswell, just means it will be read twice.

In general, the page's I make are quite graphical.. I have difficulty working out exactly what information should be portrayed without those graphics...

I'd advise minimal use of graphics and style, and maximum use of content and "hints", the new CSS specification allows you to specify tone/type of voice for a screenreader aswell as visual style, give it a look..

http://www.w3.org/TR/REC-CSS2/aural.html

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.