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
- They're easy to use and implement (compared to css-layouts).
- WYSIWYG (What You See Is What You Get) editors like Frontpage and Dreamweaver make it very easy for developers to include them.
- Tables "break" on various browsers (newer and older versions) thus producing layout dysfunctions.
- Increase almost unnecessarily the HTML/text ratio. This means that other options could be used to create layouts that produce smaller page files by employing less HTML tags.
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.
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
- Widely supported by modern browsers but not by older browsers
- Allows extreme flexibility in positioning
- Increases usability by encouraging liquid design
- Keeps the HTMl/text ratio at a low level thus decreasing load time
- Allows the display of main content first while the graphics load afterwards
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.
By Craig from TX.
http://www.ex-designz.net/articleread.asp?aid=323
No comments:
Post a Comment