Every time I mention AJAX in a talk, I can’t help but stress how important it is to use an a tag, or a button. I have just read a blog post by the guys over at 456 Berea st. One thing their blog post unfortunately assumes is that you, the developer, are in fact using a tags. The problem is that in truth, there are a lot of javascript calls not on an a tag nor a button. Why is this? Sloppy coding.

Lets start by explaining what the a tag, and the buttons are meant to be used for.

Interactive content is content that is specifically intended for user interaction.

The w3c specifies:

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor).

With regards to the button element, the w3c specifies:

The button element represents a button. If the element is not disabled, then the user agent should allow the user to activate the button.

Now, I may be wrong, but when AJAX comes in to play, I would presume this would therefore mean that if the AJAX is doing a content call, you should use:

<a href="{url}"/>

And if the user is performing an action. You, as the developer, should use:

<button></button>

Far too many people are using a div with an event handler. Why is this a bad thing to do?

• Accessibility
• SEO Friendly

Now, with regards to accessibility, there is another massive mistake people make. CSS styling, in this day and age, thankfully, almost all devs use the :hover selector. But what about the :focus selector? Some people use tab to navigate a website. The mouse isn’t the only navigation method. Not all accessibility is down to javascript turned off…

</rant>