Setting basic styles to enhance accessibility

CSS in an of itself is neutral when it comes to accessibility. Just like with our HTML markup and our scripts it is how we use this tool that can either enhance or detract from accessibility.

Setting styles on the body

The choice of font-size, color, background-color, and to some extent font-family and font-weight can have a strong effect on the accessibility of our document. Setting these properties within the body allows us to take advantage of inheritance. It also makes it easier for a color blind or low vision user to override our settings for the entire document.

Choose a color and background-color combination that provides good contrast between the foreground and background.
Avoid the use of background images that make it difficult to see the text that lies behind them. If you are using a small repeating textured or color image as a background make sure that the page will still be readable if images are turned off by setting a similar background-color.
Set the font-size to relative unit. Choosing a percentage, preferably 100% provides us with an easy way to control the font sizes of all of the rest of the elements within the body of the document. It also ensures that our fonts will be scalable on all browsers.
For most designs it is also convenient to set the margin and padding to 0. This allows us to achieve full coverage of the page. Top and side margins can be achieved by setting those items on our content containers, either tables or divs. Since these pages are very simple, I have set the margins within the body.

Setting styles for consistency among commonly used elements

Now that we have set the styles for the body we can set styles for the most common element, headings and paragraphs. First take control of margins and padding on the heading elements together. A convenient way to make these elements to behave in a similar fashion is set them all at the same time. This is achieved by grouping them in a single style definition.


h1, h2, h3, h4 {

    padding:0;

	margin:.5em 0 .5em 0;

	font-weight:800;

}

After setting the shared properties of these elements set the individual properties


h1 {

 	font-size:2.25em;

}

		
h2 {
	font-size:1.85em;

}

		
h3 { 

	font-size:1.45em;

}

		
h4 {
	font-size:1.25em;

}

Finally setting the line-height property of the of the paragraph element and the bottom-margin property of the list-item element gives spreads things out a little and improves readability.

Index