Question

我有以下菜单，但我无法访问这些选项，因为当我浏览它们时，它会立即转到第一个链接，就像我选择它一样。如何使用tab键访问下一个选项？我想用enter选择选项，以便它转到链接。

<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>菜单并不真正用于选择链接列表。它的主要目的是选择一个表单提交后将提供给服务器的选项。

如果您想要一个导航到页面的链接下拉菜单，我建议在Inclusive Components中定义图案，以获取可访问的链接下拉菜单。

＆＃13;

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;
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

辅助功能下拉菜单

1 个答案: