Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old August 28th, 2008, 11:17 AM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default Accessibility: Screen-Reader & Drop-Down Menu

I have a form that collects the user's date of birth to compare against database data, and it works fine. But a blind user recently let me know that when his screen reader reads through each of the drop-down menus, they are one increment off on their number. I think this is because the first option has an empty value while the text has a value (example: "- Year -").

So is there a way to get this working properly for a blind user, while still keeping the first option's value as empty? I've included the code for this file below. Any help would be greatly appreciated. Thanks.

CODE:
Code:
<label for="dob_month"></label>
<select id="dob_month" name="selectMonth" tabindex="1">
    <option value="" selected>- Month -</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<label for="dob_day"></label>
<select id="dob_day" name="selectDay" tabindex="2">
    <option value="" selected="">- Select -</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>

<label for="dob_year">Year</label>
<select id="dob_year" name="selectYear" tabindex="3">
    <option value="" selected="">- Select -</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>

</select>
KWilliams
Reply With Quote
  #2 (permalink)  
Old August 28th, 2008, 11:52 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

See if this works for him.

Code:
<select>
<optgroup label="Month">
<option value="01">January</option>
<option value="02">February</option>
...
</optgroup>
</select>

http://www.w3.org/TR/html401/interac...#edef-OPTGROUP

--
http://yupapa.com
Reply With Quote
  #3 (permalink)  
Old August 28th, 2008, 12:05 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I like that idea, but it doesn't allow the "Month" to be selected when the page is loaded, vs. the 1st option (ex: January). Is there a way to add that functionality to the optgroup, because I'm not seeing one in its list of possible properties?

KWilliams
Reply With Quote
  #4 (permalink)  
Old August 28th, 2008, 04:17 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Not with HTML. Possibly with JS, but I don't think so. The label can't be selected or focused, so I don't see how it could be done. But I'm no JS wiz, so don't take my words for it.

--
http://yupapa.com
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Drop down menu mizlatic BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 4 February 11th, 2008 07:02 AM
crystal report asp.net & acrobat reader hamzah Crystal Reports 0 February 28th, 2007 07:06 AM
Drop down menu antoneath Beginning PHP 1 January 27th, 2006 08:45 AM
right click menu hidden by drop-drown menu Andraw HTML Code Clinic 0 March 18th, 2005 03:28 PM
drop down menu scrowler Javascript 1 January 27th, 2005 05:44 AM



All times are GMT -4. The time now is 06:27 PM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.