Accessibility: Screen-Reader & Drop-Down Menu

kwilliams · August 28th, 2008, 10:17 AM

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

meow · August 28th, 2008, 10:52 AM

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

kwilliams · August 28th, 2008, 11:05 AM

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

meow · August 28th, 2008, 03:17 PM

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