CSS Layouts Vs. Table Layouts - Alternate Browsers and Accessibility Issues

When developing a web site one can choose between creating a CSS-based or TABLE-based web site. Both types of layouts have advantages and disadvantages and perform quite differently. They also raise (or address) accessibility issues.

This article will try to focus alternatively on each layout and point out the course of action for web developers employing either of them so as to improve the accessibility of their website.

TABLE-based layouts

Tables have been used in designing web sites for a very long time. Yet, even today, with the multitude of browsers available, many compatibility and accessibility issues rise to the surface. All these issues must be addressed in order to ensure a web site is completely functional to all users including those using alternate browsers.

Facts about web sites using tables

We see tables being used on over 95% of the websites on the net today. We see them being used on web sites with heavy content like news sites as well as on simpler sites like corporate sites or educational sites.

Among the many issues related to tables, the most disturbing one (for users as well as web developers) is browser compatibility. Among the most common browsers today, we see Internet Explorer, Netscape, Opera and Mozilla. However, there are several versions of each on the market. This means that web sites should be tested on as many versions as possible in order to obtain an accurate compatibility analysis.

During the compatibility analysis we see that on other browsers than Internet Explorer the table layout "breaks". We see gaps that should not be there, or weird positioning of cells or even thicker rows or columns than intended. Such issues require a lot of extra effort and time on the developers' part to fix. Strangely enough, a table layout can even look broken on Netscape 6.x due to the DOCTYPE declaration at the beginning of the source file.

Admittedly, the developer can not always be accountable for layout dysfunctions. There are numerous bugs all browsers have that can cause that.

When using WYSIWYG for designing a web site the risk of "bloating" the source code with unnecessary tags (or invalid tags for that matter) rises significantly. The less experienced web designers are faced with having to fix what a software broke.

Tables and accessibility problems

People with disabilities use alternative browsers such as screen readers, speech output browsers, braille browsers and text browsers. Using alternate browsing methods on table-based web sites can prove to be a painful experience for users.

The way tables look and the way they are written in the source code differs significantly. Whereas the browser renders the table as:
Cell1                   Cell2

The source code appears like this:

<table> Beginning of table
<tr> Row1
<td> Cell1</td>
<td> Cell2</td>
</tr>
<tr> Row2
<td> Cell3</td>
<td> Cell4</td>
</tr>
</table> End of of table

Text browsers, screen readers and speech output browsers read the source code line by line and then render it to the user. If cells aren't linearized, meaning that when reading Cell1, Cell2, Cell3 and Cell4 the content does not read in a logical flow, then the information becomes difficult to retrieve for disabled users. The above mentioned situation can occur when you have navigation in Cell1 and Cell3 and content in Cell2 and Cell4.

Alternative browsers will also have difficulties rendering content properly if the layout uses tables within tables or table cells. This would break up the logical structure of the page.

CSS-based layouts

CSS or Cascading Style Sheets have been used until now for text formatting but recently, developers have started using it for positioning and layouts. CSS layouts are still difficult and time-consuming to implement but their advantages are certainly worth the trouble.

Facts about CSS layouts

Although almost all modern browsers have good CSS support, older browsers are at a disadvantage. However, on older browsers a CSS-based layout still proves to be usable by displaying navigation and content at the beginning of the page.

By making use of its flexibility, developers can easily create layouts that expand as much as the screen allows it. Another advantage is that by changing a single .css file one can completely change the aspect of the site, making it perfectly suitable for screen or printing.

Because of increased positioning options, the main content can be placed at the top of the source code. This causes the information to display first and leave the bandwidth consuming elements to load at the end. This proves to be much more usable for users because they do not have to wait for an entire table with content and graphics to load as it happened with TABLE-based layouts. Users have now to wait much less before the relevant information is displayed..

Increasing accessibility through CSS

Graphic intense sites or those that employ elements that prove inaccessible to disabled users can put CSS to good work by placing all these elements at the bottom of the source code. This way, normal browsers will render the layout properly for normal users, letting them enjoy the visuals while alternate browsers will easily render the simplified, informational content to disabled users.

Using CSS can also avoid accessibility issues raised by table cells. When creating CSS-based web sites the content flows logically without disruption.

Conclusion

Tables should only be used in extreme cases where there is no other viable alternative. In this case, extra care should be taken in testing for the disabled users. Web developers should use CSS positioning and formatting as much as possible.





Back to Website Builder Tips: Making A Web Site Accessible


Other Accessible Web Design articles