輔助功能下拉菜單

Question

我有以下菜單，但無法訪問這些選項，因為當我瀏覽它們時，它會立即轉到第一個鏈接，就像我在選擇它一樣。 如何使用Tab鍵訪問下一個選項？ 我想用回車選擇選項，以便轉到鏈接。

<select role="menu" name="select-rates-jump-to-page-1" class="select js-jump-to-page">

              <option role="menuitem" value="" selected="">Select a product</option>

           <option role="menuitem" value="http://www.google.com">Rice</option>


           <option role="menuitem" value="http://yahoo.com">Chicken</option>


           <option role="menuitem" value="htpp://www.bing.com">Salad</option>
        </select>

Answer 1

<select>菜單實際上不是用於選擇鏈接列表的。 主要目的是選擇一個選項，該選項將在表單提交后提供給服務器。

如果您希望鏈接的下拉菜單能夠導航到頁面，則建議在包含組件中定義的模式作為可訪問的鏈接下拉菜單。

 var navButton = document.querySelector('nav button'); navButton.addEventListener('click', function() { let expanded = this.getAttribute('aria-expanded') === 'true' || false; this.setAttribute('aria-expanded', !expanded); let menu = this.nextElementSibling; menu.hidden = !menu.hidden; }); 

 nav ul { list-style: none; padding: 1em; box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2); border-radius: 4px; margin: 0; max-width: 10em; } 

 <nav id="navigation"> <button aria-expanded="false" aria-controls="menu-list">Select a product</button> <ul id="menu-list" hidden> <li><a href="http://www.google.com">Rice</a></li> <li><a href="http://yahoo.com">Chicken</a></li> <li><a href="htpp://www.bing.com">Salad</a></li> </ul> </nav>