SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot bo diddly's Avatar
    Join Date
    Nov 2002
    Location
    uk - worcester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tabindex problem

    Hi all,

    I have set up a standard form - here is the code

    Code:
     
    <form action="http://www.idezign.me.uk/cgi-bin/mailform.pl " method="post" name="contact" id="contact">
    	<fieldset>
    		<legend>personal details</legend>
    		  <label>name</label>
    			 <input type="text" name="name" tabindex="1">
    		   <label>company</label>
    			 <input type="text" name="company" tabindex="2">
    		   <label>email address</label>
    			 <input type="text" name="email" tabindex="3">
    		   <label>telephone no.</label>
    			 <input type="text" name="telephone" tabindex="4">
    	</fieldset>
    	 <fieldset>
    	   <legend>contact preference</legend>
    		   <label>email</label>
    			 <input type="radio" class="radio" name="contact preference" value="contact me by email" tabindex="5">
    	<br>
    		   <label>telephone</label>
    			 <input type="radio" class="radio" name="contact preference" value="contact me by telephone" tabindex="6">
    	<br>
    	 </fieldset>
    	 <fieldset> 
    	   <legend>enquiry type</legend>
    		   <label>accssibility audit</label>
    			  <input type="radio" class="radio" name="enquiry" value="accessibility audit" tabindex="7">
    	<br>
    		   <label>site design</label>
    			  <input type="radio" class="radio" name="enquiry" value="site design" tabindex="8">
    	<br>
    		   <label>site re-design</label>
    			  <input type="radio"  class="radio" name="enquiry" value="site re-design" tabindex="9">
    	<br>
    	 </fieldset>
     <br>
    	
     <input type="submit" name="Submit" value="submit the form" class="button" tabindex="10">
    	<input name="clear" type="reset" id="clear" value="clear the form" class="clear" tabindex="11">
    	<br>
     
      </form>
    initially I used labels with the associated input fields and assigned a tabindex which allowed the user to tab through all the form elements. However I decided to use fieldsets and legend tags, and now when the user tabs through the form it jumps from fieldset to fieldset and misses most of the input options. Unfortunately I have no way of testing this properly so I could really use some advice on how to achieve the optimum accessibility. Do I have to revert to not using fieldsets or is there another way.

    I hope I have made this clear enuogh?

    Thanks.

    Bo
    You're not drunk if you can lie on the floor without holding on

    www.idezign.me.uk
    www.theonlinediary.com

  2. #2
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to tab ok for me up to a point. It tabs through the input boxes in the first fieldset and to the first radio button in the subsequent fieldsets, I'm not sure why this is.
    FYI the label should be associated with the form element eg

    <label for="name">name</label> <input type="text" name="name" tabindex="1" id="name">

  3. #3
    SitePoint Zealot bo diddly's Avatar
    Join Date
    Nov 2002
    Location
    uk - worcester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that daz, i will amend the code, but i still need it to tab properly.
    You're not drunk if you can lie on the floor without holding on

    www.idezign.me.uk
    www.theonlinediary.com

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Actually I think that is how it is supposed to work since radio buttons are meant to be bound; thus you use the up and down arrow keys to move the radio check state. I know it sounds weird but...

    I ran Opera 7.11 and Micro$oft IE 6.0 with one of my own test surveys with the same results I'll have to sneak Firebird onto the network later.

  5. #5
    SitePoint Zealot bo diddly's Avatar
    Join Date
    Nov 2002
    Location
    uk - worcester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks coder, that makes sense as they are after all a radio group. I am wondering how would this work for a blind user who is relying on tabbing and say Jaws for his info, how would he/she know that they had tabbed to a group with several options?

    Bo
    You're not drunk if you can lie on the floor without holding on

    www.idezign.me.uk
    www.theonlinediary.com

  6. #6
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bo diidly, an accessibility issue in your code above:

    The "input" tag does not have an "id" attribute which must be used to explicitly associate this control with a "label" element. When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues [Section 1194.22 (n)]. Information attached to controls via the "label" element can be very useful to users of talking browsers. Note that "id" and "for" values are case sensitive. Visit http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels for more information.


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
  •