WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS files unpredictable

for

From: Michael Moore
Date: May 28, 2005 9:56AM

A few comments and suggestions please see below.

The site is built using a transitional dtd rather than strict. Use a
strict dtd and validate you site using an automated tool such as the
W3Cs validator found at http://validator.w3.org/ When I tested your
page using its current dtd on the W3C validator it failed. Moving to a
strict dtd and correcting all of the validation errors will go a long
way toward correcting your issues with cross browser compatibility and
css consistency.

Validate your CSS, the CSS for the page also fails the W3C validator.
http://jigsaw.w3.org/css-validator/ This should help clean up most of
the remaining CSS issues that you are experiencing.

Avoid the use of deprecated elements - use of a strict dtd will help you
here as well. You can usually (border within the img tag was spotted
by Cynthia-says).

Don't design for a specific screen size or resolution. It is impossible
to anticipate all of the possible combinations and devices that are out
there or will be out there. For instance, my laptops default resolution
is 1600X1200 on a 15.5in display, my home desktop has a 19 in display
set to 1280X1024, my secondary monitor at work is 17in and gets set to a
wide variety of resolutions depending upon my testing mode, and my cell
phone has a 2in display with what I think may be a 400X400px resolution
and a browser that I have set not to download any images.

So what the heck does all or any of this have to to with the topic of
this list, accessibility. The use of valid mark up helps ensure that
your site will work with the widest array of presentation technologies
possible. These technologies whether they are browsers, screen readers,
bots or whatever may be created in the future are designed by their
manufacturers using these dtds when we conform to these dtds we give
them the best chance of working as desired.

Moving on to the subject of not designing to a specific screen
resolution or size. The use of elastic and fluid design enhances
accessibility by allowing documents to scale and to flow to fill the
available space. The benefits of fluid design are controversial because
of concerns regarding the width of text columns and their relationship
to readability and eyestrain. IMHO these arguments are not particularly
valid in light of my discussion of screen size and resolution
possibilities above. If the text column is uncomfortably wide user can
scale his or her browser window. Friends of mine who are lucky enough
to have very large monitors (21in and above) seldom use their browsers
with the window maximized.

But wait, should we depend upon users knowing that they can scale their
browser windows to make our pages more accessible or usable? Well, we
use good structured, semantic markup to benefit screen reader users and
other user agents that can take advantage of the documents structure to
improve navigation. We use link text that makes sense out of context to
allow users who are knowledgeable to take advantage of link lists. IMHO
window scaling is a basic computer survival skill and is known to all
but a few of the most novice users who will quickly learn this feature.

To learn more google the following topics:

Web Standards
Universal Design
Liquid Design
Elastic Design


Mike


HAA wrote:
> Try this one: http://www.newchaletclub.co.uk/0/index.htm (it worked for
> me just now).
>
> I've not nested most of my layout <div>s, at this point I get more
> confused with working out which </div> is connected to which <div> so
> essentially the site is one column anyway. I use 800x600 anyway (on a 19
> inch monitor but it wont let me size down to 640x480) and one of *my*
> personal peeves is when I find a site that was designed for a minimum
> of 1024x768! I hate having to scroll left, so I try to avoid doing that
> on my sites, with varying sucess I suspect.
>