RE: Techniques to follow structure of a page (CSS)

These techniques may be advisory for GL 1.3, since they have to do with
making structure perceivable.
 
John
 
 

"Good design is accessible design."

Dr. John M. Slatin, Director 
Accessibility Institute
University of Texas at Austin 
FAC 248C 
1 University Station G9600 
Austin, TX 78712 
ph 512-495-4288, fax 512-495-4524 
email jslatin@mail.utexas.edu 
Web  <http://www.ital.utexas.edu/>
http://www.utexas.edu/research/accessibility 

-----Original Message-----
From: public-wcag-teamb-request@w3.org
[mailto:public-wcag-teamb-request@w3.org] On Behalf Of Lisa Seeman
Sent: Wednesday, September 14, 2005 2:43 AM
To: public-wcag-teamb@w3.org
Subject: Techniques to follow structure of a page (CSS)



Techniques to follow structure of a page (CSS)







Help the user follow the structure of the document 


You do not want too many colors and font sizes used on a page. However,
changing colors and size of fonts can help people follow the structure
of your pages. For example, use a different color for each heading level
on your site. 


CSS example


h1
{ font-size:1.2em;
color: green; 
background-color: #ffff99 ;
font-weight:600; }


h2
{ font-size:1.1em;
color:blue;
background-color: #ffff99;
font-weight:700;
}


Note: For this to work well the main HTML document must have had
headings tagged consistently as headings. Also, the correct heading
level should have been used, such as the h1 tag for all headings of
level one. 


3 Making important text stand out and highlight key concepts. 


3.1 Using CSS classes


In general, to use CSS well you want to create CSS classes for types of
content that have a similar role.

For example, you can create a CSS class for warnings, notes, examples or
any other type of text that have similar roles.

Then you can easily make each type of text stand out. At the same time,
you can make it clear to the user what they need to look at and what it
represents.

Avoid italics which are harder to read. Avoid all capitalized sentences
as these are also harder to read. 


3.2 Boxes


A good mechanisim for making text stand out is putting a box around very
important content.


CSS example

P.warning
{border:1px solid black;}
will put a box around any paragraphs that have a class warning.

3.3 Pictures


Another excellent way to help people follow your site is to use pictures
and symbols.

In this example each paragraph with a class warning will have a picture
of an exclamation mark before it. 

In this example headings level 4 with a class of tool has a background
image of a tool. The text has been indented so it will not write over
the picture.


CSS example

h4.tools { background-image: url("tools.bmp"); background-position:0 0;
background-repeat: no-repeat; text-indent:60px; line-height:250%; }