Tables and CSS through accessibility standpoint
Tables have been and still being used extensively in the design and development of web sites. Web sites which have been designed using tables constitute a whopping number which throng the Web today. Until recently, when Cascading Style Sheet (CSS) hit the market, there were very few takers. But gradually web folks who gave CSS a chance in their web sites touched a respectable figure. Though CSS has got some real advantages over the traditional use of tables, it is not for all to try out their hands as it requires a certain amount of knowledge and skill. Nonetheless tables too have got a distinct edge over CSS in terms of ease of use by web developer apart from being a tried and tested method for a long time.
Discussing the exclusive advantages and disadvantages of CSS and tables or a comparative assessment of the same is beyond the scope of this article.
This article specifically addresses issues which are associated with the use of CSS or tables that either hamper or enhance the accessibility and usability of web sites. As this is common realization amongst web masters and web designers that designing a highly accessible and usable web site holds many promising benefits which can be overlooked only to be lagged behind in terms of furthering one’s own business or whatever purpose the web site serves.
As we will see in the later part of this article that while CSS addresses some usability issues but at the same time it does poses some problems which hamper the same. Similarly, the use of tables goes well with the usability in some aspect but still more aspects get impeded when it comes to the usability and accessibility of a web site.
Let’s see how CSS or tables tilt toward accessibility and usability of a web site, and what should preferably be done to enrich the degree of usability with the use of tables or CSS for that matter.
How do tables help or hamper accessibility?
It is interesting to know that web sites designed with tables have flooded the Internet. This is probably due to the fact that WYSIWYG (What You See Is What You Get) editors like Frontpage and Dreamweaver support the use of tables and, therefore, it is quite easy for web developers to implement them.
Despite its enviable popularity, it does not have much to offer when we take into account universally accessible web sites, alternate browsers, and people with disability. The employability of tables outshines the usability for sure.
One serious problem with the use of tables is that tables break on various browsers as if there are serious inconsistencies with the layouts. As a result thereof, several embarrassing gaps appear on the page and positioning just gets awkwardly affected. So, it is not hard to find certain distorted cells or disproportionately thick rows or columns on the page. Users visiting such web pages will regret their browsing decision to say the least.
To get rid of this problem, web developers have to put in strenuous efforts to fix this sort of bug. Moreover, it is advisable to conduct browser compatibility test on most popular browsers like Explorer, Netscape, Opera and Mozilla including their older versions. This test is crucial for the compatibility analysis which can give you an insight to deal with the problem before it becomes headache for the web users.
Another problem which crops up with the use of table is the highly unbalanced HTML/text ratio. HTML tags get conspicuous space leaving less space for the text. Those who prefer to use the tables might need to create comparatively small pages with less HTML tags for usability sake.
With the use of tables, bloating of the source code with wrong HTML tags is more likely to occur. This might put a not-so-experienced web developer to a skill test.
Worst still, tables lead to a terrible result in matters of alternative browsing and people with disability. Since people with disability are compelled to use screen readers, Braille browsers, speech output or text browser depending on the disability, it turns out to be a pathetic experience for them simple because tables does not fully support such systems.
To clarify it a bit more, alternative browsers find it difficult to interpret the content on screen readers or speech output due to breaks or gaps on the page. Such dysfunctions come into the picture where tables or table cells have been used in the web site.
To cut it short, the use of tables is more of a hindrance than a ready help in the usability of a web site. And in case of alternate browsers, it is really annoying for the people with disability.
How does CSS help or hamper accessibility?
In not so remote past, CSS was primarily used for the purpose of formatting the text. But, as of now, CSS is increasingly being used for web page layout and it positioning. The use of CSS is undoubtedly a little difficult but it delivers quite toward the end of accessibility and usability of a web site. The painstaking efforts translate very well into accessibility across browsers and people with disability.
Let’s have a look at the friendliness of CSS on the accessibility and usability fronts.
CSS facilitates superior flexibility when it comes to positioning. The benefits of using CSS are further escalated by the fact that it is compatible with a wide range of modern browsers. There is a point in contrast here. CSS does not support older versions of browsers and it is no better for the people of disability than tables. However, what makes the use of CSS advantageous over the use of table in this regard is that CSS can be rendered compatible by placing content right on the start of page along with navigation menu.
Besides, CSS can be integrated with the liquid design of a web site thereby enabling it to employ the maximum space available on the monitor. In this way, content or information on the web page is displaced properly without straining the users. Spacious deployment of content also makes a good point for the people with disability as they are comfortable reading well placed content on screen reader or text browser.
The bundle of benefits does not end here. You can easily change your web site drastically for screen or print compatibility by mere changing a .css file. Hence it comes out uniquely beneficial for making your web site real accessible not only for average users but users with limitations and disability.
Yet another important point that enhances the usability of your web site is that CSS lessens HTML/text ratio considerably. Its advantage percolates down to load time of the page. Web pages do not take ages to load and users are likely to get information instantly and the easy way.
Still significant point with the use of CSS is that you can position the main content atop the source code. By doing so content part of the web page gets instantly displayed followed by graphics and tables shortly afterwards. The way the page is getting loaded assumes importance because users are dished out relevant information without much fuss, instead of waiting a longer while for graphics and content displayed together, just as what happens in case of tables.
Lesson: CSS can escalate the degree of your web accessibility
Tables should be used only in cases where there are not any better technical options.
The use of tables might serve some purpose in some context, but in matters of disabled users, make it sure they do not end in despair. Selective use of tables apart, optimal use of CSS in your web site advantageously pushes the degree of your web accessibility.