Universal Design: One Site to Rule Them All

As someone who has been building websites for over 11 years, I can tell you the two areas that are the least understood and the most maligned are compliance and accessibility.

Seen as a type of website welfare, only for the few, they are often ignored as an “only if I have to” or “only if I’m sued” addition to most websites. But following W3C compliance and the WCAG (Web Content Accessibility Guidelines) Level AA can help you reach an untapped $13 trillion market, and also reduce your IT costs, ready you for mobile, improve your Google quality score, and organic search engine placements.

Also, adding the accessibility guidelines would require only 2 percent more effort if you’re doing everything else right, so you could have just one website to meet all your needs. (Note: there are some sites where the functionality is so complex a mobile site will be necessary to present users with paired down functionality. However, most sites can be transformed to work with smart phones and dumb phone mobile devices without creating a second site.)

No way you say? Yep, way. Here’s how.

WCAG AA Guideline: Semantically Correct Valid (X)HTML and CSS

Step one is creating a semantically correct site with valid code. But what does it mean to be semantically correct? I like to use house building analogies.

  • Use your HTML for structure only, not presentation. (Think of it as framing on a house) This means no line styles or attributes. Your HTML tags should be completely clean of any extraneous code.
  • Use CSS for presentation layer. (Think of it as the decoration on a house) This means all presentation elements go into your CSS sheets, including image borders and spacing.
  • Use proper HTML tagging for structural and content. (Think of this as knowing the difference between a load bearing wall and a frame) For example, use lists for navigation and footers,tags for paragraph breaks, CSS for spacing instead of , etc. Know what your tags are supposed to be used for and then use them that way.
  • Move all scripting and inline CSS to external files. (Think of this as putting your wires in coils) Make sure all your client side scripting (example: JavaScript), CSS, etc., are in externally included files. This is just a good code practice.

OK, so that was the hard part! You’re almost there once your code is semantically correct, your presentation layer is separated from your structure, and your scripting files are external.

Choose Your Technologies Wisely

The WCAG AA standard requires that your site be accessible with scripting that isn’t keyboard dependent.

You can meet this standard easily for most functionality requirements if you choose your scripting languages and methods carefully. If not, you can offer alternatives, but this is a least desirable method. Good programmers can almost always come up with a better method, so let them flex their creative muscle and come up with compliant solutions.

Think about it. How nice would it be to only have to maintain your one site, instead of two? Remember, “universal design” is about “one site to rule them all!” No more dual site maintenance. Not only will this help you reach that untapped accessibility market, but also reach more and more mobile users as they come online in droves.

Finally: The Secret Ingredient! Adding your Accessibility Tagging

Accessibility tagging is simple. Here are the most common tagging items you need to add to your site:

  • Skip to Content links at the top of the page. Screen readers (and dumb phones) can skip to your content areas and bypass links and redundant content areas. Good for mobile, good for accessibility.
  • Add alt tags to all images. Leave empty the ones that are on decorative items or part of a text link.
  • Make sure your link text is descriptive. This is an SEO standard already and just means, for example, don’t use “click here” or “learn more” on your anchor text. Make it understandable out of context.
  • Make sure your links or click functionality are evident by more than a color change. Again, good for mobile, good for accessibility.
  • Make sure your color ratios foreground to background are 4.5:1. Great for making sure your site looks good on LCDs as well.
  • Make sure all your functionality is keyboard available (i.e. without using the mouse). Good for mobile, good for accessibility.

While there is a bit more to it (for a complete list go to the W3C WCAG 2.0 Guidelines or to WebAim), this gives you an idea of just how easy it is to add the tagging once you have done the rest of the site right from the start. Pretty painless, right?

So Again, Why Are We Doing This?

While it’s most certainly the right thing (and, soon, possibly legal thing) to do, it’s also most certainly the smart thing to do.

So let’s review. Why are we doing this? Simply, it’s the smart thing to do.

However, if you have to make this argument to your manager or CEO, what can you tell them to help bring them on board? Why is it smart to do this semantically correct, universal design, accessibility thing? Let’s summarize.

  1. Clean Compliant Accessible Code = Better Sites = Better Everything! If you code for semantically correct W3C/WCAG AA accessibility compliant code, your code is clean. Clean code is much better for your servers (clean code = light code = less server load) and your SEO and PPC (Google dings sites for long download times), plus it’s easier to use on mobile devices and smart phones.

    And it just looks good! OK, I know only geeks like me look at site code for site validity, but I’ve used that as a deciding factor in site trust.

  2. Ease of Maintenance. Sites that are semantically correct and accessible make site maintenance much easier. So, the next time you want to do a major design change, or just do a general update, you will be thankful for that little bit of extra time you spent getting your site semantically correct and in standards mode.

    Why? Because changing out a CSS/XHTML controlled site layout and design is fairly simple as long as you don’t want to rebuild the house — and even then, it’s much easier in CSS. So while making your header purple and changing all your links to red may not be advisable, it will be simple. Or at least much simpler than before!

  3. Mobile Ready. A semantically correct site, loaded with accessibility tagging, is just waiting for that mobile style sheet to make it dumb phone compliant. While it’s a little more complex than this, a properly coded site will render correctly in the webkit (smart phones). So dumb phones are an easy adjustment.
  4. Better for SEO. This bears repeating because if you use compliant accessible code, your site is great spider food. Your code-to-text ratios are lower and your site downloads faster, which we all know is a new factor in the Google algo game.

Doing all these things will reduce IT maintenance costs, increase your SEO presence, and make your site mobile ready. Now isn’t that worth just doing it right to begin with?

Join us for SES San Francisco August 16-20, 2010 during ClickZ’s Connected Marketing Week. The festival is packed with sessions covering PPC management, keyword research, search engine optimization (SEO), social media, ad networks and exchanges, e-mail marketing, the real time web, local search, mobile, duplicate content, multiple site issues, video optimization, site optimization and usability, while offering high-level strategy, keynotes, an expo floor with 100+ companies, networking events, parties and more!

Related reading

How to lead SEO teams and track its performance effectively: Experts tips
SEO is a team sport: How brands and agencies organize work
Seven SEO tips for image link building to generate more traffic
transformation of search summit 2019