How can you meet the W3C Web Standards?

Web accessibility is the practice of making sure your website content can be accessed and understood by as many visitors as possible, regardless of their physical ability or technological barriers.

As a webmaster, you must ensure that your website can be viewed by both human visitors and Search Engine crawlers, and at times it can get a bit tricky to please both types of visitors.

It may not be always be possible to make all types of content accessible to all your visitors, but as far as possible, you should try to make the meaning of your content understood by everyone.

The W3C Web Standards

The ‘WC3 Web Standards’ are an official set of standards that bring together commonly accepted rules by web-masters around the world. If you can make your website comply to these set of standards, you will greatly benefit by the fact that the spiders can easily navigate your content and your human readers can enjoy a nice-looking website.

What is “Web Standards?”

Web Standards crop up almost everywhere on the internet. The reason is simply that the web standards are incredibly useful and important. They help to ensure compatibility between different computer systems and browser versions, as well as aiding accessibility and search engine optimization.

Why your favorite tool should be the ‘W3C Markup Validator’?

The place to go for definitive information about the web standards is the website of the group responsible for setting them, the World Wide Web Consortium, or W3C for short. You can run your site through their online tool, called the W3C MarkUp Validator and pick up any attributes that don’t comply with the rules.

You’ll be laughing, ’cause it’s so simple!

The beauty of coding to W3C Web Standards is that you’ll find your sites are already well on the way to being accessible. In fact, a simple WordPress site will require little-to-no special attention to bring it up to the highest level of accessibility. However, dynamic and complex themes can easily alter that.

The Semantic Markup

The “Semantic Markup” is the technique of writing HTML code that describes the meaning of the content, rather than simple describing its layout or style. This allows both human readers and spiders to read and understand the context of the content. This context gives the content an extra layer of meaning. The following 9 tips should help you understand the simple power behind the Semantic Web.

#9) The humble “paragraph” tag

How can anyone forget the “paragraph” tag? Known as <p>, the paragraph is to a document as a brick is to a wall. So, whatever you do, don’t just chuck in < br /> tags to create the visual appearance of paragraphs; something that many web designers seem to do with alarming frequency. That would be like building a wall without cement. If you need more space between your paragraphs, look into your CSS file and make the changes there, not in your direct article.

#8) Fine-tuning your tables for SEO

Tables are another area where the meaning of HTML markup is often sacrificed for the designer’s convenience. Semantically, a “table” is a matrix of related data organized into rows and columns, like a list of product names associated with price and color options for example. Tales shouldn’t be used for creating layouts, as the fact that it’s a “table” implies a structured relationship between items in rows and columns that doesn’t  exist.

#7) Be strong, don’t be bold

A subtle, but instructive, piece of semantic markup is the <strong> tag. Most of the time this is used to make the text bold. So why not use the old <b> tag? Well, for one thing, it’s not web-standards compliant. More pertinently, it’s a “representational” tag, meaning it only refers to the way the content should look, rather than what it means. <strong> means that the content is “prominent”, a concept which could be represented in any way you wish, but not necessarily bold.

#6) If you can’t stand straight, use <em>

Similar to the <strong> tag is the <em> tag. Again, this is mostly used to denote the italic text, which used to be accomplished with the nonstandard <i> tag. The semantic meaning of <em> is “emphasis” whereas <i> just means “slopey text.” The fact that some text is “sloping” means nothing to a blind visitor like Google Spiders, however that it has “emphasis” means a lot. For the design savvy among us, there are lost of ways to give emphasized text a visual representation other than italicizing it.

#5) Perfecting your classes

The key to semantic markup is to make use of the existing classes provided within the HTML specification. The also saves you a lot of time! If you do need to represent something in a visually different manner you can still do this by adding a custom “class” to the standard tag, like this <p class=”affiliates-page”>, and creating a corresponding style in your CSS.

#4) Alt Text for Images

Use the alt attribute to describe the content of images, for web-crawlers. This can also help visually impaired users that use screen reader software which reads the text content of we pages using speech synthesis. If your images have no alt text then the meaning of such images aren’t available to both the impaired viewers and Spiders.

#3) Self-closing tags

Remember to “self-close” tags where appropriate. For example, to add a new line to a paragraph you could just add an old-style “break” tag: <br> However, the standards compliant version of the tag self closes, like this <br />

#2) The sub-ordinate headers

You can assign <h> tags to your content that will assign it value and weight, especially when spiders come crawling to your site. If you allow it to isolate important keywords by using <h> tags you are making them more prominent and stand out. You can use anything from <h1> to <h6>, but I’ve never used anything further than <h4>. Knowing this allows search engines to view the contents of the heading accordingly, and give those keywords extra weight.

#1) The King header

One of the most important guidelines, in my opinion, is that of the <h1> tag, which contains the main heading of the page. Everything else on the page is subordinate to the main heading. Put another, the main heading is the most important part of the page.

That’s it ~ If you can stay true to the above 10 tips and also follow some other minor yet important guidelines provided by the W3C, you will be rewarded for making the spider’s job easier.