Web standards and accessibility – what are they and why do they matter? (The Wild West of web design.)

The web is a very young medium – perhaps 15 years old. Like any frontier, it started off a pretty lawless place. As it's growing up, we're getting a few sheriffs who are trying to create a little order; creating guidelines for best practice.

These guidelines are 'web standards'. It's kind of a catch-all term, covering all kinds of best practice ideas for web development, but thanks to the rise of bodies like the World Wide Web Consortium and the Web Standards Project, and a lot of dedicated pioneer developers and designers, there is a consensus on web standards, and they're constantly being revised and improved as technology grows.

But unfortunately, quite a lot of designers still don't work to these guidelines. Our internet sheriffs are volunteers; there's no governing body to see that these standards are maintained. So there are a lot of designers and developers who don't keep up with the industry news, and are still doing their thing the way they've been doing it for the last ten years.

This will change in time, but for now, when you're looking at web designers, it's worth asking them whether they work to web standards and accessibility guildelines. I'm proud to say that Artemis websites are built to web standards, with W3C valid and WAI compliant XHTML and CSS, and that includes the code generated by my CMSes of choice, WordPress and TYPOlight.

The benefits

Here are just a few of the benefits of building sites according to web standards:

Greater accessibility

Accessibility means your website being available to as many people as possible, on as many devices as possible. That includes, for example, visually impaired users who use screen readers, and deaf users, who need text transcripts of audio content.

But it also includes more common disabilities such as dyslexia and colour blindness, and problems so common that they're rarely thought of as a disability at all, such as the fact that senior citizens may need to be able to make the text bigger, or may have trouble using a mouse.

All in all, the people affected by accessibility issues constitute a surprisingly large proportion of the population. Properly coded websites are easier for all these people to use. They're also easier to access on the new generation of mobile and handheld devices, and are more likely to display correctly across a wide range of browsers and platforms.

It's worth noting that a growing number of countries are introducing laws that require websites to be accessible to all.

Smaller file sizes, faster loading

Sites built to web standards have more streamlined code, and so load faster.

Easier maintenance

Sites built to web standards are easier to maintain. That's because they separate style from content: the content of a page (text, key images) goes into the HTML files, and the style of a site (background and font colours, layout, purely decorative images) goes into the CSS files.

This leaves the HTML files much smaller and neater, making it much easier and faster to update your content. And it means that if you want to give your site a new look, you can do it by changing one CSS file, without needing to touch the HTML files at all. So the whole thing is easier, and therefore faster and cheaper, to maintain.

More search engine friendly

If your site is built to web standards, the search engines find it a lot easier to index accurately. In some extreme cases, sites which aren't built this way may be completely invisible to search engines! For example, a site built entirely in one flash applet is probably unreadable to a search engine. Google is the biggest blind user on the planet. It only cares about the text.

What are the standards?

So what constitutes web standards? There are four basic key principles.

Valid code

Most professionals, from plumbers to lawyers to aeroplane engineers, follow a set of standards for their work, and now so do web designers. We now have now standards for acceptable code.

There's an easy way to check if a page has been built with valid code – you can submit it to the W3 validation service, which will give you a report of any errors in the code. Don't panic if you find your site has one or two errors – in the real world, sometimes mistakes happen. But if you find dozens or even hundreds of errors, then your web developer was not coding to web standards.

Semantic code

Essentially, this means that code should be used for its intended purpose. When used properly, code is descriptive – it describes the content it marks up. For example, headings should be marked as headings, rather than being marked as paragraphs and then made to look big and bold.

The classic example here of wrong usage here is tables. In the old days, when the web was young, code was pretty basic, and designers had to squeeze square code into round holes in order to make their sites pretty. They used invisible tables to put things where they wanted them on the page. But table code is intended for tabular data. Noone should be using tables for layout any more.

Separating style from content

These days we don't have to use tables to make things pretty, because we have lovely things called Cascading Style Sheets. Always makes me think of waterfalls. Anyway, this means that we can separate the two elements of a site, putting the content – text, key images, etc – into the HTML files, and the style – what colour your text is, where things sit on the page, any purely decorative images – into the CSS files. I've mentioned some of the benefits of this above, but one especially great one is that users can create their own style sheets. For example, a visually impaired user could set up a style sheet which makes the text big and black and the background yellow, and then set their browser to always use their style sheet instead of the one that comes with the website.

Accessible code

Valid, semantic code with style separated from content is already much, much more accessible than the bad old code we used to use. But there are extra things we can do for accessibility. For example, when a blind person reads a page with a screen reader, the screen reader reads everything on the page in sequence. Most sites have their menus at top, for perfectly good reasons. But think how annoying it would be if every time you went to a new page, you had to read through the entire menu before you could look at the content. Accessibility guidelines address this kind of problem: for example, they ask that we provide hidden links which allow blind users to skip past the navigation to the main content. These guidelines are created by the Web Accessibility Initiative.