Checklist for Optimizing Web Design

In this post, I propose that a combination of valid, accessible, and search engine friendly markup is the perfect recipe for optimal web design.

For markup to be valid, it needs to conform to the guidelines laid out by the “governing body” of HTML standardization: the World Wide Web Consortium, or W3C. While the Internet anxiously waits for HTML5 to shift in status from candidate to recommendation, we’re stuck with ye olde HTML 4.01 standard (est. 1999) as laid out by W3C. Naturally, HTML5 is already widely supported by all the major browsers, and it can (and should) be incorporated in web design without hesitation.

Accessibility here means that the markup follows the recommendations in the Web Content Accessibility Guidelines (WCAG). WCAG is developed by the Web Accessilibity Initiative (WAI), also engineered by W3C. The guidelines, now matured to their 2.0 version (since 2008), provide a list of steps to consider during web design. These steps aim to make the pages accessible for users with disabilities, and also for different platforms and user agents such as mobile devices.

Finally, search engine friendly markup follows the best practices identified by the enormous SEO community, all working to uncover the best ways to make friends with the elusive search engines that govern our daily life on the web. There is a seemingly endless supply of good SEO guides for optimizing web design, but if the topic is new to you, you might as well start with SEOmoz’s Beginner’s Guide To SEO.

Optimal markup is good for your web design

On our way to finding the best practices, i.e. the perfect combination of recommendations, let’s get one thing straight. It is a self-evident, nature-given, inalienable fact that your markup must be 100% valid. Even though the HTML standard is just a recommendation, meaning that web browsers can steer around your poor markup, it’s no reason to be lax about it.

For one thing, invalid markup is a sign of sloppiness. Web designers should take pride in creating markup that is clear, readable, and passes validation tests. Also, valid markup is always a requirement for accessibility and SEO. There is no such markup that is search engine friendly or accessible and not valid at the same time. So if your markup is valid, you are well on your way to optimizing it for WCAG and SEO as well.

Finding the optimal markup for W3C, WCAG and SEO is the holy grail of web design

Whether you want to promote your site’s accessibility or search engine friendliness is up to you. Most of the things you do for SEO will apply for WCAG as well, and vice versa. Note that there are elements prohibited in one but accepted in the other, and there are elements which have relevance only for one but not the other. In your web design efforts, I recommend that you pay heed to the rules and make note of the recommendations. You can always try to make your website as accessible, search engine friendly, and valid as possible, but this post looks to find the minimal strategy required to find the holy grail of optimal markup.

The guidelines

What follows is essentially a checklist for your web design needs. I have chopped it up so that first you see the recommendations that are shared by SEO and WCAG. Following that are the recommendations that are SEO- or WCAG-specific. A green bulb means that the item is a requirement. A yellow bulb means that the item is a recommendation (or has some other significance). A red bulb means that the item is prohibited, and a dash means that the item has no (significant) relevance. Note that W3C validation criteria are not listed, as I mentioned above that regardless of recommendations or guidelines, make sure that your HTML is always 100% valid.

For the WCAG guidelines, I use the recommendations in WebAIM’s WCAG 2.0 checklist. Kevin Vertommen has provided a wonderful SEO checklist for web designers, which I refer to here as well. Note here also that because especially SEO best practices are quite subjective and usually require context to perform well, I have used my judgment on what is most often the best practice for each recommendation. This means that you should take it with a grain of salt, and treat it as a requirement only if it’s relevant for your particular SEO case.

Download the entire chart in PDF format (Comparison chart for SEO and WCAG guidelines.pdf).

In the snippet above I only included those recommendations that apply to both SEO and WCAG guidelines, in good or in bad. The PDF contains the entire chart. Most of the recommendations put forth by WCAG and SEO are relevant to one but not the other. As you can see from the image above, I identified only three recommendations as possibly harmful, and they were only harmful to SEO. They are easily avoided, as you should really try to do without frames, and null ALT text simply has no justification. If you have images that serve no content purpose, make them background elements by using CSS.

Because SEO is the only thing that stands to be harmed if you follow all guidelines diligently, it would imply that you should make following SEO guidelines a priority. So when writing markup 1) make sure it is valid, 2) make sure your page conforms to all SEO best practices, and only then 3) make sure your page follows WCAG recommendations. Just be wary of using frames and null ALT text, and you’ll do fine.

The PDF is not comprehensive, but it does serve as a nice “checklist” for checking if your site adheres to accessibility and search optimization guidelines. It is not a bad habit to familiarize yourself with these guidelines and to make them part of your web design routine. Once you ensure that your HTML is valid, accessible, and search engine friendly, you can rest assured that you are doing your part in making the Internet a better place.