Accessibility - Part 10
Article ID: KB101573
We've been looking at the third accessibility guideline for the past few
months, which states:
Guideline 3. Use markup and style sheets and do so properly.
This month we'll cover the last two checkpoints.
Checkpoint 3.3. Use style sheets to control layout and presentation.
There are two ways that you can specify formatting (for fonts, page
layouts, colors, etc) when making web sites. You can hard-code everything
using HTML tags, or you can define commonly-used formats with "styles."
Here's an example of hard-coding. To get red font, you can hard-code
using the <font> attribute:
<p><font color="red">your red text here</font></p>
This code produces text that looks like:
your red text here
This is all well and good, but what if you have red text on every page of
your web site, then later want to change all your red text to blue text? You
would have to go into each page and individually change the text colors.
On the other hand, if you use an external style sheet, you can define a
certain color in one place. If you decide to change the color later, you can
do it in one place and it will update across the whole web site.
You may recall from three months ago that HTML was originally to help
define a logical structure for documents. Font and layout formatting
information clutters up this logical structure. Using a cascading style
sheet helps you to separate the document's logical structure from the
visual layout of the page.
Now, practically speaking, you'll find it very difficult to completely
separate the layout from the structure and have a site that looks
good in different browsers. A major problem is that older browsers do not
follow cascading style sheet specs in the same way as newer browsers may.
You'll find that it may be necessary to have web sites that use tables to
lay out the content, even though it goes against this checkpoint. Because
this checkpoint is "Priority 2," you may decide to go ahead and follow it as
much as you can but not worry if you have to break it.
What this means for you...
At the minimum, build or purchase web sites that use cascading style
sheets for font and color formatting. If meeting this checkpoint is a must,
you'll want to find or create web sites that don't use tables for layout.
Checkpoint 3.4. Use relative rather than absolute units in markup
language attribute values and style sheet property values.
If text on web pages are defined with "relative" units, then the user can
resize the text when they go to View > Text Size in their browser. In
contrast, the text on most web sites that you see are defined using
"absolute" units and do not resize. (Try looking at different web sites and
resizing the text!)
What this means for you...
If you have used a style sheet in your web site, you can control the
font sizes within the style sheet. To use "relative" units, you will need to
experiment with either "percentages" or "ems." This can get tricky,
especially if you have "nested" styles, so be sure to test often.
Contributors
Corrie Haffly:
Corrie is the author of the Accessibility series, which appeared
in the PixelMill Newsletter. Though you may not know her name,
Corrie has become one of the top experts in the FrontPage Template
industry. You may know her work better under the name John Galt's
Templates. See Corrie's stunning products today!
John Galt's Templates
John Galt's Tools, PixelMill Newsletter, Volume 3 - Issue 4 : 04/01/2003
Back to top
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101573.htm
permalink to this article:
http://www.pixelmill.com/support/kb101573.htm
Back to top