We spent a lot of time not only making our select boxes accessible but a vast improvement over the defaults.

Quick look

A few things to keep in mind:

  1. You can choose to have a default value set or not.
  2. With no default value set, a required select box will fire validation, which the pattern encapsulated.
  3. Selects take up the same footprint as fields.

Try it out

  • Female
  • Male
  • Other
Age group (with default value selected)
  • 18 - 25
  • 26 - 39
  • 40 - 55
  • 55 - 99

Code samples

<div class="select-demo">
  <div class="dqpl-field-wrap">
    <div class="dqpl-label dqpl-required" id="sex">Sex</div>
    <div class="dqpl-select">
      <button class="dqpl-listbox-button" aria-haspopup="listbox" aria-labelledby="sex"></button>
      <ul class="dqpl-listbox" role="listbox" id="sex-list" tabindex="-1">
        <li class="dqpl-option" id="female" role="option">Female</li>
        <li class="dqpl-option" id="male" role="option">Male</li>
        <li class="dqpl-option" id="other" role="option">Other</li>
  <div class="dqpl-field-wrap">
    <div class="dqpl-label" id="age-label">Age group (with default value selected)</div>
    <div class="dqpl-select">
      <button class="dqpl-listbox-button" aria-haspopup="listbox" aria-labelledby="age-label">
        <div class="dqpl-pseudo-value">18 - 25</div>
      <ul class="dqpl-listbox" role="listbox" id="age-list" tabindex="-1">
        <li class="dqpl-option" id="default" role="option">18 - 25</li>
        <li class="dqpl-option" role="option">26 - 39</li>
        <li class="dqpl-option" role="option">40 - 55</li>
        <li class="dqpl-option" role="option">55 - 99</li>

For more information on implementation read thewiki.