SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the proper implementation of tabindex?

    How should it be used, how does it function, etc.?

    I would like to use this technique in my current project and maybe add it to another site that I look after, but I can't see how it really works and therefore how it benefits anyone.

    I have tested it out recently based on a tutorial that I found (can't recall the source) but it seems as if it does nothing different compared to tabbing through anchors and form fields without tabindex in place.

  2. #2
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By default, tabbing between fields in a form will switch them in the order they appear in the html. If you use tabindex you can customise the order in which they are tabbed.

    This page explains it a bit better: http://www.htmlcodetutorial.com/form..._TABINDEX.html

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does it also work well for anchors? That's really my main aim; making the anchors as easily navigable as possible. I have been trying it on anchors, but it seems to ignore the first couple of links that I placed in the order (in a separate list, which is above the main list in both the mark up and on the page).

  4. #4
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it works for anchors toop. Take a look at the SitePoint reference page for it: http://reference.sitepoint.com/html/a/tabindex

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks. I'll stick with it.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you want to make a page more accessible then you delete the tabindex references from the page. Most of the time they hinder rather than help accessibility. It was an idea that was meant to improve accessibility that turned out to have the reverse effect.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to make a page more accessible then you delete the tabindex references from the page. Most of the time they hinder rather than help accessibility. It was an idea that was meant to improve accessibility that turned out to have the reverse effect.
    That's interesting and surprising. Not something that I have read about before.

    Thanks for the info.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here's some reference material about tabindex and the accessibility issues involved.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •