This has been declared in WCAG 2.0, published as a W3C Recommendation on December 11th, 2008, where Guideline 1.3 states that we should always create content that can be presented in different ways (for example simpler layout) without losing information or structure.

The easiest way to meet this guideline is to develop our websites starting from a good semantic XHTML structure. We should organize the code so that the most important content always comes as close to the top of the page as possible. Once we have the structure we can then use CSS to change the presentation. But content has to come first. As you know on the Internet content is king and always will be.

The main issue with this approach is that sometime it’s not that easy to get the positioning we need without moving bits of XHTML around. Obviously this practice could mess up the content order, jeopardizing the accessibility of the page.

Dan Johnson published a cool article on how to use CSS floats to achieve any column layout, while keeping the most relevant content highest on the page.

In his example, he uses the exact same HTML markup to create six different layouts by the clever use of CSS styles. This is a great sample of how we can get the design we need, keeping the content in order of priority and safeguarding accessibility.

Try it out!

The first idea was not our own. I think you can easily remember the great success made by what was called “The Million Dollar Homepage”. A simple page covered by a lot of mini banners which has led the owner to become millionaire and to leap to fame.

Quite a few websites adopted this useful way of making money. You can see good examples on CSS Remix and Italian Web Gallery.

In the most cases, you can get more information about the single banner by passing the mouse pointer over it. By doing this action, a small tooltip will appear, providing additional info as the name, the tagline or simply a link back to the website who bought the adv block.

This feature is often realized by using a small JavaScript. But what will happen to those users browsing a page without JavaScript enabled? The answer is simple. They won’t see the tooltip and the adv info. That means the content is not accessible.

So, what can we do to get the same nice tooltip feature and to improve accessibility? The solution is CSS. In fact, we can create pure CSS tooltips which are simple, useful and accessible, ‘cos they work even if the user browse the page without JavaScript enabled. This is the way we followed on CSSGlance.

This is what we’re looking for and now let’s go into details.

We just need a plain list of links. The XHTML code is something like this:

<ul>
<li><a href="http://www.google.com"> <span>Google.com</span></a></li>
<li><a href="http://www.yahoo.com"> <span>Yahoo.com</span></a></li>
<li><a href="http://www.cssbeauty.com"> <span>CSSBeauty.com</span></a></li>
...
</ul>

Now we have to float the <li> elements in order to put side by side each block. Then we can add a relative position to the links, in order to allow the span element inside to position absolutely respect the parent link. The span have also a display:none property which is changed into a display:block one when the mouse pointer pass over the block. You can easily solve ie bug adding some z-index.

Here you have the basic CSS code:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

Let’s take a look at the example! You can download this example (zip-9KB) and use it however you like, but please give a link back to CSSGlance.