Accessibility
The definition of accessibility, according to Wikipedia:
Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible.
There are many reasons why using CSS is advantageous over using tables:
- Separating content from visual information
- Universal cross-browser style declarations
- Placement of interactive elements
- Multi-medium support (web browsers, screen readers, personal data assistants)
Separating content from visual information
Structured content is managed by markup languages such as XHTML. Predefined tags (h1, h2, h3, p, li, ol, ul) allows content to have structure by identifying elements as headings, paragraphs, lists, and other common document constructs.
Visual information (presentation) is separated from the content and no longer needs to be embedded into each page's content. Formatting visual attributes are defined in a separate style sheet document which allows the designer to apply new formatting to content without the hassle of having to format the content itself.
Universal cross-browser style declarations
Giving the user the ability to enlarge fonts in their favorite web browser is crucial. Not only can this make reading more comfortable, but it is also essential for users who have vision impairments. The W3 (World Wide Web Consortium) recommends the use of relative length units (em) rather than absolute units (in, cm, mm, pt, pc).
It is not recommended to use pixels to declare font sizes since IE6 (Internet Explorer 6) is unable to enlarge text if the text is defined in pixels. Because backward compatibility is very important and also because IE6 still commands a large percent of the browser market share (30.7% - w3schools.com), it is integral that the use of relative units for font sizes is adhered to.
That being said, all browsers have a different, default font size for rendering the text when no CSS is present. Therefore, it is good practice when designing a website for cross-browser compatibility, to always declare a default font size within the body tag:
body { font-size: .7em; }
Another important attribute for various XHTML elements is the use of the line-height attribute. Just as most browsers have a different default font size, so do they have different line-heights. Headings, paragraphs, and lists are just some of the structural elements which should have a line-height attribute. For example, to define a consistent line-height for paragraphs within a website, use the following:
p { line-height: 1.5em; }
Placement of interactive elements
To accommodate users with physical disabilities that affect manual dexterity, be careful not to place links, buttons, or form fields too close together. Not only can this make things confusing from a visual perspective, but it can make the selection of these elements difficult for handicapped users.
There are a number of things that can be done to facilitate easier selection of elements:
- Increase interlinear space values (apply the line-height attribute, as mentioned above; a value of 1.5 is often a good place to start)
- Increase the margin and padding around items in vertical and horizontal lists of links;
- For a horizontal list - li { margin-left: 5px; margin-right: 5px; }
- For a vertical list - li { margin-top: 5px; margin-bottom: 5px; }
- Provide an adequate amount of space between form buttons and between form fields
Multi-medium support (web browsers, screen readers, personal data assistants)
Perhaps one of the biggest advantages to using CSS over tables from an accessibility point-of-view is the ability to serve different style sheets to different mediums and devices. Because information on a screen reader or personal data assistant (PDA) appears differently than on a computer's web browser, it is important to include alternative style sheets that include basic formatting rules for a particular device. Not only will this expand the accessibility of your website to all sorts of web-enabled devices, but it is just good practice in general.
Rather than listing all of the different recognized media types, head over to W3.org and take a look at their extensive list. Not only does their page list all of the recognized media types for various user agents, but it also explains the @media rule and provides a few examples on how to create style sheets for different media types.
Make accessibility standard for your websites, or else!
Accessibility is absolutely necessary this day and age. By making your website more accessible using CSS, not only are you making content consumption and site navigation easier for users, but you're also accommodating those with various disabilities. And if by chance you don't care much about accessibility for the handicapped (shame on you), you should - you can be sued for having an inaccessible website.
Can tables do any of the aforementioned accessibility items? No, they can't.