SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Date picker accessibility problem with tabindex

    I would like to ask, if someone has an idea how to go through accessibility problem with javascript date pickers, when is used tabindex attribute in form.
    When you add tabindex to set order of inputs in form, then is not possible to get
    to datepicker , which is nextSibling to appropriate inputs. I try few solutions, best seems this:

    Code:
    function nextTab(el){
    n=parseInt(el.getAttribute('tabindex'),10)+1;
    el.nextSibling.setAttribute('tabindex',n);
    }
    ...
    document.getElementById('od').onblur=function(){nextTab(this);};
    document.getElementById('od').nextSibling.onblur=function(){this.removeAttribute('tabindex');};
    document.getElementById('do').onblur=function(){nextTab(this);};
    document.getElementById('do').nextSibling.onblur=function(){this.removeAttribute('tabindex');};
    But it not works well, on first focus and I dont have idea why. I see that I could rewrite all tabindex after those affected input with date picker, but it is a lot of code. I am not sure also about tabindex. Is it problem to have html tabindex order like 1,2,3,4,6,8 and leave form without tabindex 5 and 7, when javascript is off? (I mean tabindex 5 and 7 will be at elements added by javascript, so question is what happen when I tab from 4 to 6, when 5 is not there?). I dont know how to explain it better. Example is here http://www.kongresove-sluzby.cz/poptavka.php in the middle of form.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are interested in accessibility, do not set tabindexes.
    Let the browser go from one field to the next on tab.

    To skip over a group of items, call focus on the control you want to go to-tabbing will recommence at that point.

    And setting a control to disabled, or its display to none will take it out of the tabbing order.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Your tabindex numbers don't have to be sequential. I tend to leave large gaps in mine actually, for example going from 20 to 30 between fields. I do this because if I ever have to add a field in between in the tabbing order I can just say tabindex=25 instead of updating every other field on the page.

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for help, this answer save me a lot of time.


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
  •