Creating Accessible (WCAG) Asp.Net 2.0 Websites

rinze — Sun, 27 Jan 2008 12:01:00 GMT

By Now, anybody involved with building accessible websites in .Net 2.0 will have come across the CSS Frienly Control Adapter toolkit. For those of you who haven't, have a look at the codeplex cssfriendly project. Orginally released by Microsoft, but currently maintained by the community.

I'll be doing a series of posts on the subject of building accessible websites using the control adapters, the control adapter toolkit and other techniques, cause there is alot more to it then what is currently being addressed by the adapters in the toolkit. WCAG Guidelines stretch alot further then not using tables to create a page layout. Futhermore, the toolkit itself is far from complete: there are a number of .Net controls that render non-compliant output, which are very difficult to adapt in a correct way (login control, linkbutton, gridview etc.).

In this first post I'll be giving an overview of some of the issues I encountered with the control adapters, the control adapter toolkit in specific and accessibility in Asp.Net websites in general. In the following post, I'll provide solution and techniques for all these issues. Furthermore, I will share my experience in adopting these techniques to create Xhtml compliant websites using MOSS 2007.

What control adapters should be doing
The first thing I noticed when I started working with the toolkit, was the abundance of class names throughtout the adapters. Using css to style your site is one thing, but adding all these class names is another. A good example of this is the menu adapter: all that really needs to be marked is the selected menu item, nothing else. But it marks almost every node!

Removing classnames alltogether by using overloaded controls
Since Xhtml compliance and WCAG are very much general purpose, I'd like to seperate the adaptation of erronous .Net control behaviour and adding classes to add corporate identity to the output.

Adding control adapters for .Net controls
Adding adapters for a various controls can be quite troublesome. We'll give it a go anyways.

Remove Inline styling from your page header
The Inline style added to the page header should be removed. It adds nothing and goes against proper website building principles!

Place javascript in your header
Script tags should be well-formed and placed inside the page header, nowhere else. .Net has a tendency to place them throughout your page!

Take Control of of the rendered output using a XhtmlTextWriter, Modules and HttpFilters
Using various techniques involving httpfilters, page adapters en xhtmltextwriters, alot can be accomplished in an elegant way.

Adhere to some basic accessibility rules!
Some general stuff to consider.

Creating accessible websites using Sharepoint / MOSS 2007
I'll go through the basics and apply beforementioned techniques to properly generate Xhtml compliant websites using MOSS 2007.

I'll follow up on this soon!

Rinze Cats' Blog : HttpFilters

Creating Accessible (WCAG) Asp.Net 2.0 Websites