RE: [techs] how to make a readable and clear page using CSS

 
I am putting together some stuff for a  CSS technique on how to make a
readable and clear page using CSS.
Before we formalize it to a technique it may be interesting for people
to look at the sources so far, and see if they like the direction. 
 
 
Note all sources say use short paragraphs, low reading score, and
bulleted lists
 
I have left them out of this email because that is not doable through
the CSS technique but through the main content.
 
 
so form starting from 
source 1 -  <http://ubaccess.com/ldweb.html>
http://ubaccess.com/ldweb.html    ;)
 
We have the following sections that I think help for CSS:
Many users with non specific learning disabilities will have trouble
overriding your page settings. So start the page out with a format that
makes it easer to read and understand.
 

*	Use white space to separate ideas 
*	 Use a clear default font such as Arial or Comic Sans. 
*	Avoid italics which are harder to read 
*	Avoid all capitalized sentences. 
*	These are also harder to read. 
Brake up the text as much as possible into short paragraphs. 
*	Separate the paragraphs with headings. 
*	Use color to explain the document structure such as separate
colors for heading 1 and heading level 2. 
*	Highlight key concepts. 
*	Use bulleted lists 
*	Use white space to separate paragraphs. 
*	Line spacing leading (space) of 1.5 to 2 times the space. 
*	Keep lines left justified.
*	CSS can also be used to add pictures next to add picture
automatically to classes of content.


CSS technique example:
You can make a class  note,  or and they can always be accompanied by a
helpful picture.

you can do the same thing for story boxes
 
Introductions, summaries and conclusions can each be  made to stand out
consistently using a box drawn around  these types of content 
Classes  can also be give to special types of links that are important
such as contact us, or help
These can then be rendered with a symbol
  
(I did that at   <http://ubaccess.com/ldweb.html>
http://ubaccess.com/ldweb.html)
 
 
 
Use pictures :

The less your site depends on written words the more people with
language impairments will understand your page.
 

*	Pointers for illustration
Illustrate instructions. 
Illustrate important navigation elements (like contact us, and home). 
Use well known symbols (like ? for help, < for back). 
Illustrate important concepts. 
Avoid distracting animations. 
 
Pete Ranger from Techdis sent me some very interesting links
 Other good 'official' resources include:
 
source 2  "Dyslexia Style Guide." (2003, March 23 - last update),
(British Dyslexia Association), Available:
http://81.89.134.99/main/information/extras/x09frend.asp (Accessed: 2003
March 26).
 
key points relevant to CSS
 
*	Fonts should be rounded, allow for space between letters,
reflect ordinary cursive writing and be 'easy on the eye'. Look for a
font that spaces letters rather than running them closely together. Bear
in mind that fonts that have unusual shaped letters can create
difficulties.
*	Select sans serif fonts such as Arial or Comic Sans. Other
suggestions include Verdana, Helvetica, Tahoma, Trebuchet and Sassoon.
(Information on Sassoon is available at www.clubtype.co.uk) 
Use a minimum of size 12pt or 14pt. 
*	Where possible use lower case letters rather than capitals.
Using capital letters for emphasis can make text harder to read. 
Don't write sentences entirely in capitals; this infers that the reader
is being shouted at.

 
Paper.

*	Avoid light text on a dark background. 
*	Use coloured paper instead of white. Cream or off-white provides
a good alternative. 
*	Matt paper is preferable to glossy paper, as this reduces glare.

*	Ensure the paper is heavy enough to prevent text glaring through
from the back. Good quality 80 or 90 gms is effective.

 
 Presentation Style.
Presentation can make a big difference, both to readability and initial
visual impact.
 

*	Limit lines to 60 to 70 characters. Lines that are too long or
short can put strain on eyes. 
*	Use line spacing between paragraphs to break up text. 
*	Use wide margins and headings. 
*	Use of boxes for emphasis or to highlight important text can be
effective. 
*	Use bold to highlight. Italics, or underlining can make the
words run together. 
*	Keep lines left justified with a ragged right edge. 
*	The space between lines is important. Recommendations suggest a
leading (space) of 1.5 to 2 times the space.


 Dix, A (2002 April 1 - last update), "Cognitive Disability and the
Web", (HCI Education - Lancs. University), Available:
<http://www.comp.lancs.ac.uk/computing/users/dixa/hci-education/cog-dis/
cog-dis.html(Accessed>
http://www.comp.lancs.ac.uk/computing/users/dixa/hci-education/cog-dis/c
og-dis.html(Accessed: 2003 February 12).
 
 
source 3
A great resourse is also
<http://www.mencap.org.uk/download/making_myself_clear.pdf>
http://www.mencap.org.uk/download/making_myself_clear.pdf
taken from there
 
Use larger print (at least 12 point), a clear typeface and plenty of
spacing.
 
Use bullet points or story boxes and fact boxes to make the main points
clear.
 
Use images such as photos, drawings or symbols to support your text. Aim
to make the subject of your material clear at a glance, even to a
non-reader.
 
Do not rely heavily on abstract symbols unless you know your readers are
confident symbol users. Choose one or two simple, pictorial symbols and
put them to the side of the words.
 
 
How we present our writing is as important as what it says. A page of
dense typescript is off-putting for everyone.
 

*	Use larger print. If your audience includes a reasonable number
of people with learning disabilities the type should be at least 12
point, with the most important information in 14 point.
*	Use a clear typeface such as Arial or Univers and avoid ornate
fonts. Fancy and ornate fonts are much harder to read than plainer
fonts.
*	Make sure there is good contrast between type and paper. This is
especially true if using colored paper. Avoid yellow type. Avoid reverse
type (white out of a color).
*	Use good quality matt paper. The writing on the other side won't
show through, and there won't be a glare to make it hard to read.
*	Do not run writing over the top of a photo or drawing.
*	Avoid block capitals, italics or underlining. They all make text
harder to read. Use sentence case and highlight important points with
bolding.
*	Use a ragged right edge rather than justified.
*	Always start and finish a sentence on the same page. Don't let
articles run onto another page.
*	Break the text into short chunks with plenty of white space
around it.
*	Bullets and boxes. Use bullet points and fact boxes to make the
main points clear.
*	Keep the layout consistent for a regular publication. Try to put
similar articles in the same place or page each issue.
*	Use images to support your text (see over for more information
on this).

 
 
The rest is more related for I for Gateway - but I thought I would
attach it anyway
 
 
If the words or pictures that you use are inappropriately childish they
will meet no-one's needs. But if you do the job well you may find that
everyone prefers the "accessible" version.
 
Involve your audience.  Wherever possible involve your audience in the
creative process. Seek the advice and ideas of people with learning
disabilities as early
 
Make it clear what action is required Bristol Pathway (a Mencap
employment service) always puts a symbol on written material it sends
out:
 
material that is just for information
 
a reply is needed
 
 
Choose the image which best explains your text
 
It could be a photograph, drawing or symbol. Within the same document
you may need to use a photo you have scanned in yourself, some line
drawings, and some common symbols. (By symbols, we mean Rebus, PCS and
other stylized drawings available on WidgitC software. Symbols can be
consistently reproduced by anyone with access to the same software).
 
Link together words and pictures
 
Make it clear which part of the text each image relates to. Usually this
is by placing the image alongside the text. Some people like to use an
image for each
 
main idea or paragraph. It is important that images help explain the
text and are not just there to make the material 'look accessible'.
 
Don't use too many symbols
 
Don't rely heavily on symbols unless you know the people receiving your
material are confident symbol users. See the next page for more ideas on
using symbols.
 
 
 
 
 
 
Keep well and all the best,
 
Lisa
 
Lisa Seeman
UB Access
Tel: +972-2-648-3782 (please note our new number)
Website:   <http://www.ubaccess.com/> www.ubaccess.com
 
THIS E-MAIL CONTAINS CONFIDENTIAL INFORMATION AND IS INTENDED FOR THE
RECIPIENT OF THIS E-MAIL ONLY.