SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Making something else behave like a link

    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.

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Calarasi, Romania
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [...]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.
    v-wdd.net/blog/

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Simon Pieters

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(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.
    VayaDesign - Standards Based Web Development

  6. #6
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.
    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.
    Last edited by gnarly; Sep 21, 2006 at 07:06. Reason: speeling and grammer
    Olly Hodgson
    thinkdrastic.net

  7. #7
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pseudo classes

    Quote Originally Posted by 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?
    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.
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    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.

    Quote Originally Posted by zcorpan
    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.

    Quote Originally Posted by vic.stanciu
    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.

  9. #9
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    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.
    Olly Hodgson
    thinkdrastic.net

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(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?
    VayaDesign - Standards Based Web Development


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •