Accessibility Inherent in Good Markup

As a new member of evolt I'm writing this, my first article, inspired by Aardvark's "The Wrong Way to Use CSS in Page Layouts" article and the comments that succeeded it.

The article itself was great, and actually surprised me by highlighting the high use that is made of the CSS positioning feature, something I was quite ignorant of. In commenting on this article, some people bashed WYSIWYG editors which used absolute positioning, promoting hand-coding as the only viable option (my corner, admittedly). Others defended them, pushing the idea that they do indeed speed up layout build when used by designers who (hopefully IMHO) hand those layouts over to a coder for cleanup. The comments led me to thinking about what many people seem to have missed.

We all want our websites to look good. The concept of the internet is nowadays wholly integrated with the concepts of design and usability. We must not forget that it's core purpose is the presentation of information. And because of the way we go about building our websites, some people are missing out.

Consider the internet from a blind user's point of view, for example. They might use a screen-reader. Most of these read the source HTML of the layout file to interpret a page. If a site uses absolute positioning to lay out bodytext, how is a screen-reader to distinguish between what is at the top of the page and what is at the bottom? Perhaps some of them will examine the pixel coordinates and read in order of the lowest x or y value, but then - what is a heading and what is not? The screen reader would be baffled by a tagging scheme such as:

<span class="boldwhite17">This is my point.</span>

Whilst it's much clearer to use:

<strong>This is my point.</strong>

The <span> tag (and similarly the <div> tag) is not descriptive of its contents. Get rid of it. Use the old-fashioned semantic tags (<b>, <i>, <strong>, <em>, <h1>-<h6>, etc.) because they are descriptive of their contents. You can still style them with CSS after all and change them to any colour or size you want.

In terms of positioning — learn to use tables properly. It just takes a bit of practice and if you get stuck, by all means use DreamWeaver to build them. I know myself that when the rowspans and colspans get to be a little too much, I will. Just clean up after it, there's a good web professional. Or else just keep your layouts simple. Less is more, as my design lecturer used to say.

Absolute positioning isn't supported by so many browsers, either. And some do it really badly. NS6 once positioned my image exactly where I wanted it, but at the point where the style tag code was read (just after the body tag) the dimensions of the image were imposed on the space where it would have been, as if had been just an isolated <img> tag. Rubbish!

I have to say I'm as guilty as the next man of tables chock-full of images with image links nestled up flush together (If you're going to do this, for heaven's sake fill in the alt attribute for links!). That's because I've got a boss who's a designer and learned his trade in the print-and advertising industries. So in the past we've collaborated on some nice looking, but bandwidth-beastly websites.

I was as ignorant as he about most of this until a couple of government requests for tender fell on our desk accompanied by a whole booklet on government website accessibility guidelines. Although I must confess to being not entirely au fait with all the points it made (something like it's shunning of more than two columns in tables — boo!), it did provide a good deal of food for thought.

One of the requirements it held was that the government site be Bobby approved — this being an internationally accepted accessibility standard with a very bad logo. Having visited aardvark's portfolio site in search of inspiration, I noted the bobby badge there (along with all the other ones, which led me to liken it to the sleeve of a boyscout's sweater — ho ho), so perhaps he'd care to comment on this and enlighten us further on accessibility issues.

All this does serve to undermine a lot of the things I love about the internet, Flash movies, for example, are a big no-go area for screenreaders. Markup only serves to contain a Flash movie like mounting a picture on board. Maybe in time these things will change.

More than likely HTML, even XHTML will be replaced, perhaps by SVG (Scalable Vector Graphics — almost like a Flash markup language) or something similar, as the chief authoring language of the web, where we can draw circles without impunity, draw typefaces with vectors and still allow screenreaders into markup to pick out paragraphs and headings. One day — when all browsers agree on how to parse a layout consistently. Wow. Wouldn't that be something!

So in the meantime let's not go about building our pages without their wheelchair ramps. The Internet allows people who can't read newspapers or magazines to access their online counterparts via their screenreaders. Let's not ignore their needs and allow the internet to accentuate a disability. The lads who built HTML knew what they were doing and those tags have a reason for being there. Use them.