Conclusions
I set out to do several things with this project. I wanted to explore this whole idea of accessibility and see what kind of laws and public standards have been set dealing with access to information. I wanted to pick apart some well-known sites and see how bad the situation truly is in order to illustrate the gravity of the situation and impress on the reader the need for improvement. I then wanted to develop universal Web design as a whole framework for thinking about media on the Web -- blending XHTML, CSS, clever techniques for enhancing the accessibility of websites, and deliberate planing and design. I tested these techniques on three (actually four, including this project site) site prototypes. Finally, I attempted a Google redesign to attack a specific accessibility problem and to try to conceive new ways of doing things.
It is not that this work has been particularly groundbreaking. There is an ever-growing community of Web developers out there that are coding for validation and pushing the envelope of XHTML/CSS site design. There are also many who are active in accessibility. This project hopefully demonstrates the intricate relationship between the two. Most importantly, I hope I have made apparent that accessibility on the Web is a huge issue -- there are legal as well as economic ramifications, for to ignore users with disabilities is to exclude over 30 million Americans from accessing one's services or products. Moreover, blatant inaccessibility is simply another form of discrimination, and while it might be an unintentional byproduct of ignorance, that does not make it justifiable.
Proposed Techniques
So out of all this analysis and discussion, I am afraid I have done a poor job actually elucidating my proposed techniques. Here we go:
Suggestion 1: Back to the Basics
HTML is not a graphic design language. One should not abuse HTML syntax to generate the proper visual effect at the expense of clean, lightweight, valid code. The prototypes of this project have shown, I hope, that there is almost always an equivalent (not necessarily "equal") way of designing a site using solid CSS and valid XHTML instead of table tricks and font tags.
Focus on the organization of the content first. Web pages for the most part are documents (barring the artsy sites), so they should look and feel like documents, and the code should reflect this inherent structure. Use headers, paragraphs, images, links, tables, and lists to present the content first and foremost. After the content is ready in black and white text, it is then time to design the style.
Stay focused on content and not form. While the content template is being prepared, wrap logical groupings of information in well-named, context-specific <div> tags. This will then allow the designer to specify CSS style to apply to the grouping, but above all it supports the goal of separating form from function.
Suggestion 2: Adding Style
Once the document is prepared and has appropriate <div> markup to group components together, apply Cascading Style Sheets to the page, not only to control colors and fonts, but also to arrange elements visually on the page. This solidifies the shift away from table-based layouts towards the freer CSS-based layouts that can be changed so easily while making XHTML pages much nicer for screen-readers, Palm Pilots, and other user agents.
Suggestion 3: Deliberate Navigation Schemes
As with any website, the designer must devise a consistent and clear navigation system. The same main site navigation links should be available on every page, and sub-navigation should be obvious and logical. Users with learning disabilities may not be able to process complicated and/or "creative" navigation schemes, so the chosen method must be simple and intuitive.
Hidden jump links at the top of the HTML page are an easy and clever means of enhancing the usability of websites. These links allow the user to take a shortcut to various bookmarks in the page, such as the top of the navigation panel or the beginning of the page's primary content section. The method I propose is a double set of hidden links to create the desired result. The first are textual links that are completely hidden from the browser and the screen-reader but that show up in full form in old browsers to allow those users to navigate the pages more easily (since the content stretches out vertically a lot more when you take away table layouts and CSS). The other are 1 x 1 transparent GIF links with the alt text that is the same as the textual links. These small images generally do not show up on the screen, but they indeed are picked up by screen readers, so visually impaired users reap the benefits. View an example of the XHTML and CSS code I use to generate this effect.
Suggestion 4: Allow High User Control
Perceptible information is the new differentiator. In the past, strict supply-side control over appearance (font, layout) was the holy grail of web design. Designers worked on a pixel basis to craft a website to look exactly as conceived. The new school of thinking returns a large degree of control over the layout of the site to the user, since so many visitors to a website may have vision impairment or simply choose to sit far back from the screen. Thus, scalable fonts, relative widths (if possible), and customizeable colors are the new differentiators because they allow users to view the content in a way that accommodates them.
Suggestion 5: Logical Content Flow
The screen-reader's cursor progression should be logical.. As the cursor moves down the page in an automated fashion -- or simply if the user chooses to use the TAB key instead of the mouse -- the order in which the content is processed should reflect the document structure. It is poor design to have a site in which the cursor progresses through a bunch of garbage or an enormous set of navigation links before reaching the meat of the site. Not only does this take longer, but it also increases the physical load on the user -- some of which may have poor coordination or physical disabilities.
Use CSS positioning and layers to arrange things visually. Naturally, site layouts would tend towards uniformity if everyone arranged the content logically both in practice (for the screen-readers) and in presentation (for the visual browser). Rather, I advocate logical content flow augmented by full-blown CSS positioning and layers to arrange conceptual blocks of information in a more visually-pleasing way on the screen. The alternative is using tables to lay out the content, which disturbs the logical content flow since a website itself is not tabular data, but a document (which may include tabular data in it).
