Making something else behave like a link

[Raffles]

I've noticed Gmail and Imageshack's FAQ use things like span and p as fake links. They use javascript to make them clickable and look like links.

Why do this? The only possible advantage I can see is that people don't see anything in the status bar.

[vic.stanciu]

[...]that people don't see anything in the status bar.

It's not that. You could use a link with href="#" and the function call on the onclick event, folowed by "return false;" so that the page doesn't "jump" to the top, and get the exact same effect.

The thing is that those aren't even supposed to be links, because they don't take you anywhere. So why would <a> be better? They needed an element to control an event, so p, span, etc seem like the best semantic choices.

It's all about using the HTML tags in a logical way, the way they were intended.

[Raffles]

That makes sense.

Could CSS be missing something there then? You can achieve more or less the same thing using :focus on a <p> for instance, but you would not be able to collapse many of them at a time, only one. Should there be a :click pseudoclass or is that Javascript-land?

[zcorpan]

There is a :click pseudo-class, it's called :active.

Links are by default focusable by keyboard. Spans aren't. So if you want your app to be usable with keyboard it would make sense to use elements which normally recieve focus. Though, links aren't the only elements that can recieve focus; buttons and other form controls come to mind.

[Dom.S]

I can never quite understand the reason why people do this. Is there a hidden benefit I'm missing? It's not as if it's any less effort to code sites this way. An example that I found recently was the PMachine site.

All of the main navigation uses an onclick event applied to a table cell. Not only does it make it impossible for people to open links in new windows and focus via the keyboard, the entire site is rendered un-navigable to anyone with javascript disabled.

Edit: FWIW I don't have quite such a strong objection to the use on Imageshack's FAQ page, although if they were <a> tags then at least users could navigate via their keyboard.

[gnarly]

I've noticed Gmail and Imageshack's FAQ use things like span and p as fake links. They use javascript to make them clickable and look like links.

Derek Featherstone's presentation at dConstruct showed exactly why this is a bad idea: Screenreaders don't see a link, so they don't report one to their users. If they don't know it's there, they can't use it. What's more, keyboard users can't focus the 'links', so they can't use them.

It renders them inaccessible and it's very bad practise. GMail and GCalendar are both bad in this respect.

[rhlowe]

That makes sense.

Could CSS be missing something there then? You can achieve more or less the same thing using :focus on a <p> for instance, but you would not be able to collapse many of them at a time, only one. Should there be a :click pseudoclass or is that Javascript-land?

In theory, anything could have a :hover pseudo class, try it in ffx. The problem is IE below 7 doesn't support it. That was, however, one of the few things that were fixed in IE7 I believe.

[Raffles]

Links are by default focusable by keyboard. Spans aren't. So if you want your app to be usable with keyboard it would make sense to use elements which normally recieve focus. Though, links aren't the only elements that can recieve focus; buttons and other form controls come to mind.

I hadn't thought of that, it's a very valid point. I've been unable to use a mouse a few times and have had to use the keyboard, so it is a relevant point.

There is a :click pseudo-class, it's called :active.

Maybe I should have called it :clicked then. Because :active will still only work for one element at a time. On imageshack's FAQ, you would still only be able to collapse one answer at a time.

It's not that. You could use a link with href="#" and the function call on the onclick event, folowed by "return false;" so that the page doesn't "jump" to the top, and get the exact same effect.

I was wondering how people achieved that. Not with the # business, but having links pointing to something like http://www.domain.com/mypage/removethisbox/ which would remove a box on mypage or something of the sort.

I'm not sure I can be bothered to think about people with Javascript turned off. It's pretty silly, especially in this day in age with AJAX and JS playing a major role in the web. Particularly now that modern browsers have wisened up to a lot of annoying and insecure javascript "tricks" people used to use.

[gnarly]

I'm not sure I can be bothered to think about people with Javascript turned off. It's pretty silly, especially in this day in age with AJAX and JS playing a major role in the web.

You're not thinking outside the box - in partiucular that box sat on the desk in front of you. You need to remember that not everybody is using a desktop computer with a whizz-bang browser. You need to consider people browsing on PDAs, smart-phones, hand-held gaming rigs, set-top-boxes, games consoles and so on.

Using Javascript as a progressive enhancement (rather than a relied-upon technology) is the way forward here.

[Dom.S]

Even those who are browsing through your typical grey box and monitor combination can't be assumed to have JS enabled. What about everyone browsing behind over-zealous corporate networks, plenty of whom are happy to disable any scripts running on their machines without their permission?