CSS - Page 6

You have gotten this far; you deserve a present. Just for you. OK, for you and anyone else who would like it. But I know it's just what you wanted - your very own disability friendly CSS. If you are using this, please tell me, so that I can add you to my disability friendly directory. (thanks)

Please note: It has the following features to clear out unwanted, confusing, style information off your web site, making it more accessible:

Use of numbers, not names, for colors.

No deprecated presentation elements and attributes. Just good old CSS properties to control font characteristics: 'font-family', 'font-size' etc.

Indentation: 'text-indent' so you do not have to use the BLOCKQUOTE, white spaces, other visual gimmicks to indent.

Use of the 'word-spacing' property to produce white space between letters.

Use of color to help clarify structure, but not exclusively (for color impaired people).

Color contrasts usable for color impaired persons.

Class names that reflect the content and not the presentation.

Style for compound numbering.

Style for bullet images.

Large clear fonts.

Use of relative length units and percentages.

NOTE:'text-indent', 'text-align', 'word-spacing', 'font-stretch'. 'float', 'position', 'top', 'right', 'bottom', 'left' 'margin', 'margin-top', 'empty-cells' 'border', 'border-width', 'border-style', 'border-color' 'border-spacing' and 'border-collapse' for tables. 'outline, 'outline-color', 'outline-style', and 'outline-width' can all be set using style sheets, making the HTML site clear of unwanted style information and more accessible.

CSS2

CSS2 has some additional mechanisms that can generate markers to help people navigate your site without visual clues, such as the 'before' and 'after' pseudo-elements and the 'content' property. When used together, these allow authors to insert markers before and/or after the element's content. The 'cue', 'cue-before', and 'cue-after' properties play a sound before or after an element's content.

In our sample style sheet the words "End Example" would be generated after each marked up example. The paragraphs are also numbered to help the reader further navigate the page.

CSS2 also has aural properties, which allow you to emphasize and stress information to non-sight readers. These attributes include:'volume', 'speech-rate', 'voice-family', 'pitch', 'stress'. The properties 'punctuation' and 'speak-numeral' can be used to control spoken numbers and punctuation.

Authors of multimedia sites can also use the CSS2 "media types" with @media rules, to help their presentation be understood on special devices.

Enough with the preamble - on with the main:

H1	{
	font-size : 3em;
	font-weight : 900;
	color : #000099;
	font-family : Impact;
	text-align : center;
	padding-top : 1em;
	border-top : 2px red ;
	voice-family : paul;
	stress : 20;
	richness : 90;
	cue-before : url("ping1.au") }

H2 	{
	font-family : Arial, Helvetica, sans-serif;
	font-weight : 800 ; color : #006600; text-align : center;
	font-size : 2em;
	voice-family : paul; 
	stress : 15; 
	richness : 80;
	cue-before : url("ping2.au") }

H3	{ font-family : Helvetica, sans-serif; 
	font-size : 1.5em;
	font-color : #006600;}

p:focus { outline : thick solid black; }

p:active { outline : thick solid red; }

P.important { font-weight: bold; }

P.less-important { font-weight: lighter; 
		font-size: smaller; }

P:before { content	: counter(paragraph) ". " ;
	counter-increment: paragraph; }

DIV.example:after { content: End Example }

UL, OL { counter-reset: item; }

LI { display: block; }

LI:before { content: counters(item, ".");
	counter-increment: item; }

b { font-weight: bold; background-color: yellow; } 

.newbullet { list-style : url(yellow.gif) disc; }

em { font-weight: bold; color: red; 
	background-color: yellow; } 

Body {	font-family : garamond; 
	font-size : 1.1em;
	font-weight : 500 ; 
	bgcolor : #ffffff; 
	link : green; 
	text : #000000
	margin-left : 15%; 
	margin-right : 10%}

P { color : #330000; 
	font-family : Garamond, serif; }

A:link, A:active { text-decoration 	: none; 
	color : #ff0000; 
	background : transparent; }

A:visited { text-decoration : none; 
	color : #993300;
	background : transparent; } 

A:hover { font-weight:'bolder'; 
	text-decoration : none;
	color : #000000; 
	background : #ffcc00; }

Forms, scripts and keyboard access - Page 5
Designing Web Sites to be Disability Friendly
XML and the future - Page 7