Best Practices for Accessible Stylesheets
Cascading Style Sheets (CSS), or short Stylesheets, is a language used to describe the presentation (that is, the look and formatting) of a document written in a markup language like HTML.
The stylesheet language as described in CSS level 2 revision 1 helps to separate presentation from structure and thus adds flexibility to the look and feel of a web page. Stylesheets are useful for the following reasons:
- Can be re-used for many documents
- Saves download times by caching by the browser
- Presentational changes are fast and easy and only in one document
- Development can be done independently from content and logic
- Increases ability to program for device independence
- Application of different styles for different output formats (e.g. print)
Basic Rules
- Add Stylesheets whenever possible (minimize number of stylesheets)
- Use them consistently across all pages
- Use linked stylesheets rather than embedded styles; avoid inline stylesheets
- Stylesheets do not substitute correct and meaningful structure
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Organize documents so they may be read without style sheets | 6.1 | d | Ensure that important content appears in the document object and is not generated by style sheets (i.e. through :before and :after pseudo-elements). |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Use style sheets to control layout and presentation | 3.3 | n/a | <HEAD> <TITLE>Drop caps</TITLE> <EM class=”highlight” title=”provide STYLE element”>STYLE</EM> type=”text/css”> .dropcap { font-size : 120%; font-family : Helvetica } </EM class=”highlight” title=”provide STYLE element”>STYLE</EM>> </HEAD> <BODY> <P><SPAN class=”dropcap”>O</SPAN>nce upon a time… </BODY> |
Level 3
| Description | W3C | 508 | Example |
|---|---|---|---|
| Create a style of presentation that is consistent across pages | 14.3 | n/a | A consistent style of presentation on each page allows users to locate navigation mechanisms more easily but also to skip navigation mechanisms more easily to find important content. |
Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="BaseStyleSheet.css" />
</head>
<body>
Hello World
</body>
</html>
/* Base CSS Document */
/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
References
- Chisholm. W., Vanderheiden, G., Jacobs, I.; CSS Techniques for Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10-CSS-TECHS/
Similar Posts:
- Best Practices for accessible Content
- Best Practices for Accessible Frames
- Best Practices for accessible Links
Shouldn’t you credit the source of your reset stylesheet? Did you get it from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ or elsewhere?
That is absolutely right, thanks for taking the time to comment the link. I’ve been using Eric Meyer’s reset stylesheet for ages and I can only highly recommend it to anyone, thus the posting. Never ment to take credits for it.
Cheers, Mike
The only disadvantage of using CSS especially CSS2 or CSS3 is that not every rules are supported by ie6, for instead ‘:checked’ attribute or some implementations of js.
I agree with you that certain browsers (when will IE6 finally die?) still lack some functionality, but we are not living in the 90’s anymore, we need to move on. We are surrounded by IE8, FF3.5, etc. That’s why we should not develop in binary browser support anymore (IE6 is supported or not) but with ‘Graded Browser Support’ (http://developer.yahoo.com/yui/articles/gbs/), i.e. we cannot develop for the lowest common denominator anymore but look ahead. I’m sorry if you still have a black&white TV set, but I will make my movie in color anyway.
Cheers, Mike