Styling dropdown a11y and without js?

Question

Is there a way to style a HTML Dropdown Menu that is accessible and has no JS?

At the moment I see only Solutions with JS, jQuery or webkit-appearance: none; But I don't like it at all because I don't think those solutions would be accessible.

Answer 1

Edit for clarity

As pointed out in the comments this advice applies to a "fly-out" menu, or a drop-down menu that is part of navigation.

If you are creating a web application with a toolbar style menu (a menu that contains buttons that trigger functions etc. instead of navigation) then the guidance and behaviour is very different.

With that being said, the general answer is still the same you cannot create a drop-down that is accessible without some JavaScript

Original Answer

JavaScript has nothing to do with styling, judging by the rest of your question I have assumed you meant create a drop-down menu not how to style it.

You cannot make an accessible drop down menu without JavaScript. There are a few reasons for this:-

1. You need to be able to toggle aria-expanded on the button that opens the drop down.
2. The drop down list should only appear on pressing enter or space (with enter being the normal way of doing it).
3. You need to manage focus states so that when someone tabs on the last item in a drop-down menu it goes to the next top-level menu item and closes the drop-down menu automatically.
4. You should be able to navigate the drop-down menu with arrow keys ideally (not essential but a nice to have).
5. Pressing Esc should ideally close the menu, not essential for compliance but a lot better experience for keyboard users.

There are other reasons but this should give you an idea of why JavaScript is needed.

With that being said if you are worried about people who do not have JavaScript enabled you can provide a fall-back link to a HTML sitemap. You can do this using a <noscript> tag.

Also bear in mind JavaScript in itself is not an accessibility issue, the accessibility issues caused by JavaScript are down to developers and as long as you provide a fall-back it is actually an essential tool in accessibility best practices.

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