Nathan J Pledger

Anatomy of an Accessible ASP.NET 1.1 Site (part 1)

While ASP.NET 2.0 has appeared, and (finally) outputs XHTML which helps move the ASP.NET community to true accessibility, 1.1 is still around and will be for some time yet. This article covers how I developed a site using standards for mark-up, style-sheets and accessibility and includes a couple of neat tricks preened from my experience and others’ example.

The site can be viewed at ZoomTheGroom.co.uk.

Front Page

Accessibility is about opening up content for all, but trying to maintain the best experience for the majority. This can often be quite challenging, particularly with regards sites that are rich in media such as images and video. This site relies heavily on a number of images that hold the site together. It was important to ensure that the images were maintained, but did not reduce the accessibility for lower-level browsers.

The front-page of the site is shown below. I have annotated the image with numbers and modified the brightness of the image to illustrate the various points. We will compare these points to the Accessible version later.

1. The heading of the site is an image, which is itself inaccessible. This is overcome by adding an ALT tag to it, and by providing a text equivalent of the image in the down-level representation of the site. This is explained in full when we cover the accessible/down-level version of the site.
2. The top-links are grouped together by virtue of a UL tag. This tag is styled so that it no longer appears as a bulleted list in the standard version of the site.
3. The central image holds the entire of the page together. It is quite a large image, partly due to the area of the image, but also because the client was keen on a high quality image. Therefore, where an image would normally be "web-ified", this was tweaked to the minimum amount possible to maintain quality. This has the downside of it loading slightly slower.
4. This is not actually text, but a graphic of some text. The stroke-effect was created in PhotoShop, and is a standard tool used to create contrast for text. Once again, using graphics reduces the readability of the page which impinges on accessibility. We will cover how this was overcome later.
5. The links to the various parts of the site were implemented as a UL list, as discussed in point (2). This time, they are styled to be vertically aligned, with CSS used for hover-effects.

Now lets consider the same page, but in the accessible / down-level representation. Although this is not by any means an effective test of Accessibility, it does provide us with a basic idea of how the site would be interpreted by a down-level browser, such as a screen-reader, a text browser such as Lynx, or maybe a mobile phone. This representation should be as readable as possible, and should not contain graphical furniture, devices or any content that is not pertinent to the content. Screen-readers have particular problems interpreting such devices which leads to confusion of the user.

By considering the same points, we can see how we have overcome some basic problems in maintaining accessibility of the site.

1. The heading of the site is an image, as shown. However, the accessible representation also renders a text-equivalent of the image, as an H1 tag. This maintains semantic mark-up and makes it easier to identify context. This extra text was hidden using a simple CSS rule:
   h1 { display: none; }
2. The top-links are grouped together by virtue of a UL tag. As can be seen, the accessible version renders these as a group. Notice that the standard rendered version of the site has dividers, similar to pipes (|) between each link. Using actual pipe characters - as is often the case with sites using text links in this manner - would result in the characters being rendered superfluously. As they offer no real value, other than a graphical device, they were not used. Instead, I used a right-margin to try and obtain a similar result.
3. This third item is placed in t he middle of the page to illustrate its absence. The images that make up the site are pointless furniture as far as the flow of content goes, and as such, as been forfeited. This was performed by loading images that should not be regarded as content as background-images. By turning off CSS and mimicking a browser that ignores such styling, the images no longer appear:
   div#frontImage { background-image: url(....); }
4. As already discussed, this is rendered graphically in the standard representation. This leads to the problem of how do we provide an effective alternative. We could use an ALT tag, but this implies that the image is an image for a reason, and not just as a means of creating a graphical effect. Therefore, I used the Phark image replacement method to render the image as a background-image, but place the text off-screen in standard rendering.
   #pharkImgReplaceH2 { display: block; float: none; height: 48px; text-indent: -5000px; background: url(http://www.zoomthegroom.co.uk/images/pageh2.gif) no-repeat; }
   Note the text-indent property places the text off-screen by using an obscene negative value. As the downlevel version of the site ignores CSS, this rule is not implemented and the text is rendered normally, without the graphic.
5. The links to the various parts of the site were implemented as a UL list, as discussed in point (2). Again, these are grouped correctly.

Benefits

By taking a bit longer in the working out of the CSS and how the content fits into the overall readability of the site, it is possible to create a readable site for those with browsers that can render graphics, and those with browsers that can't, have them turned off or use a specialised method of rendering content, such as providing a braille representation of the site.

The next installment of this entry will cover the main pages, which will include form design and how to maintain XHTML mark-up within an ASP.NET 1.1 environment.

I am aware of the broken images and will correct them shortly.

Comments disabled on this post due to spamming.