I set out recently to learn how to create forms that utilized standards better. The first thing I learned was that I was not using a very important tag that actually helps make forms more accessible. Accessible forms mean forms that are easier to navigate for those with disabilities. To create a form that is accessible, all you need is 1 tag, label.

The label tag makes this possible by associating text specifically with a form field. To do this use the label tag including the attribute for. The value of for should be the id of the form field. That’s it. Then, all you have to do is make sure you use the label tag for all the fields in your form. This will make your forms easier to navigate for screen readers because it knows which fields to associate with which text.

Other tags you can use include fieldset and legend. Fieldset is used to group a set of fields together while legend is used to give that fieldset a title.

For specific examples of correct usage of these tags, see this post on HTML Dog on accessible forms.

The second part of this is how I learned the best way to structurally markup forms. I was looking for a way to markup a form using CSS and not tables. After experimenting a bit, I learned it is best to use tables for now and to use CSS to style the tables. There is just no way to do it and maintain cross browser compatibility without using tables. I think the reason is that there is so much variance in how browsers display form fields.

Using tables to structurally markup forms, CSS to style the forms, while using label to make them more accessible, allows you to create accessible forms that look the same across all major browsers.

Shoemoney posted yesterday about how Aaron Wall gave him advice on how to get his blog out of the supplemental results in Google. According to Shoemoney, after one month, his blog is out of supplemental results, and his traffic from Google increased 1400%. He also said that most of it was done in the robots.txt file.

In the comments, a user posted the content of Shoemoney’s robots.txt file. Here is what he posted at that time.

User-Agent: Googlebot
Disallow: /link.php
Disallow: /gallery
Disallow: /gallery2
Disallow: /gallery2/
Disallow: /gallery/
Disallow: /category/
Disallow: /page/
Disallow: /pages/
Disallow: /feed/
Disallow: /feed

It looks like Shoemoney is avoiding supplementals by getting rid of duplicate content issues. That is why he disallowed the gallery, category, pages and feed directories.

Shoemoney then responded that the robots.txt was only 50% of the problem. The rest was overcome by adding dynamic title and description tags plus more on page internal linking.

There you go. SEO advice straight from Shoemoney. He claims he sucks at SEO, but it looks like he is getting some good advice from the right people.

It was announced today that Wordtracker unveiled a new free keyword suggestion tool. Wordtracker already has a free version of their keyword research tool, but it only gives you 15 results at a time. Plus, you have to register to use it. Otherwise, it has a lot of the functionality of the paid version of the tool.

The new tool gives you up to 100 results, but has no other functionality of the paid version. And you don’t have to register. It does still allow you to click on a keyword result to search on that phrase, rather than typing it in, further allowing you to narrow your searches.

I think this is pretty cool, even though I am already an active Wordtracker subscriber. I should find it pretty useful. Most of the time when I am looking for keywords, I need to find the top ones pretty quickly. Plus, it’s free. So if you haven’t seen it yet, check it out. If you don’t already have a subscription, it is another place where you can get quickie keyword research for free.

One thing I always have had trouble with in building web pages with CSS is setting the “z-index” property. In CSS, the “z-index” is the stacking order on the page. It makes sense if you think of it as adding a third dimension to the web page.

I run into the problem often where I need an element to load on top of another element, and they always seem to want to load in the opposite order. Many times I have tried to change the z-index without much success. So much so, that I gave up trying to use it.

Well, I finally figured out what I have been doing incorrectly all this time. To get z-index to work, both elements have to have the same parent. What this means is that if two elements have different parents you cannot change the z-index relative to each other by setting the z-index for those elements. You have to change the z-index of the parent element.

Duh! Solving this problem is a major help to me though because now I can correctly set the z-index and solve a lot of CSS design problems I have been having.