问题：下拉列表选择无键盘可访问

Question

我有一个下拉选择。我试图通过键盘访问它，但我无法突出显示keydown或keyup上的选项，也无法按Enter键我无法选择值。下面是我的HTML

<dl id='amount-list' class="dropdown-add">
  <dt>
  <a href="#">                                              
   <span>
   Select Asset Type
   </span>
  </a>
 </dt>
  <dd>
    <input type="hidden" id="selected-type" name="selected-type" value="" />
    <ul id="amount-list-add">
      <li value="A" selected><a href="#" tabindex="-1">A</a></li>
      <li value="B"><a href="#" tabindex="-1">B</a></li>
      <li value="C"><a href="#" tabindex="-1">C</a></li>
      <li value="D"><a href="#" tabindex="-1">D</a></li>
      <li value="E"><a href="#" tabindex="-1">E</a></li>
      <li value="F"><a href="#" tabindex="-1">F</a></li>
      <li value="G"><a href="#" tabindex="-1">G</a></li>
    </ul>
  </dd>
</dl>

Answer 1

使用本机HTML select元素肯定是最好的，但是如果你想/需要使用自定义元素，你将不得不使用aria-attributes / roles和JavaScript正确标记你的元素导航功能可以完全访问。以下是W3中的一个示例，它可以完全满足您的需求：

.annotate {
  font-style: italic;
  color: #366ED4;
}

.listbox-area {
  padding: 20px;
  background: #eee;
  border: 1px solid #aaa;
  font-size: 0px;
}

.left-area,
.right-area {
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
  width: 50%;
}

.left-area {
  padding-right: 10px;
}

.right-area {
  padding-left: 10px;
}

[role="listbox"] {
  min-height: 18em;
  padding: 0px;
  background: white;
  border: 1px solid #aaa;
}

[role="option"] {
  display: block;
  padding: 0 1em;
  position: relative;
  line-height: 1.8em;
}

[role="option"].focused {
  background: #bde4ff;
}

[role="option"][aria-selected] {
  padding-left: 1.5em;
}

[role="option"][aria-selected="true"]::before {
  content: '✓';
  position: absolute;
  left: 0.5em;
}

button {
  font-size: 16px;
}

button[aria-disabled="true"] {
  opacity: 0.5;
}

.move-right-btn {
  padding-right: 20px;
  position: relative;
}

.move-right-btn::after {
  content: ' ';
  height: 10px;
  width: 12px;
  background-image: url('../imgs/Arrows-Right-icon.png');
  background-position: center right;
  position: absolute;
  right: 2px;
  top: 6px;
}

.move-left-btn {
  padding-left: 20px;
  position: relative;
}

.move-left-btn::after {
  content: ' ';
  height: 10px;
  width: 12px;
  background-image: url('../imgs/Arrows-Left-icon.png');
  background-position: center left;
  position: absolute;
  left: 2px;
  top: 6px;
}

#ss_elem_list {
  max-height: 18em;
  overflow-y: auto;
  position: relative;
}

#exp_button {
  border-radius: 0;
  font-size: 16px;
  text-align: left;
  padding: 5px 10px;
  width: 150px;
  position: relative;
}

#exp_button::after {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #aaa;
  content: " ";
  position: absolute;
  right: 5px;
  top: 10px;
}

#exp_button[aria-expanded="true"]::after {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 0;
  border-bottom: 8px solid #aaa;
  content: " ";
  position: absolute;
  right: 5px;
  top: 10px;
}

#exp_elem_list {
  border-top: 0;
  max-height: 10em;
  overflow-y: auto;
  position: absolute;
  margin: 0;
  width: 148px;
}

.hidden {
  display: none;
}

.toolbar {
  font-size: 0;
}

.toolbar-item {
  border: 1px solid #aaa;
  background: #ccc;
}

.toolbar-item[aria-disabled="false"]:focus {
  background-color: #eee;
}

.offscreen {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 14px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<p>
  Choose your favorite transuranic element (actinide or transactinide).
</p>
<div class="listbox-area">
  <div class="left-area">
    <span id="exp_elem">
        Choose an element:
      </span>
    <div id="exp_wrapper">
      <button aria-haspopup="listbox" aria-labelledby="exp_elem exp_button" id="exp_button">
          Neptunium
        </button>
      <ul id="exp_elem_list" tabindex="-1" role="listbox" aria-labelledby="exp_elem" class="hidden">
        <li id="exp_elem_Np" role="option">
          Neptunium
        </li>
        <li id="exp_elem_Pu" role="option">
          Plutonium
        </li>
        <li id="exp_elem_Am" role="option">
          Americium
        </li>
        <li id="exp_elem_Cm" role="option">
          Curium
        </li>
        <li id="exp_elem_Bk" role="option">
          Berkelium
        </li>
        <li id="exp_elem_Cf" role="option">
          Californium
        </li>
        <li id="exp_elem_Es" role="option">
          Einsteinium
        </li>
        <li id="exp_elem_Fm" role="option">
          Fermium
        </li>
        <li id="exp_elem_Md" role="option">
          Mendelevium
        </li>
        <li id="exp_elem_No" role="option">
          Nobelium
        </li>
        <li id="exp_elem_Lr" role="option">
          Lawrencium
        </li>
        <li id="exp_elem_Rf" role="option">
          Rutherfordium
        </li>
        <li id="exp_elem_Db" role="option">
          Dubnium
        </li>
        <li id="exp_elem_Sg" role="option">
          Seaborgium
        </li>
        <li id="exp_elem_Bh" role="option">
          Bohrium
        </li>
        <li id="exp_elem_Hs" role="option">
          Hassium
        </li>
        <li id="exp_elem_Mt" role="option">
          Meitnerium
        </li>
        <li id="exp_elem_Ds" role="option">
          Darmstadtium
        </li>
        <li id="exp_elem_Rg" role="option">
          Roentgenium
        </li>
        <li id="exp_elem_Cn" role="option">
          Copernicium
        </li>
        <li id="exp_elem_Nh" role="option">
          Nihonium
        </li>
        <li id="exp_elem_Fl" role="option">
          Flerovium
        </li>
        <li id="exp_elem_Mc" role="option">
          Moscovium
        </li>
        <li id="exp_elem_Lv" role="option">
          Livermorium
        </li>
        <li id="exp_elem_Ts" role="option">
          Tennessine
        </li>
        <li id="exp_elem_Og" role="option">
          Oganesson
        </li>
      </ul>
    </div>
  </div>
</div>

{{1}}

到实际页面。