Ann McMeekin has shared some cool updates on how you can improve the accessibility and usability of your CSS designs. Here are her tips and some samples for each tip for purposes of clarifying each trick.
Tip 1: Body Background Color

Though it is not a cardinal rule of functional CSS design to have background color, it nevertheless improves the aesthetic appeal and user-friendliness of your site.

According to McMeekin “forgetting to specify your body background color can lead to embarrassing gaps in coverage, which are not only unsightly, but can prevent your users reading the text on your site if they use a different operating system color scheme”.

To do this you only need to add the following to your CSS file:

body {background-color: #fff;}

If you pair it with

color: #000;
Tip 2: Use Line-Height Property to Make Page Roomy

Carefully use the line-height property to increase text readability.

Try using line height of between 1.2 and 1.6 times normal to improve readability and also try using unitless line heights.

For example:
p {
font-family: “Lucida Grande”, Lucida, Verdana, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3;
}
Source: /code/css-for-accessibility/1.txt

or if you want to use the shorthand version:
p {
font: 1em/1.3 “Lucida Grande”, Lucida, Verdana, Helvetica, sans-serif;
}
Source: /code/css-for-accessibility/2.txt
Tip 3: Transformers; Initial Case in Disguise

When you need to use uppercase, you may do so by:
.uppercase {
text-transform: uppercase
}
Source: /code/css-for-accessibility/3.txt

However, keep your use of uppercase within acceptable levels.
Tip 4: Provide more Links

To improve the degree of navigability of your page, provide sufficient links that can be easily found by users.
The non-underlined underline

This is a great option to increase readability of some lower case letters often called as descenders like y and g.

You can modify the three lines of code below to suit your own colour and border style preferences, and add it to whichever link state you like.
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
Source: /code/css-for-accessibility/4.txt
Always make your links standout from the rest of the text so users can see it easily.

Reverse Color for Links

If you want to give a simple reverse of link colors an put them together with non-underline underlines the code might be like this:

a:link {
background: #fff;
color: #000;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
a:visited {
background: #fff;
color: #800080;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
a:focus, a:hover, a:active {
background: #000;
color: #fff;
font-weight: bold;
text-decoration: none;
border-bottom: 1px #000 solid;
padding-bottom: 2px;
}
Source: /code/css-for-accessibility/5.txt

Please see 24 Ways for more relevant details on CSS for accessibility at http://24ways.org/2007/css-for-accessibility.

Tags: CSS for User-Friendliness and Accessibility