样式下拉 a11y 而没有 js？

Question

有没有办法设置可访问且没有 JS 的 HTML 下拉菜单的样式？

目前我只看到带有 JS、jQuery 或webkit-appearance: none;解决方案webkit-appearance: none; 但我根本不喜欢它，因为我认为这些解决方案是不可访问的。

Answer 1

为清楚起见进行编辑

正如评论中指出的那样，此建议适用于“飞出”菜单或作为导航一部分的下拉菜单。

如果您正在创建一个带有工具栏样式菜单（包含触发功能等的按钮而不是导航的菜单）的 Web 应用程序，则指南和行为将大不相同。

话虽如此，一般的答案仍然是一样的，你不能创建一个没有一些 JavaScript 就可以访问的下拉菜单

原答案

JavaScript 与样式无关，从您的其他问题来看，我假设您的意思是创建一个下拉菜单，而不是如何设置它的样式。

如果没有 JavaScript，您将无法制作可访问的下拉菜单。 这有几个原因：-

1. 您需要能够在打开下拉菜单的按钮上切换aria-expanded 。
2. 下拉列表应该只出现在按下回车键或空格键时（回车是正常的操作方式）。
3. 您需要管理焦点状态，以便当有人点击下拉菜单中的最后一项时，它会转到下一个顶级菜单项并自动关闭下拉菜单。
4. 理想情况下，您应该能够使用箭头键导航下拉菜单（不是必需的，但很好）。
5. 理想情况下，按Esc应该关闭菜单，这对于合规性不是必需的，但对于键盘用户来说会带来更好的体验。

还有其他原因，但这应该让您了解为什么需要 JavaScript。

话虽如此，如果您担心没有启用 JavaScript 的人，您可以提供指向 HTML 站点地图的后备链接。 您可以使用<noscript>标签来做到这一点。

还要记住，JavaScript 本身并不是一个可访问性问题，由 JavaScript 引起的可访问性问题归咎于开发人员，只要您提供回退，它实际上是可访问性最佳实践中必不可少的工具。

Answer 2

HTML

<nav role="navigation">
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a>
          <ul class="dropdown">
            <li><a href="#">Sub-1</a></li>
            <li><a href="#">Sub-2</a></li>
            <li><a href="#">Sub-3</a></li>
          </ul>
        </li>
        <li><a href="#">Three</a></li>
      </ul>
    </nav>

CSS

li {
 display: block;
 transition-duration: 0.5s;
}

li:hover {
  cursor: pointer;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

Answer 3

Please check the following url for reference

> Blockquote

https://codepen.io/srirachachacha/pen/VPKjjx