Jump to content

Accessibility: Screen-Reader & Drop-Down Menu


kwilliams
 Share

Recommended Posts

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:

<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>	<!-- ...and so on: DOB years go to the year 1900 --></select>

Link to comment
Share on other sites

If the problem is that the first value is empty, then ..

So is there a way to get this working properly for a blind user, while still keeping the first option's value as empty?
..no. But you could change the first option to have a value of "Choose now! Do it now, blind man!" or something like that.
Link to comment
Share on other sites

If the problem is that the first value is empty, then ....no. But you could change the first option to have a value of "Choose now! Do it now, blind man!" or something like that.
I must say that this is the BEST reply that I've ever received:)But it's too bad that there doesn't seem to be a way to make this work properly. I received a suggestion to use <optgroup>, but the "Month" text wouldn't highlight in that case. This is kind of a pain.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...